CSS- declarations, text

📌 vmin/ vmax(모바일 주로 사용)

vmin: 가로세로중 작은 곳 기준의 1/100

vmax: 가로세로중 긴 곳 기준의 1/100

출처: https://webclub.tistory.com/356

📌 vw/ vh (뷰포트의 너비/ 높이값 기준)

1vh: 높이의 1/100 => 높이 900px의 100vh => 900px(높이 꽉 참)

1vW: 너비의 1/100 => 너비 500px의 100vW => 500px(너비 꽉 참)

📌background

1) <img> 태그 사용 이유

- 백엔드와 협업을 위해 img 태그를 사용하여 이미지 주소 작성

- img 태그에 기본(basic) 이미지 넣어두면, 백엔드 개발자가 업데이틀르 하면서
필요한 사진을 넣음

2) background-image: url() 사용 이유

- 변동 없는 이미지일 경우(업댓 필요X)

3) background-size: cover

- 자동으로 비율에 맞춰 화면에 보여짐

4) background-position

✔ bacground-position:center는 center center의 축약

출처: https://aboooks.tistory.com/162

📌 line-height

글자의 높이를 지정

1) 단위

✔ 꼭 상수를 사용하자

- px, em 등 크기가 정해진 단위는 사용 완전 지양
- 텍스트 사이즈 변경(더 커질 때)이 되면 좁은 간격때문에 글씨가 겹치는 일이 발생
(🔥상사를 면치 못한다.)

✔ line-height: normal

- 폰트가 갖고 있는 기본 설정

✔ line-height: number (폰트 크기 * number)

- line-height:1
- font size*1의 줄간격을 갖게됨
- leading 부분을 완전히 없애 준다
- 폰트마다 디자인이 달라서, line-height:1을 지정해도 leading을 넘칠 수 있다.

🌼 참고) https://m.blog.naver.com/weekamp/222040583269##

2) leading이란?

- 폰트 자체가 갖고 있는 상하 간격으로, 가독성을 위해 기본값으로 존재
- margin과 padding과 완전하게 다른 개념

📌 letter-spacing

- 글자 간격 조정
- px, em, normal(기본값)

📌 vertical-align

- <img> 태그처럼 inline 요소의 위치를 부모 요소 내에서 조정해줄 때 사용
- img 태그의 바깥쪽 공백을 없애기 위하여 자주 사용

- vertical-align: top 또는 bottom;