‹상자들이 구성하는 세계›
스크린 상에서 하나의 그룹은 사각형으로 묶이고 그 속에 내용이 들어갑니다. 이러한 구조의 포함관계가 만드는 연쇄고리가 모여 하나의 커다란 웹사이트를 스크린에 표시하고 세계를 구축하는 기본적인 원리가 되기도 했었죠(특히 20세기에는). 따라서 하나의 상자를 원하는 넓이와 여백으로 만들고 원하는 위치에 붙이고 때로는 그것을 한 줄로 흐르게 한다거나, 어떨때는 고정시키는 등의 상자 다루기는 CSS에서 가장 기본적이고 이해가 필요합니다. 일단은 바둑판 스타일의 20세기 웹을 만들 줄 알아야 조금은 다른 시도를 해볼 수 있습니다. 혹은 취업이 용이할 수 있습니다.
‹블록과 인라인 요소›
html을 구성하는 다양한 요소들은 상자를 만들거나, 만들지 않는 두 가지의 요소로 나뉩니다. em(emphasize)요소나 mark요소와 같이 내용의 특정 부분을 강조하는 요소는 폭이나 넓이를 가지지 않는 요소라서 이들을 인라인(inline)요소라고 합니다. 이미지를 삽입하는 img요소와 링크를 만드는 a요소가 대표적인 인라인 요소입니다. 몇몇 인라인 요소들을 제외한 나머지 요소들은 대부분 상자를 만드는 블록(block)요소들이기 때문에 폭(width), 높이(height), 테두리(border), 안여백(padding), 바깥여백(margin)과 같은 스타일 지정이 가능합니다. display속성을 사용해서 인라인 요소를 블록 요소로 전환할 수 있습니다(display:block).
<h1 style="background: yellow">상자예시</h1> <p style="background: yellow">별다른 폭이나 넓이를 지정하지 않은 경우 하나의 요소는 현재 창의 폭 전체를 폭으로 설정하고, 높이는 내용에 맞춥니다.</p> <p style="background: yellow">새로운 요소가 시작되면 줄이 바뀝니다.</p> <p style="background: yellow">이미지는 상자를 만드는 블록(block)요소가 아닙니다. <img src="box.png"> 이미지는 내용에 포함되는 인라인(inline)요소입니다. </p>
‹상자의 공간›
지금까지 우리는 상자의 폭과 높이만을 width와 height 속성값을 통해 살펴보았습니다. 하지만 실제로 상자가 차지하는 공간은 안여백(padding), 테두리(border), 바깥여백(margin)이 더해져 계산됩니다. 만약 여러분이 생각하는대로 상자의 위치가 맞추어지지 않는다면 그것은 여백과 테두리를 계산하지 않았기 때문입니다.
border: 1px solid black; 두께, 스타일, 색상 border: 2px dotted blue; 두께, 스타일, 색상 padding: 1em 상하좌우 모두 1 padding: 1em 2em 상하1, 좌우2 padding: 1em 1.5em 2em; 상, 좌우1.5, 하 padding: 1em 1.5em 2em 1em; 상우하좌 시계방향 만약 헤깔리면 padding-top: 1em; padding-right: 1.5em; padding-bottom: 2em; padding-left: 1em; 다 써주면 됩니다. 마진도 패딩과 동일