[CSS] 부스트코스 edwith - 웹 UI 개발 | CSS의 단위와 font, line-height에 대하여

CSS 단위에는 절대 길이와 상대 길이가 있다. 

먼저, 절대 길이

• px  화면에서 고정된 크기 값
• pt  표준 인쇄 단위

window에서 9pt = 12px, mac에서 9pt = 9pt이다. 

실무에서는 디자이너들이 가끔 pt로 psd를 보내주는 경우가 가끔 있을 수 있는데, 

편의상 같은 값으로 계산하여 작업한다고 한다. 

 

그다음, 상대 길이

• %
• em  선언한 해당 폰트의 대문자 M의 너비를 기준으로, 상대적인 단위이다. 

---

em과 rem의 차이

em은 부모 요소의 영향을 받고, rem은 html의 영향을 받는다. 

 

See the Pen QWKzaPW by leecorin (@leecorin) on CodePen.

 

.wrap의 font-size: 24px이고 .section의 font-size: 36px인 것을 알 수 있다. 

그렇다면 .content의 font-size가 1.3rem이라면? html의 영향을 받기 때문에 16px * 1.3 = 20.8px이 된다. 

---

font-family 속성

font-family: family-name, generic-family;

family-name은 지정한 폰트이름이고, generic-family는 앞의 지정된 폰트가 사용자의 PC에 없을 경우를 대비하여 나올 그 다음의 폰트를 가리킨다. 셰리프체가 아니라면 sans-serif를 꼭 붙여준다. 

---

line-height 속성

• 행간 조정 / 줄 높이
• 폰트의 상하단 여백 포함
• line-height: number -> 부모 요소의 숫자값 그대로 상속, 자식요소는 본인의 font-size를 기준으로 계산된 값을 가짐
• line-height: % -> 부모 요소에서 %값이 그대로 상속되지 않고, %에 의해 이미 계산된 px값이 상속됨

body {
  font-size: 20px;
  line-height: 2;
}

p {
  font-size: 10px;
}

부모요소 body의 line-height는 40px, 자식요소 p의 line-height는 부모요소의 숫자값을 그대로 상속 받아서 20px이 된다.

 

body {
  font-size: 20px;
  line-height: 200%;
}

p {
  font-size: 10px;
}

부모요소 body의 line-height는 40px, 자식요소 p의 line-height는 200%를 상속받는 것이 아닌, 계산이 된 40px을 상속받는다. 

*이처럼 숫자값을 사용하면 부모 요소에서 계산된 값이 아닌, 비율을 그대로 상속받기 때문에 되도록 단위없는 값을 사용하라는 Tip!

 

line-height가 생각보다 어려운 부분이라는 것을 알게됐다😭

 

 

 

https://www.boostcourse.org/web344/lecture/45066

웹 UI 개발