[목차]
A. margin & padding
A-1. box-sizing: border-box
B. float 속성
B-1. clear: both
A. margin & padding
margin으로도 padding과 같은 결과를 낼 수 있다.
1) padding을 이용한 처리
[html]
<body> <div id="header">Hello World!</div>
[css]
#header { background: red; height: 100px; padding: 20px 0 0 20px; box-sizing: border-box; }
2) margin을 이용한 처리
[html]
<body>
<div id="header">
<div id="text">Hello World!</div>
</div> #text {
background: red;
height: 100px;
margin: 20px 0 0 20px;
box-sizing: border-box;
}
위와 같이 div 영역을 2단으로 나누고
css의 margin 처리를 통해 div id="text" 영역의 간격을 조정한다.
두 방법 다 출력되는 결과는 같지만
margin은 padding에 비해 버그를 낼 가능성이 높으므로
같은 결과를 낼 수 있다면 padding을 기반으로 처리하는 것이 좋다.
(구조적으로도 padding을 쓰는 것이 더 간결하다.)
*텍스트 영역을 다룰 때는 id(#)가 아닌 class(.)로 구분하는 습관을 들이자.
(id는 class보다 상위 선택자이며 사이트 내에서 한번만 다루어지는 영역을 구현하는 경우에,
class는 css에서 중복처리할 수 있는 부분을 다룰 때 주로 사용한다.)
[html]
<div id="header"> <div class="text">Hello World!</div> </div>
[css]
#header > .text { background: green; }
A-1. box-sizing: border-box
box-sizing: border-box;
CSS의 margin과 padding을 통해 수치를 이리저리 조정하면
영역의 높이와 넓이를 가늠하기가 어려워지고
컨텐츠의 크기가 원래 주려고 의도한 값을 벗어나기도 한다.
이럴 때 이용하는 것이 box-sizing: border-box인데
이는 테두리(border)를 기준으로 영역의 크기를 정하도록 하며
사용자가 설정한 padding, margin 값을 모두 합산해준다.
border, padding, margin을 모두 합산하기 때문에
컨텐츠 영역의 크기가 설정값보다 작아질 수 있지만
이 태그를 삽입하는 편이 계산이 한결 수월하다.
(컨텐츠의 크기 = 전체크기 - border - padding - margin)
*box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성.
B. float 속성
[html]
<div id="header"> <div class="text">Hello World!</div> </div>
[css]
#header > .text { float: right; background: green; }
CSS에 float: right;를 삽입하면 text영역(블록)이 우상단으로 빠지면서
마치 inline속성을 지닌 것처럼 좌측 영역이 텅 비게 된다.
여기에 추가로
[html]
<div id="header">
<div class="text">Hello World!</div>
<div>web7722</div>
</div>위과 같이 web7722라는 텍스트 영역을 삽입하면
hello world와 web7722가 둘다 블록 속성을 가졌음에도 같은 선상에 위치하게 된다.
(hello world가 web7722가 적힌 블록 위에 얹어진 것.)
이러한 복잡함(단점)때문에 float 속성을 다루기가 까다롭다.
B-2. clear: both
clear: both;
clear 속성에는 '취소하다'는 뜻이 담겨있다.
즉, clear: both는 위에 주었던 float: left나 right를 모두 초기화하도록 만드는 속성이다.
(clear: left나 clear: right도 가능하다.)
주로 float 속성이 가진 위로 뜨는 효과가 다른 영역을 침범하는 것을 막기 위해 사용한다.
