[CSS] 웹사이트용 기본 CSS속성 - margin, padding(feat. 티스토리)

웹페이지는 사용자에게 보여지는 화면부분(html)과 뒤에서 작동을 지원하는 부분(js, css 등)으로 구성된다고 할 수 있습니다.

html은 웹페이지의 구조, 입력창(input, table) 등의 구성을 합니다.

설명하고자 하는 CSS는 위치, 간격, 크기, 색 등 화면을 꾸미는 역할을 하는데 비 전문가를 위해 간단하게 주요 항목만 설명하려고 합니다.

 

 

< 기본 CSS속성 - margin, padding >

 

목차(Contents)

 

화면 배치 시 콘텐츠간의 간격을 적당하게 조정해야 사용자가 피로감을 덜 느끼고 보기에 편리하죠.

그래서 이번엔 여백 조정을 할 수 있는 margin, paddding, line-height입니다.

 

margin과 padding는 둘 다 콘텐츠의 여백을 지정하는 속성입니다.

여기서 둘의 차이가 있는데.. margin은 콘텐츠의 바깥쪽 여백, padding은 안쪽 여백을 관리합니다.

아래의 이미지를 참조하시면 이해하기에 좀 더 편할 것 같네요.

< margin, padding 사용 영역 >

 

margin

margin이나 padding의 사용법은 동일합니다.

다만, margin은 음수(-)와 auto 사용이 가능한 것만 다릅니다.

 

사용예시)

margin: 10px;					// 전체지정(위, 아래, 왼쪽, 오른쪽)
margin: 10px 10px 5px 5px;		// 위, 오른쪽, 아래, 왼쪽 순서
margin: 10px 20px;				// 첫번째(위&아래), 두번째(왼쪽&오른쪽)
margin-top: 10px;				// 위쪽만
margin-bottom: 10px;			// 아래쪽만
margin-left: 10px;				// 왼쪽만
margin-right: 10px;				// 오른쪽만

 

 

padding

padding도 위의 margin과 사용법이 동일합니다.

 

사용예시)

padding: 10px;					// 전체지정(위, 아래, 왼쪽, 오른쪽)
padding: 10px 10px 5px 5px;		// 위, 오른쪽, 아래, 왼쪽 순서
padding: 10px 20px;				// 첫번째(위&아래), 두번째(왼쪽&오른쪽)
padding-top: 10px;				// 위쪽만
padding-bottom: 10px;			// 아래쪽만
padding-left: 10px;				// 왼쪽만
padding-right: 10px;			// 오른쪽만

 

 

line-height

line-height는 margin, padding과 달리 콘텐츠간의 간격이 아닌 텍스트의 줄간격을 조절합니다.

 

사용예시)

line-height: normal;
line-height: 1.5;
line-height: 180%;
line-height: 20px;
line-height: 2em;

 

line-height가 normal 일때의 예시화면입니다.

< line-height:normal >

 

line-height가 150% 일때의 예시화면입니다.

< line-height: 150% >