CSS 강좌 / 안쪽 여백(padding)과 바깥 여백(margin)
여백에는 안쪽 여백과 바깥 여백이 있습니다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정합니다.
여백을 정하면 요소의 크기가 바뀔 수 있습니다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정합니다.
속성값 부여하기
속성값 4개
padding과 margin 속성에 값을 부여하는 방법은 다음과 같습니다.
padding: xx yy zz ww; margin: xx yy zz ww;
xx는 위, yy는 오른쪽, zz는 아래, ww는 왼쪽 여백입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
border: 1px solid #333333;
}
div.ma {
margin: 10px 20px 30px 40px;
}
div.pa {
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
</div>
<div class="ma">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
</div>
<div class="pa">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
</div>
</body>
</html>
속성값 1개
속성값의 개수는 줄일 수 있습니다. 속성값을 하나만 쓰면 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용합니다. 즉, 다음의 두 줄은 같은 의미입니다.
padding: xx; margin: xx; padding: xx xx xx xx; margin: xx xx xx xx;
속성값 2개
속성값을 두 개 쓰면 첫 번째 값은 위와 아래, 두 번째 값은 오른쪽과 왼쪽 여백을 의미합니다. 즉, 다음의 두 줄은 같은 의미입니다.
padding: xx yy; margin: xx yy; padding: xx yy xx yy; margin: xx yy xx yy;
속성값 3개
속성값을 세 개 쓰면 두 번째 값을 오른쪽과 왼쪽 여백으로 사용합니다. 즉, 다음의 두 줄은 같은 의미입니다.
padding: xx yy zz; margin: xx yy zz; padding: xx yy zz yy; margin: xx yy zz yy;
위, 오른쪽, 아래, 왼쪽 중 하나에만 값을 부여하고 싶다면 다음과 같이 방향이 붙은 속성을 사용합니다.
padding-top: xx; padding-right: xx; padding-bottom: xx; padding-left: xx; margin-top: xx; margin-right: xx; margin-bottom: xx; margin-left: xx;
바깥 여백(Margin)의 특징
margin은 padding과 달리 아래와 특징이 있습니다.
음수 가능
속성값으로 음수를 사용할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
border: 1px solid #333333;
}
div.ma {
margin: -15px 20px 0px 20px;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
</div>
<div class="ma">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
</div>
</body>
</html>
가운데 정렬
속성값으로 auto를 사용할 수 있습니다. auto를 사용하면 HTML 요소를 가운데로 정렬할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div.ma {
width: 300px;
border: 1px solid #333333;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="ma">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
박스 그림자의 위치·흐림·확산·겹침 순서를 조정합니다. 한 값씩 바꾸는 실습으로 그림자가 레이아웃 크기와 상위 잘림에 미치는 관계를 확인합니다.
텍스트 그림자의 위치·흐림·레이어 순서를 조정합니다. 박스 그림자와의 차이, 잘림 및 실제 글자 대비를 함께 점검합니다.
글꼴 후보 순서와 문자별 대체 선택을 이해하고 실제 렌더링 글꼴을 확인합니다. 일반 계열의 표기와 웹 폰트 제공·로딩 조건을 설명합니다.
CSS / Reference / border-style
테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
CSS / Reference / border-spacing
표 셀의 가로·세로 간격을 지정하고 padding과 구분합니다. separate·collapse 및 간격 0의 차이를 같은 표에서 비교합니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS 강좌 / 기본 선택자 - 요소, 클래스, ID, 속성
요소·클래스·ID·속성 선택자를 같은 HTML에 적용해 대상과 결과를 비교합니다. 복합 클래스, 공백으로 구분한 속성값, 필수 입력칸을 포함한 전체 예제와 선택자 수정 실습을 제공합니다.
CSS / Reference / background-position
배경 위치의 백분율이 영역과 이미지 크기의 차이에 적용되는 이유를 설명합니다. 동일 영역에서 0·50·100%를 비교하고 위치와 잘림을 조정합니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.