[css] 줄간격(행간) 조정 방법

html 문서를 작성하다보면 줄간격을 조정해야할 때가 발생한다.

 

html 에서 행간을 조정하는 방법은 CSS line-height로 설정할 수 있다.

 

줄 간격이 너무 좁을 때, 가독성이 떨어지기 때문에 line-height 속성을 이용해서 줄 간격(행간)을 변경할 수 있다.

 

행간을 조정하는 속성

 

line-height: 행간값

 

 

페이지 전체의 행간을 변경

body{line-height: 행간값}

 

 

단락<p></p>의 행간을 변경

p{line-height: 행간값}

 

 

클래스의 행간을 변경

.className{line-height: 행간값}

 

 

행간 값 단위의 종류

 

%: 브라우저 문자 기준 크기에 대한 % 값

body{line-height: 150%}

 

em: 브라우저 문자 기준을 1em으로 했을 때의 값

p{line-height: 0.5em}

 

 

px: px 값을 입력해서 행간 조절

.className{line-height: 5px}

 

 

#menu 라는 아이디 값의 css 속성을 지정한 예시 코딩

#menu {
width: 200px;
height: 1000px;
float: left;
text-align: center;
padding-top: 50px;
text-decoration: none;
line-height: 200%;
}

위와같이 css속성에 line-height 값을 지정하여 행간을 조정할 수 있다.