css 단위, px, pt, em, % / Color 속성, 투명도 설정

절대 길이

절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다.

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

절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다.
여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서,
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다.

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

컴퓨터가 없던 시절부터 있던 단위입니다. 
인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 
웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다.
그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아닙니다.
예를 들면 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px 로 보이게 됩니다.

 

가끔 디자이너가 px가 아닌 pt로 가이드를 전달해주면 편의상 같은 픽셀로 개발한다. 

 

 

---

상대 길이

상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다.

• %

        부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.

 

ex) 폰트 사이즈가 100%이고 상위요소가 16px일 때 폰트 크기는 16px가 된다. 

 

 

• em

        선언한 해당 폰트의 대문자 M의 font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.

1em = 16px

 

ex) 20px을 em으로 나타내고 싶다면 20px을 16px로 나누면 된다. 즉, 1.25em

 

 

• rem

        root의 font-size를 기준으로 값을 환산합니다.

• vw

        viewport의 width값을 기준으로 1%의 값으로 계산됩니다.

 

 

---

Color 속성 

폰트의 색상 값을 적용할 때 사용하는 속성입니다. 

h1  {  color: 색상 값;}

 

색상 값 지정 방식

• 컬러 키워드 
  
  CSS 자체에서 사용 가능한 문자 식별자입니다.
  red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있습니다.
  * 참고 : transparent는 투명을 나타내는 키워드 *
  
  
• 16 진법    ex.  #RRGGBB
  
  6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타냅니다.
  첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미합니다.
  각 자리의 알파벳은 대소문자를 구분하지 않는다. 

0에 가까워질수록 검정색을 나타내고 #000000

f에 가까워질수록 하얀색을 나타낸다  #ffffff

 

• 16 진법   ex.  #RGB
  
  6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있습니다.
  예를 들어, #aa11cc 는 #a1c로 축약하여 사용할 수 있습니다.
  
  
• RGB( )
  
  RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의합니다.
  각 자리마다 0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타낸다.

rgb(0,0,0)은 검정, 0에 가까울수록 검정, rgb(255,255,255)는 흰색

 

• RGBA( )
  
  RGBA 값은 기존 RGB에서 A값이 추가된 형태입니다. (값의 투명도를 설정할 수 있다.)
  rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의합니다.
  A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기합니다. (0.5는 반투명!)
  0 → 1은 투명 → 불투명으로 값의 변화를 나타낸다.
  예를 들어, rgba( 0, 0, 0, 0)는 투명한 색상을 가지게 됩니다.

 

• HSL
• HWB