line-height에 대해서
line-height는 행과 행의 간격을 제어할수있다
line-height는 font-size와 관계가 있다
예를 들어 font-size 50px을 주고 line-height를 70px을 줄 경우
font-size를 50px의 높이를 가지면서 위 아래 10px씩 총 70px을 가지게 된다
(개발자 모드에서 파란부분 , 그리고 상기 이미지 참조)
line-height:1을 주면 font-size 만큼의 line-height를 가진다
위의 2의 예제라면 font-size:50px에 따라서 line-height가 50px이 되며 행간이 없어진다
그러나 폰트사이즈는 화면에 따라서 다르기때문에 line-height에 px을 주는것은 좋지않다
아래와 같이 px이 아닌 line-height 적용 법이 있다
body { font-size: 20px; line-height: 2; } /* line-height = 40px; */ body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */계산법
body { font-size: 16px line-height:1.5 } /* 계산법 (font-size:16px * line-height:1.5) = 24px */적절한 line-height는?
웹 접근성 가이드(WCAG) 에 의하면 1.5배 이상 되어야한다고 정의됨. 그러므로 line-height:1.5가 적절함
vertical-align에 대해서
텍스트를 수직 정렬할수있다 (수직: 세로)
inline요소에서만 사용가능하다 (div,p에는 사용 불가)
부모 요소를 기준으로 텍스트의 수직위치를 정의한다
baseline은 소문자 x를 기준으로 하단 라인을 의미합니다. 부모요소의 기준 선에 맞춤.
sub 부모 아래 첨자 기준으로 정렬
super : 부모 위 첨자 기준으로 정렬
text-top : 요소의 맨 위를 부모 font의 맨 위(Ascender 제외)에 맞춤.
text-bottom : 요소의 맨 아래를 부모 font의 맨 아래(Descender 제외)에 맞춤.
middle : 부모의 중앙에 위치. 소문자x를 기준으로 중앙에 정렬.
top : 요소의 맨위를 줄에서 가장 큰 요소의 맨 위 위치에 맞춤.
bottom : 요소의 맨 아래를 줄에서 가장 낮은 요소에 맞춤.
참조
Dec 7, 2023
Views 119