'div 레이아웃'에 해당되는 글 2건
- 2009.12.11 CSS : Box Model
- 2009.12.10 CSS : Float 흐름끊기 2
CSS를 이용하여 레이아웃을 잡을때 크게 세가지를 이용하는데요,
하나가 position, 두번째가 float, 그리고 나머지 하난 이제 다룰 Box Model 입니다 ^^
기본적으로 우리가 html에서 다루는 거의 대부분의 요소1는 상자와 같은 Box Model로 되어있습니다.
이전에 다루었던 position이나 float은 해당 요소들이 어느곳에 배치 될 것인지를 각각
절대적인 방법 혹은 상대적인 방법으로 결정을 해 주었다면
이 box model은 해당 요소의 테두리나 여백등의 직접적인 레이아웃을 결정하게 됩니다.
이미지를 하나 보도록 하겠습니다.
Box Model
위의 이미지는 Box Model을 설명 해 놓은 그림입니다.
크게 네가지 영역으로 구성이 되어 있는데요, 각 영역은 다음과 같습니다.
content : 우리가 작성하여 보여지는 영역
padding : content영역을 둘러싸고있는 content와 테두리(border)사이 여백
border : 테두리
margin: 테두리 바깥부분의 여백
또한, CSS 2에 따르면 해당 영역의 width와 height는 content 영역의 크기2를 말합니다.
결국 해당 박스의 최종 크기3는 content의 width/height의 값에다가 padding과 border값을 합한 값이 됩니다.
자, 그렇다면 위의 값들은 어떤식으로 사용을 하는지 다음 예제를 보도록 하겠습니다.
HTML
CSS
위의 예제들을 브라우저 상에서 보면 다음과 같이 보입니다.
바깥의 검은영역이 wrap 부분이고, 그 안의 하얀색 부분이 box_1 부분입니다.
바깥영역은 margin이 생겼다는것을 볼 수 있도록 하기 위해서 넣어봤는데요..
내부의 box_1 부분을 가지고 설명을 하도록 하겠습니다.
width:250px, height:150px 로 박스의 내용이 들어갈 영역의 크기를 설정합니다.
위의 예는 가로 250px, 높이 150px의 상자가 생성이 됩니다.
이 값은 px(픽셀)로 줄 수도 있고, em이나 %등 다양한 단위로 줄 수 있습니다 ^^
그리고 background-color:#fff 로 해당 영역의 배경색을 설정 해 주는데요
#fff부분이 색상이 들어가는 부분이며 보통은 #ffffff 와 같이 #+여섯자리의 16진수로 표현을 하는데
일부 #ffffff 처럼 모든 자리수가 동일 할때는 보는것처럼 각자리 하나씩만 해서 총 세자리로 표현하기도 합니다.
이 배경색부분은 box model에서 content영역과 padding영역에 적용이 됩니다.
그 다음 남은 속성중 padding: 20px 20px 20px 20px, margin: 40px 40px 40px 40px 가 보이네요
이부분은 각각 padding과 margin영역의 크기를 결정 해 줍니다. 마찬가지로 px, %등 여러 단위가 적용이 가능한데요
사실 이부분은 각각 다음과 같이 표현이 됩니다.
위처럼 각 네부분의 영역을 따로 지정해주는 것을 간편하게 한번에 몰아서 지정해 줄수 있는데요
padding 혹은 margin 다음에 나오는 네부분의 숫자는 각각 위 오른쪽 아래 왼쪽 순서입니다.
쉽게 생각해서 시계 12시방향부터 시작해서 시계바늘이 움직이는 방향순으로 지정해준다고 보시면 됩니다.
또한, 위 예제처럼 모든 영역이 동일한 값을 가진다면 다음과 같이 CSS 선언을 해줘도 됩니다.
이처럼 간략하게 하나만 지정을 해 줄수도 있으며, 연달아 2개 3개도 쓸 수 있는데요,
2개를 지정해주면 상/하 값 좌/우 값을 표현하고,
3개를 지정해주면 상 좌/우 하 이렇게 표현하게 됩니다 ^^
다음 설명할 부분으로 border:10px solid #800000 이 있는데요,
이 부분은 박스모델의 테두리를 지정해주는 부분입니다.
이 border부분도 margin/padding 과 마찬가지로 여러 부분으로 나뉠 수 있는데요
border-top-width, border-right-width, border-bottom-width, border-left-width : 테두리의 굵기
border-top-style, border-right-style, border-bottom-style, border-left-style : 테두리의 모양
border-top-color, border-right-color, border-bottom-color, border-left-color : 테두리의 색깔
이렇게 나눌 수 있습니다.
즉, border:A B C 로 지정 하는 경우 테두리의 상하좌우 모두 똑같이 설정하는데,
A만큼의 두께로 B모양처럼 C색깔로 설정한다고 보면 됩니다.
이 역시 마찬가지로 border-top, border-right, border-bottom, border-left 로 각각 개별 설정이 가능합니다.
특이하게 여길부분은 style 부분인데요,
이 부분에 사용할 수 있는 값으로는
solid, dashed, dotted, double, groove, inset, outset, ridge 등의 값이 있습니다.
그중에서 실선인 solid를 많이 사용하곤 하지요..^^
크로스 브라우징을 염두해 두고 html문서를 작성하다보면 이러한 박스모델에서 골치썩는일이 생기는데요,
바로 브라우저마다 렌더링을 하는 방식이 달라 아래와 같은 문제점이 발생하기도 합니다.
DTD4를 정의하지 않는 쿼크(Quirks) 모드로 렌더링시 브라우저마다 달라지는 현상이 생깁니다.
확인을 해 보면 IE쪽은 width, height가 box model의 border 기준으로 잡혀 있고,
FF쪽은 content영역의 width, height로 잡혀 있습니다. 이를 해결하려면 html 문서에 다음과 같이
DTD를 선언 해 주면 됩니다.
위의 소스에서 <!DOCTYPE HTML.... 로 시작하는 부분이 바로 DTD부분입니다.
이 한줄로 인해서 브라우저는 html문서가 html 4.01 strict5로 제작되었다고 해석하고 그에 맞는 렌더링 방법으로
보여지게 됩니다.
이것으로 레이아웃에 필요한 포지셔닝, 플로팅, 박스 모델까지 대충 정리가 되었는데요
이 세가지만 확실하게 알고 있으면 이런 블로그 스킨의 레이아웃을 만든다던가 할때
생뚱맞는 table 태그를 이용해서 레이아웃을 짜는것보단,
조금은 웹표준에 가까운 div태그등을 이용하여 레이아웃을 짜는데 큰 도움이 될듯 하네요 ^^
[관련글 보기]
2009/12/10 - [개발이야기] - CSS : Float 흐름끊기
2009/12/09 - [개발이야기] - CSS : Float
2009/12/08 - [개발이야기] - CSS Position 이야기
- br, strong 등의 태그는 box model에 해당하지 않습니다. [본문으로]
- IE6와 같은 구형 브라우저에서는 이게 잘 지켜지지 않기도 합니다. 이럴땐 DTD를 명시해줌으로 해서 해결이 됩니다. [본문으로]
- 사용자가 지정한값이 아닌 실제로 보여지는 상자의 크기 [본문으로]
- Document Type Definition 의 약자로, 해당 html문서가 어떤 형태의 html을 가지고 작성했는지 알려주는 역할을 합니다. [본문으로]
- DTD에 대한 설명은 http://trio.co.kr/webrefer/html/sgml/dtd.html 에 자세히 나와있습니다. [본문으로]
'개발이야기' 카테고리의 다른 글
| HTML 기본 구조 (2) | 2009.12.15 |
|---|---|
| HTML (4) | 2009.12.14 |
| CSS : Float 흐름끊기 (2) | 2009.12.10 |
| CSS : Float (0) | 2009.12.09 |
| CSS Position 이야기 (9) | 2009.12.08 |
앞서 flow에 따른 float을 살펴 보았습니다.
실제로 float을 사용하다 보면 이리저리 예상치 못한 난관에 부딧히면서 머엉~ 해질때가 많은데요
그런 케이스를 몇개 추려서 한번 보도록 하겠습니다.
이 화면의 html 구조는 다음과 같습니다.
또한, CSS를 보도록 하겠습니다.
티스토리 스킨을 조금 만져봤던 분이라면 익숙한 구조일 것입니다 ^^;
레이아웃이 블로그 2단 스킨의 그것과 흡사합니다.
근데, 화면을 보면 뭔가 조금 이상해 보일겁니다..
넵. 화면에 회색배경으로 된 div 요소..
즉 container 부분의 높이가 자식 요소의 높이를 반영하지 않는 문제점이 보이네요.
이는 floating된 자식의 요소가 부모요소에게 자신의 크기를 전해주지 못해서 생기는 문제입니다.
위의 레이아웃인 경우 보통의 블로그 스킨을 생각하면 footer부분은 화면의 하단에 위치하기때문에
footer부분에서 float을 없애주면 됩니다.
위의 스타일처럼 clear:both; 를 지정해주면 float이 사라져 아래와 같이 left 요소의 하단에 길게 위치함을
확인 할 수 있습니다.
자, 그렇다면 만약에 이전의 화면처럼 원래 footer가 right 아래 위치해야 한다면 어떻게 해결을 할까요?
방법은 :after1 가상선택자를 이용하여 float을 clear 할 수 있습니다.
즉, 아래처럼 container에다 :after 가상선택자를 이용하여 clear:both를 주고 새로운 스타일을 주면 됩니다.
그러면 결과는 이렇게 변합니다.
또한, float은 각각의 크기에 민감합니다.
위의 상태에서 left 요소의 너비를 400px로 늘려서 확인을 해 보면 right 요소가 아래로 떨어지는것을
확인 할 수 있습니다.
부모 요소(container)의 너비가 700px인데,
자식 요소들이 각각 400px로 합이 800px가 되니 right 요소가 공간이 없어 아래로 떨어지는 현상입니다.
footer는 우리가 너비를 주지 않았기 때문에 유연하게 줄어든거죠 ^^;
특히 이러한 경우는 블로그 스킨에서 종종 나타나는 문제인데요, container가 고정 크기가 아닌 가변적인 크기거나
크기지정을 해 주지 않아서 브라우저의 너비가 충분히 넓을때는 문제없이 보이다가
브라우저의 너비가 좁아지면 해당 부모요소의 너비가 좁아지면서 내부의 자식 요소들의 레이아웃이 깨지기도 합니다.
해결법은 부모요소의 크기를 자식요소들 너비의 합과 같거나 더 큰 고정크기로 바꿔주면 해결됩니다 ^^
적다보니 float을 clear 하는 방법에서 글이 길어지네요..^^;
float에 대한 부분은 이걸로 마치도록 하고,
이후에 float에 관한 유용한 팁이 생각나면 다시 새로운 글로 적어보도록 하겠습니다. ^^
- 해당 요소의 뒷부분을 의미합니다. [본문으로]
'개발이야기' 카테고리의 다른 글
| HTML (4) | 2009.12.14 |
|---|---|
| CSS : Box Model (0) | 2009.12.11 |
| CSS : Float (0) | 2009.12.09 |
| CSS Position 이야기 (9) | 2009.12.08 |
| CSS Sprite 를 이용한 간단한 롤오버 메뉴 (2) | 2009.12.07 |
