웹프로그래밍 css (8) 속성- 단위

🔥오늘의 배운 점🔥

CSS속성과 값을 사용할 때 사용되는 단위의 특징을 알고 활용하자.

📕 길이 단위

📖 절대 길이

📒 px ( 1px = 1/96th of 1 inch )

• 웹개발을 할 때 여러 환경에서도 디자인을 동일하게 사용되고 호환성이 높다.
• 디자인 의도가 높을 때 사용 추천👏

📒 pt ( 1pt - 1/72 of 1 inch )

• 웹에 인쇄용 문서 스타일을 지정할 때 유용하다.
• 사용하는 기기에 따라 달라짐 따라서 권장하는 가이드가 아니다.

window 9 pt = 12 px
mac 9px = 9pt

📖 상대 길이 단위

📒 %

• 상위요소에 정의된 픽셀을 기준으로 퍼센트를 지정한다.
  ex) 상위요소 픽셀크기: 16px 일 때 100%-> 16 px

📒 em

• 선언한 해당 폰트의 대문자 M의 너비를 기준으로 하는 상대적인 단위이다.
  ex) 2em : 현재 기준의 두 배
  (em 변환 사이트 있음)

📒 rem

• 루트요소의 글꼴크기를 기준으로 한다.

📒 vw

• viewport 너비의 1%.

📒 vh

• viewport 높이의 1%.

📒 vmin

• viewport 의 작은 치수의 1%.

📒 vmax

• viewport 의 큰 치수의 1%.

📕 viewport란

• 사용자가 보는 영역을 말한다. 사용자가 브라우저의 크기를 줄일때마다 달라진다.
  웹브라우저 용어로 UI,메뉴바를 제외한다.
• 반응형 웹에서 사용할 수 있음.
  더 알아보기

🔥오늘의 느낀 점🔥

오늘은 특별히 궁금햇던 점을 추가했다. 한번 더 정리하고 나니까 기억에 잘 남을 것 같아서 앞으로도 쓰려고 한다.
사실 앞에 부분 오답풀이를 못한 채 남은 강의를 듣고 있어서 얼른 집에가서 해야겠다.

🔥 오늘의 궁금했던 점🔥

❓상위요소와 부모요소는 동일한 개념일까?

• 👉 상위요소는 조상요소를 말한다!!