[CSS] 기본 단위

캐스케이딩 스타일 시트

• 우선순위에 따라 적용할 스타일 순서를 결정한다는 뜻
• 우선순위
  • 위에서 아래로
  • 맨 마지막, 나중에 적용된 스타일이 더 우선순위를 가짐.
  • 사용자스타일(시스템에서 만든 스타일) → 제작자 스타일(제작자가 만듬) → 브라우저 스타일(브라우저의 기본 스타일)
  • !important(스타일 뒤에 붙여주면 됨) → 인라인스타일(body태그) → id스타일 → 클래스 스타일 → 타입 스타일
• 스타일 상속
  • 자식요소에 별도 스타일이 없음 → 부모요소 스타일이 자식 요소로 전달됨
  • 모든 속성이 다 상속되는 건 아님

 

 

css 기본단위

• 크기
  • 픽셀 기본단위 16px
  • 백분율 단위 100%
  • 배수 단위 1.2em (1.2배) // 1.2rem (최상위 요소를 기준으로 1.2배)
    • 디바이스 마다 보이는 html 영역에서 1.2배라고함
• px 보다 rem 단위를 쓰는 이유
  • 반응형 페이지에 유리
  • px은 다른 박스가 커져도 크기를 유지하지만 rem은 상대적인 크기에 비하여 변화가 일어남
    • em은 모든 부모요소들에게 받은 모든 값을 합산해서 추출
    • rem 은 html 전체 크기에만 연관해서 변화가 일어남

 

viewport 단위

• 웹브라우저 화면 크기에 동적으로 대응하는 %단위
  • vw : 뷰포트 너비의 1/100
  • vh : 뷰포트 높이의 1/100
  • vmin : 뷰포트 너비 또는 높이 중 작은쪽의 1/100
  • vmax : 뷰포트 너비 또는 높이 중 큰쪽의 1/100

색상코드 단위

• #000000
• rgb(255,255,0)
• rgba(255,255,0,1)  //마지막은 투명도
• hsl(0,100%,25%)  //색상,채도,명도
• hsla(60,100%,50%,1)  //마지막은 투명도