CSS 박스 모델의 일부를 구성하는 다른 두개의 CSS 프로퍼티 width, height 는 테이블, 단, 배너, 사이드 바 등과 같은 대상의 치수를 지정하는데 유용하게 사용된다. height 및 width 프로퍼티를 이용하여 스타일의 내용 영역의 높이과 너비를 지정한다. 이 프로퍼티는 이 후에 설명할 CSS 레이아웃 같은 것을 제작할 경우 주로 사용하지만, 테이블의 너비 지정이나 간단한 사이드바 제작, 혹은 썸네일 갤러리 제작 등과 같은 보다 기본적인 디자인 작업에도 유용하게 사용된다
스타일에 이 프로퍼티를 추가하는 것은 매우 간단하다. 이미 해봤던 대로 그저 프로퍼티 다음에 css 단위 체계대로 넣어주면 된다 , 예를 들면
- width :300px;
- width : 30%;
- height : 20em;
픽셀은 말 그대로 픽셀이다. 이해하기 쉽고 사용하기도 편리하다. 변동 되지 않는 고정된 너비나 높이를 만들 수 있다. Em은 스타일 정의된 엘리먼트에 대한 텍스트 크기와 동일하다. 텍스트 크기를 24px로 지정했다고 치자, 그 스타일에 대한 em 은 24px 이므로, 만약 너비를 2em으로 지정한다면 48 px 이 될것이다. 만약 스타일에 텍스트 크기를 지정하지 않는다면, em은 상속받은 텍스트 크기가 될것이다
Width 프로퍼티에서, 백분율 값은 스타일을 포함하고 있는 엘리먼트의 너비에 대한 백분율이 된다. 만약 제목의 너비를 75% 로 지정하고, 제목이 너비가 지정된 다른 엘리먼트에 포함되어 있지 않다면, 제목은 브라우저 창 너비에 대한 75%의 폭을 갖는다 혹시 방문객이 자신의 브라우저 설정에서 크기를 조정한다면, 제목의 너비는 바뀔 것이다. 그러나 만일 제목이 200px 너비의 <div> 안에 포함되어 있다면 그 제목의 너비는 150px 가 된다. Height 프로퍼티에 대해서는 백분율 값은 비슷하게 작용하지만, 이때는 포함하고 있는 엘리먼트의 너비가 아닌 높이를 기준으로 한다.
다듬지 않은 보석 - 최소 및 최대
CSS 는 height 및 width 와 관련된 일부 다른 프로퍼티들도 지원한다. min-height, min-width, max-height, max-width. 이러한 프로퍼티를 사용하여 최소/ 최대 너비나 높이를 지정할 수 있다. 엘리먼트의 너비나 높이는 지정된 값보다 더 클수 없다. 이 프로퍼티는 상당히 작거나 큰 모니터 모두에서 디자인에 적당한 공간을 주기 때문에 부유레이아웃에 쓸모가 있다. 하지만 인터넷 익스플로러 6 이전 버전에서는 인식 하지 못한다.
박스의 실제 너비와 높이 계산하기
width 와 height 프로퍼티는 꽤 간단한 반면, 종종 사람들을 어이없게 하는 미묘한 차이가 있다. 우선 스타일의 width 와 height 에 대해 지정해주는 값과 웹 브라우저가 실제로 스타일의 박스를 보여주는 공간 사이에는 차이가 없다. Width 와 height 프로퍼티는 텍스트, 이미지, 다른 여러 태그가 어디에 놓일지 등 스타일이 적용 된 내용 역역의 너비와 높이를 지정한다. 실제너비, 즉 브라우저에 의해 할당된 화면상의 실제 영역의 길이는 margin, border, padding, width 프로퍼티의 너비를 전부 더한 값이다.
다음 프로퍼티를 지정했다고 가정하자
- margin : 10px;
- border-width : 5px;
- padding : 15px;
- width : 100px;
Width 프로퍼티가 지정될 경우, 다른 프로퍼티에 상관 없이 글이나 이미지 등의 내용물에만 할당되는 공간이 얼마인지를 알수 있다. Width 프로퍼티 값은 내용물 만큼의 공간이기 때문에 계산할 필요가 없다. 물론 어떤 엘리먼트가 웹페이지에서 얼마만큼의 공간을 차지 할지를 정확히 계산할 경우에는 반드시 계산을 조금 해야 할 것이다. 위의 예에서는 좌우 여백이 20px, 좌우 테두리가 10px, 좌우 내부 공백이 30px, 내용물 자체 width 가 100px 이므로 웹브라우저가 스타일의 박스에 할당한 너비는 총 160px 이다. 윈도우 인터넷 익스플로러 6 이전 버전에서는 계산이 전부 잘못된다. 이런 브라우저에 대한 추가 작업은 불가피하다.
페이지 엘리먼트에 높이를 지정할 경우는 주의 해야한다. 만일 어떤 태그 내용물에 대한 정확한 치수를 모른다면, 박스 높이가 얼마나 될지 정확히 알수 없다. 코멘트를 강조하기 위해 pull quote 에 대한 스타일을 생성하고 인용 박스 너비과 높이를 모두 100px 로 지정했다고 가정하면, pull quote에 텍스트를 많이 넣으면 박스는 100px 보다 커질 것이므로 이상한 문제에 부딪히게 된다. 텍스트 높이가 100px 이하라 하더라도 사이트 방문자는 여러분이 지정한 것보다 텍스트를 좀더 크게 보려고 자신의 브라우저에서 글자크기를 늘릴지도 모른다
'코드 > Html & CSS' 카테고리의 다른 글
배경이미지의 위치 지정 (0) | 2011.10.11 |
---|---|
IE 5에서 깨지는 박스 모델 바로잡기 (0) | 2011.09.21 |
인라인 및 블럭 - 계층 박스 표시하기 (0) | 2011.09.08 |
음수 Margin 을 이용하여 간격없애기 (0) | 2011.09.07 |
여러 Margin 사이의 충돌 (0) | 2011.09.07 |