CSS) 속성값(property value) 단위

🎨 CSS(Cascading Style Sheets)
   ▶▶▶ property value units

 

✅ 크기 단위(px / % / em / rm)

✅ 색상 표현 단위

---

 

1. CSS의 크기 단위

1.1 px

• 픽셀(화소) 단위(1px = 화소 1개)
• 디바이스 해상도에 따라 상대적인 크기
  
  

  1

  p {font-size: 12px};

  cs

1.2 %

•  퍼센트
•  요소에 지정된 사이즈의 상대적 사이즈
  
  

  p {font-size: 12px};
  div {font-size: 130%};
  /* 12px * 1.3 = 15.6px*/

 

1.3 em

• 배수 단위
• 요소에 지정된 사이즈의 상대적 사이즈
• ex) 폰트 사이즈가 10px인 페이지 ➡ 1.3em = 13px
  
  

  p {font-size: 10px};
  div {font-size: 1.3em};
  /*10px * 1.3 = 13px*/

  
  
  

1.4 rem

• 최상위 요소(html)의 사이즈를 기준
• 콘텐츠의 크기에 따라 가변적으로 대응해야하는 wrapper 요소(container)에 적합
  
  

  html {font-size: 10px}; /*font-size 미지정 시 16px*/
  div {font-size: 1.3rem};
  /*10px * 1.3 = 13px*/

 

 

2. 색상 표현 단위

• RGB(Red, Green, Blue) - ex) rgb(255, 255, 0)
  

  p {background-color: rgb(255, 255, 0);}

  
  
  
• RGVA(Red, Green, Blue, Alpha/투명도) - ex) rgba(255, 255, 0, 1)
  

  p {background-color: rgba(255, 255, 0, 1);}

  
  
  
• HEX 코드 단위 - ex) #FFFF00
  

  1

  p {background-color: #FFFF00;}

  cs

   

• Color Keword - ex) yellow

  1

  p {background-color: yellow;}

  
  ✨ 키워드 참고: https://htmlcolorcodes.com/color-names/