2011. 4. 26. 01:01ㆍIT/Tistory Tips
화면에 요소를 배치할 때, 또는 각 요소 내용을 정리할 때 가장 많이 사용하는 스타일 속성이 padding과 margin이다. CSS를 사용해서 내가 원하는 위치에 원하는 방식으로 HTML 문서의 각 요소를 배치하려면 padding과 margin에 대한 이해는 필수다.
1. padding
padding은 요소 내부의 여백이다. border에 관한 게시물에서 모든 요소는 자신만의 영역을 가진다고 이야기했다. 자신만의 영역 가장자리가 border로 표시된다. padding은 쉽게 생각하면 border에서부터 그 안에 배치된 글이나 이미지까지의 거리다. 아래 예를 보면 padding에 대해 감이 올 것이다.
| padding:15px 적용 | padding 미적용 |
|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros id dolor pharetra pretium id in arcu. Duis ut est turpis, nec tincidunt tellus. Quisque facilisis quam in neque egestas laoreet. Donec lobortis imperdiet nibh et pulvinar. Suspendisse imperdiet eros eu ante convallis condimentum. Aenean porttitor adipiscing lorem vitae hendrerit. Proin scelerisque libero eu nibh dictum vestibulum. In quam felis, commodo quis ullamcorper sed, sagittis vitae mi. Proin justo metus, sagittis sit amet pellentesque eget, lacinia vitae diam. Vivamus quam metus, egestas a blandit sit amet, porta tincidunt justo. In rhoncus tempor velit vel eleifend. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros id dolor pharetra pretium id in arcu. Duis ut est turpis, nec tincidunt tellus. Quisque facilisis quam in neque egestas laoreet. Donec lobortis imperdiet nibh et pulvinar. Suspendisse imperdiet eros eu ante convallis condimentum. Aenean porttitor adipiscing lorem vitae hendrerit. Proin scelerisque libero eu nibh dictum vestibulum. In quam felis, commodo quis ullamcorper sed, sagittis vitae mi. Proin justo metus, sagittis sit amet pellentesque eget, lacinia vitae diam. Vivamus quam metus, egestas a blandit sit amet, porta tincidunt justo. In rhoncus tempor velit vel eleifend. Ut semper, arcu id dictum imperdiet, metus urna fringilla leo, et vehicula urna quam at enim. Curabitur et sem sit amet lectus molestie bibendum ac sit amet libero. |
padding은 왼쪽 예에서 border와 글자 사이의 간격이다. padding:15px이라는 스타일을 적용하니 왼쪽처럼 글자와 테두리 사이에 간격이 생겼다. 오른쪽은 테두리와 글자가 붙어 있는 것을 확인할 수 있다.
2. margin
margin은 padding과 반대로 요소 외부의 여백이다. 예를 들어 높이가 30px이고 너비가 50px인 div 요소가 있다고 하자. 이 div 요소의 margin이 20px이라면 실제 이 요소는 너비 90픽셀, 높이 70픽셀을 자신의 영역으로 가진다. margin은 border 외부의 영역이므로 border로도 영역 전체를 표시할 수 없지만, 확실히 그 영역을 차지한다. 아래 예를 확인하자.
| margin:15px 적용 | margin 미적용 |
|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros id dolor pharetra pretium id in arcu. Duis ut est turpis, nec tincidunt tellus. Quisque facilisis quam in neque egestas laoreet. Donec lobortis imperdiet nibh et pulvinar. Suspendisse imperdiet eros eu ante convallis condimentum. Aenean porttitor adipiscing lorem vitae hendrerit. Proin scelerisque libero eu nibh dictum vestibulum. In quam felis, commodo quis ullamcorper sed, sagittis vitae mi. Proin justo metus, sagittis sit amet pellentesque eget, lacinia vitae diam. Vivamus quam metus, egestas a blandit sit amet, porta tincidunt justo. In rhoncus tempor velit vel eleifend.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros id dolor pharetra pretium id in arcu. Duis ut est turpis, nec tincidunt tellus. Quisque facilisis quam in neque egestas laoreet. Donec lobortis imperdiet nibh et pulvinar. Suspendisse imperdiet eros eu ante convallis condimentum. Aenean porttitor adipiscing lorem vitae hendrerit. Proin scelerisque libero eu nibh dictum vestibulum. In quam felis, commodo quis ullamcorper sed, sagittis vitae mi. Proin justo metus, sagittis sit amet pellentesque eget, lacinia vitae diam. Vivamus quam metus, egestas a blandit sit amet, porta tincidunt justo. In rhoncus tempor velit vel eleifend. Ut semper, arcu id dictum imperdiet, metus urna fringilla leo, et vehicula urna quam at enim. Curabitur et sem sit amet lectus molestie bibendum ac sit amet libero.
|
붉은 td 요소에 padding:0으로 내부 여백을 없앤 다음 파란 div 요소에 margin 속성을 지정했다. 왼쪽 예의 붉은색이 margin으로 지정된 부분이다. 푸른 사각형에 margin을 지정하니 푸른 사각형 바깥에 일정한 공간이 생겼다. 반대로 margin을 지정하지 않은 오른쪽은 푸른 사각형이 전체를 차지한다.
3. HTML 요소에 padding과 margin 적용하기
실제 HTML 요소에 padding과 margin을 적용해보자. p 요소에 padding과 margin을 적용한 예.
<예제 1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut leo et orci consectetur auctor ut vitae nunc. Integer eu elit mollis ante porttitor suscipit vitae ut nibh. Curabitur augue libero, dignissim mattis fermentum quis, bibendum in ante. Vestibulum pulvinar egestas mauris sit amet imperdiet. Aenean eget aliquet elit. Maecenas varius ante neque, in consequat ante. Nulla dignissim nisi in mi accumsan sed mollis nisi egestas. Praesent quis justo sapien, vel pulvinar diam. Maecenas erat velit, elementum et fringilla in, luctus ac ligula. Donec in dolor ut justo fringilla luctus eu at nibh. Nam ultrices tellus id nibh ornare eleifend at vitae quam. Suspendisse mattis molestie purus id semper. Nunc tempus faucibus ligula vitae malesuada.
위 예제에 사용한 p 요소의 스타일은 <p style="text-indent: 0; padding: 30px; margin: 10px; background: #ccc; border: 1px dashed #000">다. text-indent:0으로 들여쓰기를 하지 않았고 background와 border를 지정해서 padding과 margin을 시각적으로 구분했다. 앞에서 이야기한 것처럼 padding은 요소 내부의 여백이므로 padding까지 모두 포함한 범위가 해당 요소의 영역이다. 그러나 margin은 요소 외부의 여백이므로 요소의 영역 바깥 부분이다. padding:30px과 margin:10px을 적용한 위 예에서 글 내용부터 검정 점선 사이의 회색 사각형 간격이 padding으로 30픽셀이다. 검정 점선부터 div 요소의 주황색 테두리까지가 margin으로 10픽셀이다.
예제 1의 공간 구성을 웹 브라우저의 개발자 도구에서 확인한 모습이다. 678 X 161 영역이 실제 글이 입력된 부분이고 그 바로 바깥에 30픽셀의 padding을 확인할 수 있다. 그다음이 1픽셀의 border고 마지막이 10픽셀의 margin이다. background 등을 지정하지 않으면 시각적으로 확인할 수 없는 padding과 margin은 점선으로 표시되고 시각적으로 드러나는 실제 글 영역과 border는 실선으로 표시된다.
4. 상하좌우 여백을 다르게 지정하기
border 게시물에서 이야기했던 것처럼 margin과 padding은 상하좌우 값을 다르게 지정할 수 있다. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left로 상하좌우 여백을 지정한다. margin과 padding 역시 상하좌우를 줄여서 사용할 수 있다. 아래 표를 보자.
| 상하좌우 지정 방식 | 적용 예 |
|---|---|
| margin: 상 우 하 좌 | margin:30px 15px 30px 15px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut leo et orci consectetur auctor ut vitae nunc. Integer eu elit mollis ante porttitor suscipit vitae ut nibh. |
| margin: 상 좌우 하 | margin:30px 15px 30px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut leo et orci consectetur auctor ut vitae nunc. Integer eu elit mollis ante porttitor suscipit vitae ut nibh. |
| margin: 상하 좌우 | margin:30px 15px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut leo et orci consectetur auctor ut vitae nunc. Integer eu elit mollis ante porttitor suscipit vitae ut nibh. |
| padding: 상 우 하 좌 | padding:30px 15px 30px 15px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut leo et orci consectetur auctor ut vitae nunc. Integer eu elit mollis ante porttitor suscipit vitae ut nibh. |
| padding: 상 좌우 하 | padding:30px 15px 30px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut leo et orci consectetur auctor ut vitae nunc. Integer eu elit mollis ante porttitor suscipit vitae ut nibh. |
| padding: 상하 좌우 | padding:30px 15px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut leo et orci consectetur auctor ut vitae nunc. Integer eu elit mollis ante porttitor suscipit vitae ut nibh. |
border와 마찬가지로 margin과 padding 역시 상하좌우 값을 줄여서 사용할 수 있다.
5. CSS에서 margin과 padding 초기화 및 기본값 지정
블로그 스킨이나 특정 사이트의 CSS를 보면 *{margin:0;padding:0}이란 부분을 종종 볼 수 있다. 선택자에서 *는 모든 요소를 이야기한다고 했다. 즉, *{margin:0;padding:0}는 모든 요소의 외부 여백과 내부 여백을 0으로 지정한다는 이야기다. 기본값은 당연히 0인데 왜 또 다시 지정하느냐고? 간단하다. 기본값이 0이 아니기 때문이다.
선택자에 대해 이야기할 때 User Agent 선언에 대해 이야기한 적이 있다. 모든 웹브라우저는 기본적으로 CSS를 가지고 있다. 예를 들어 h1 요소는 margin이 얼마고 글자 크기가 얼마고 하는 것이 웹브라우저 스타일 시트에 지정되어 있다는 이야기다. *{margin:0;padding:0}는 이 모든 값을 초기화한다. 그런데 문제가 생긴다. 기본적으로 margin과 padding이 필요한 요소가 있어서다.
예를 들어 ul이나 ol이라는 요소를 보자. ul은 Unordered List, 즉, 순서가 정해지지 않은 목록이고 ol은 Ordered List, 즉, 순서가 지정된 목록이다. ul이나 ol 요소를 사용해봤다면 알겠지만, 세로로 나열된 목록 앞에 특정 기호나 숫자가 붙는다. 그런데 padding 값을 0으로 지정하면 이 기호와 글 내용이 겹쳐서 알아보기 어렵게 된다. ul이나 ol은 padding-left: 20px 등 왼쪽 내부 여백을 지정해야 제대로 표시된다. 비슷한 예로 h1, h2, h3 등 제목을 나타내는 요소나 문단을 나타내는 p 요소를 보자. 보통 글에서 제목을 쓸 때 본문과 줄을 구분해서 쓴다. 이는 h1, h2, h3 등 제목 요소에 margin 값이 지정되어 있다는 의미다. 문단을 나타내는 p 요소 역시 마찬가지다. 비록 실제 책에서 문단을 구분할 때는 margin 값이 지정되어 있지 않지만, 온라인에서 글을 쓸 땐 margin을 지정해서 앞 문단과 뒷 문단이 떨어져 있어야 글을 읽기가 편하다. 이런 이유로 제목 요소와 문단 요소에도 margin 값을 지정해주는 것이 좋다.
정리해보면 다음과 같다. CSS 맨 앞에 *{margin:0;padding:0}를 지정하면 해당 스타일 시트를 사용하는 페이지의 모든 요소의 내부, 외부 여백이 0이 된다. 그러나 몇몇 요소는 그 성격때문에 문제가 생길 수 있다. 그래서 특정 요소는 margin과 padding을 직접 입력해줘야 한다. 이 귀찮은 작업을 거치면 블로그에서 사용한 모든 요소의 padding과 margin 값이 사용자 웹브라우저의 User Agent 스타일이 아닌 블로그 스타일 시트에 지정한 값으로 통일되므로 사용자의 웹브라우저 종류와 상관없이 글쓴이가 의도한 것과 최대한 비슷한 결과를 출력한다. 그러나 요즘 나오는 웹브라우저의 User Agent 스타일 시트는 거의 비슷하므로 지정하지 않아도 별문제는 없다.