1. 박스모델
HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는데 이것을 가르켜 박스모델이라고 하고, 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.
박스모델의 속성
- margin (마진)
-> 엘리먼트와 엘리먼트 간의 여백, border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없다.
-> 위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨 (좌우는 아님).
- border (보더), 테두리
-> 엘리먼트의 테두리.
-> 테두리는 margin과 padding의 경계가 된다.
-> 테두리의 굵기와 색상과 스타일을 지정할 수 있다.
padding (패딩)
-> 테두리와 content간의 간격.
content (컨텐츠)
-> 엘리먼트안에 포함되는 컨텐츠로, 예를 들어
<div>test</div>라고 태그를 기술했을 때 div앨리먼트의 content는 test이다.
content는 폭(width)과 높이(height)를 지정할 수 있다.
- margin, padding 표기법
-> margin: 10px => 상우하좌의 margin값이 10px
-> margin: 10px 20px => 상하 10px, 좌우 20px,
-> margin: 10px 20px 30px => 상 10px, 좌우 20px, 하 30px
-> margin: 10px 20px 30px 40px => 상우하좌의 순으로 값이 지정됨
- 마진겹침(margin collapsing) 규칙이란?
-> 마진이 세로 방향으로 겹쳤을 때 마진 값이 더 큰 쪽을 따르게 되는 현상.
- 박스모델의 종류
-> 블록 레벨 엘리먼트(block-level element)
-> 한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트.
-> 다른 인라인 엘리먼트 뿐 아니라 블록 레벨 엘리먼트도 컨텐츠로 포함할 수 있다.
-> DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등등..
- 인라인 엘리먼트(inline element)
-> 한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트.
-> 인라인 엘리먼트만 포함 할 수 있고, 블록레벨 엘리먼트의 자식이어야 한다.
-> a, img, em, strong 등등..
-> display 속성을 이용해서 블록레벨 엘리먼트를 인라인 엘리먼트로 바꿀 수 있고, 반대경우도 가능하다.
-> display 속성의 값을 none으로 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다.
- float
-> 엘리먼트를 원하는 위치로 이동시키고, 엘리먼트 뒤에 따라오는 앨리먼트들이 엘리먼트를 피해서 표시 되도록 한다.
-> float는 원래 이미지를 둘러싸고 흘러가는 텍스트를 표시하기 위해서 고안된 것이다.
-> 레이아웃을 구성할 때도 사용된다.
-> float를 해제하기 위해서는 clear 속성을 사용한다.
2. 포지셔닝
positioning, CSS를 이용해서 HTML 엘리먼트들의 위치를 제어하는 방법
- 포지셔닝의 종류
-> 엘리먼트에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다.
- 상대위치 (relative positioning)
position: relative.
자신의 위치를 기준으로 한 상대위치 값을 지정한다.
자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경되지만, 엘리먼트의 위치에 따라서는 변경되지 않는다.
- 절대위치 (absolute positioning)
position: absolute.
문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.
엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다.
- 고정위치 (fixed positioning)
position: fixed.
문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.
엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다.
스크롤의 영향을 받지 않는다.
- 정적위치 (static positioning)
position: static.
자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경된다.
position 속성의 값을 지정하지 않으면 기본적으로 static의 값이 주어진다.
left, top, right, bottom과 같은 offset이 무시된다.
0. 참고자료.
