HTML 문서를 태그를 이용하여 작성하면서 글이 흘러가며 각 글, 즉 태그들은 각각의 크기를 가집니다. 가변적인 크기일 수도 있고 고정적 크기일 수도 있습니다. 하지만 그걸 떠나서, 태그가 박스 형태의 사각 영역을 가질수 있느냐 없느냐가 레이아웃을 생각하는데 기본이 됩니다. 우선 예를 봅시다.
애국가 1~4절, 즉 텍스트 내용이 담긴 4개의 박스를 위치를 따로 지정하지 않고 CSS 속성만 가지고 글 흐르듯 배열되어 보이도록 한것입니다. 코드는 아래와 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <html> <head> <style type="text/css"> p{ background: #CCC; display: inline; display: inline-block; zoom: 1; width: 100px; } </style> <title>ESPB</title> </head> <body> 애국가 1~4절 <div> <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.</p> <p>남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.</p> <p>가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.</p> <p>이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세.</p> </div> 애국가 끝 </html> | cs |
기본적으로 익히 접하는 글 흐름 기반의 박스 영역을 자유롭게 가지고 설정할수 있는것은 이미지 <img> 정도 뿐입니다. 하지만 이것은 내용, 즉 텍스트를 담을 수 없습니다. width, height, 넓이와 높이를 설정할수 있는 박스 모델은 div, iframe, image 와 같이 특정한 기능을 가지거나, 한 라인, 문단을 점유하는 형태로 밖에 존재하지 않기에 우리는 자유로운 내용을 작성할 수 있는 박스모델이 필요합니다.
1 2 3 4 5 | .box{ display: inline; display: inline-block; zoom: 1; } | cs |
CSS 속성 딱 3개의 값이면 글 흐름 기반의 박스모델을 사용하실 수 있습니다. 넓이 높이 모두 사용 가능한 녀석으로 말이죠. 그리고 기본적으로 넓이 높이를 지정하지 않는다면, 넓이는 기본적으로 100%의 기본값을 가질 것이고, 높이는 가변적으로 계속 내용에 따라 늘어날것입니다. 넓이를 강제한다면, 자동으로 줄바꿈 되어 아래로 길어집니다. 높이까지 크기를 강제한다면 내용은 박스 영역을 넘어서 표시될겁니다 그때는 overflow 속성을 조절하셔서 표시되지 않게 하거나 생략하시면 됩니다.