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의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS 강좌 / 안쪽 여백(padding)과 바깥 여백(margin)
여백에는 안쪽 여백과 바깥 여백이 있습니다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정합니다. 여백을 정하면 요소의 크기가 바뀔 수 있습니다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정합니다.
CSS 강좌 / 브라우저 개발자 도구로 CSS 확인하고 수정하기
브라우저 개발자 도구에서 안내 문단을 선택하고, Styles의 선언과 Computed의 최종 값을 확인합니다. 색상 변경·선언 끄기·원본 저장 실습과 적용되지 않는 CSS의 원인별 점검 방법을 제공합니다.
CSS 강좌 / 글꼴, 글자 크기, 굵기, 줄 간격 설정하기
글꼴·글자 크기·굵기·줄 간격을 설정하고 실제 사용된 글꼴을 확인하는 방법을 설명합니다. 단위 없는 line-height와 em 값의 상속 차이를 실행 가능한 예제로 비교합니다.
CSS / Reference / background-repeat
repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.
CSS 강좌 / 관계 선택자와 가상 클래스로 요소 고르기
자손·자식·인접 형제·일반 형제 선택자를 같은 문서 구조에서 비교합니다. hover·focus-visible·first-child·nth-child를 포함한 전체 예제와 구조를 바꿔 선택 결과를 확인하는 실습을 제공합니다.
문단 안의 인라인 내용을 정렬하고 블록 자체의 배치와 구분합니다. start·end의 쓰기 방향과 양끝·마지막 줄 정렬을 비교합니다.
CSS 강좌 / 기본 선택자 - 요소, 클래스, ID, 속성
요소·클래스·ID·속성 선택자를 같은 HTML에 적용해 대상과 결과를 비교합니다. 복합 클래스, 공백으로 구분한 속성값, 필수 입력칸을 포함한 전체 예제와 선택자 수정 실습을 제공합니다.
CSS 강좌 / 미디어 쿼리와 콘텐츠 기준 분기점 만들기
카드의 최소 폭과 여백을 기준으로 미디어 쿼리 분기점을 정합니다. 1·2·3열 전체 예제와 경계값 비교로 조건이 적용되는 과정을 확인합니다.
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.