티스토리 뷰
발생일: 2015.01.16
키워드: line-height
내용:
먼저, `line-height`를 제대로 이해하기 위해서는, 몇 가지 용어를 확실히 이해하고 가는 것이 좋다.
아래와 같은 태그가 있고,
아래와 같이 렌더링 되었다면.
Containing Box (컨테이닝 박스)
다른 여러 박스를 감싸고 있는 박스이다.
Inline boxes (인라인 박스)
문단 안에 인라인 박스로 나뉘어져 있다. (인라인 엘리먼트나 텍스트 노드)
Line boxes (라인 박스)
인라인 박스들은 컨테이닝 박스 안에 나란히 놓여져 있는데, 이런 인라인 박스를 감싸는 박스를 라인 박스라 한다.
Content area (컨텐트 영역)
컨텐트 영역은 텍스트를 감싸고 있는 영역이다.
이 높이는 폰트 크기(`font-size` 속성)에 의해 결정된다.
텍스트를 드래그해서 선택해서 하이라이트 되거나, 인라인 엘리먼트의 텍스트에 `background-color`를 설정했을 때 컬러가 바뀌는 부분이 컨텐트 영역이라 보면 된다.
Leading (행간)
CSS의 행간은 `font-size`와 `line-height`의 차이에 의해 결정된다.
`line-height`와 `font-size`의 차이의 반만큼이 컨텐트 영역의 위/아래로 설정되면서 행간이 만들어진다.
인라인 박스의 높이는 이렇게 컨텐트 영역과 상/하 행간이 적용되어 결정된다.
만약, `line-height`가 `font-size`보다 작은 경우엔, 컨텐트 영역이 인라인 박스를 삐져나오게 되고,
상/하 행간은 인라인 박스의 반으로 적용된다.
그 외에, 이미지가 추가되거나, button, input 등 브라우저에서 덮어쓴 인라인 엘리먼트가 추가되는 경우,
인라인 박스의 크기는 가장 큰 엘리먼트의 박스에 맞게 늘어난다.
기본 속성
블럭 엘리먼트에서, `line-height`는 텍스트를 싸고 있는 라인의 기본 높이를 설정한다.
이 값에 의해 "라인 박스"의 높이가 늘어나거나 줄어든다.
기본 인라인 엘리먼트에서도 "라인 박스"의 높이를 지정한다.
단, 버튼이나 인풋처럼, 브라우저에서 대체 구현한 엘리먼트인 경우, `line-height`가 변경되기도 한다.
기본 속성은 상속된다.
`line-height`에는 normal, inherit, 숫자나 퍼센트 속성을 할당할 수 있다.
normal
기본값이며, 브라우저의 기본 속성을 따른다.
폰트(`font-family` 속성)에 따라 다르지만 보통 1.2 정도로 할당되어 있다.
숫자
폰트 사이즈를 기준으로 설정한 숫자만큼 배율로 적용한다.
대부분의 경우, 숫자를 사용하는 것이 가장 문제 없이 동작하고, 또 가장 선호되기도 한다.
퍼센트
`computed` 폰트 사이즈를 기준으로 설정한 퍼센트만큼 배율로 적용한다.
퍼센트와 아래 나올 `em`의 경우, 자식 엘리먼트에서 계산된 값을 상속받게 되어 의도하지 않게 동작할 수 있다.
가능하면 퍼센트 대신 숫자를 쓰는 것을 추천한다.
길이 (px, pt, em …)
직접 수치를 할당할 수 있다.
단위가 없는 숫자를 사용하는 것이 좋다.
단위가 포함된 값을 사용하면 자식 엘리먼트가 계산된 값(computed value)를 상속받는다.
예를 들어, 부모 엘리먼트에서 아래와 같이 정의했다면,
font-size: 20px;
line-height: 150%;
자식 엘리먼트는 `20 * 150%`인 `30px`을 상속받는다.
자식 엘리먼트가 폰트 사이즈를 재정의했더라도 자신의 사이즈에 관계 없이 부모 엘리먼트 폰트의 비율로 계산된 값을 상속받게 된다.
반면, 아래와 같이 숫자를 사용했다면,
font-size: 20px;
line-height: 1.5;
자식 엘리먼트는 자신의 폰트 사이즈에 1.5 배인 값으로 `line-height`를 설정한다.
이와 같이, 단위가 없는 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로,
가능하면 단위가 없는 값을 사용하는 것이 좋다.
그럼 몇으로?
경험 상, 헤딩 엘리먼트의 경우는 1.2 정도로,
일만 인라인 엘리먼트의 경우는 1.5 로 설정하는 것이 가독성에 좋다고 한다.
참고:
강추!! `line-height`에 대해 정말 자세하게 설명되어 있는 슬라이드
반응형
댓글
공지사항