|
스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 |
|
환경: Eclipse Mars, CSS5 |
HTML 디자인을 적용할 때 여백은 종류와 사용법을 제대로 이해하고 있어야 합니다. 그래야 제대로 된 디자인을 할 수 있습니다. 모두 padding, margin, border 속성으로 나눌 수 있습니다. border 는 태그 영역의 테두리를 말합니다. 이 테두리를 기준으로 바깥쪽의 여백이 margin 이며, 안쪽이 border 입니다. margin 은 요소들 간의 거리를 둘 때 사용하며, border 는 태그 내부에 들어가 있는 텍스트나 요소들의 가독성을 높이기 위해 적용합니다.
▼ margin 은 바깥쪽 여백이며, padding 은 안쪽 여백을 나타냅니다. 값은 width, height 속성과 같이 숫자 뒤에 px , %, pt, cm 단위로 적용할 수 있습니다. 아래 그림을 참고하시면 좀더 쉽게 이해가 가실 겁니다. 참고로 태그의 순수 길이인 width 나 height 는 요소의 전체 길이에서 margin, border, padding 뺀 것입니다.
▼ 아래 샘플 소스에서 두 개의 div 는 padding 속성을 적용한 것과 하지 않은 것의 나누어서 구현했습니다. 두 번째 div 에 적용한 padding : 10px 은 4개의 방향에 모두 동일한 크기를 적용합니다. padding 을 적용하지 않은 것 보다 가독성을 높일 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
margin: 0;
}
#box1 {
width: 200px;
height: 60px;
margin: 10px;
padding: 0px;
border: 2px solid;
background-color: yellow
}
#box2 {
width: 200px;
height: 60px;
margin: 10px;
padding: 10px;
border: 2px solid;
background-color: yellow
}
</style>
</head>
<body>
<div id="box1">padding 0 적용</div>
<div id="box2">padding 10px 적용</div>
</body>
</html>
▼ 다음은 한번에 4 방향 모두 동일하게 적용하는 것이 아니라 각각 별도로 적용하는 방법은 없을까? padding 에서 padding: 0px 10px 20px 50px; 값의 순서는 padding-top, padding-right, padding-bottom, padding-left 입니다. 그러니까 상단에서 시계 방향으로 돌아가는 것입니다. padding: 0px 10px 20px 50px; 은 아래와 같이 다시 표현할 수 있습니다. 이제 다음에 padding 값으로 줄여서 표현된 것도 이해되시겠죠.
¤ padding-top : 0px;
¤ padding-right : 10px;
¤ padding-bottom : 20px;
¤ padding-left : 50px;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
margin: 0;
}
#box1 {
width: 200px;
margin: 10px;
padding: 0px 10px 20px 50px;
border: 2px solid;
background-color: yellow
}
</style>
</head>
<body>
<div id="box1">#box1 padding 0 적용한 상태,
군대 시절 어느 말년 병장이 아침마다 눈뜨면 졸병에게
물어보곤 했다. "내 제대까지 며칠 남았지?" 졸병이 큰
소리로 대답했다.
</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
|---|---|
| 스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
| 스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
