[CSS] 크기 단위 , 색상 단위

 

 

 ◎ 크기 단위

 

1. px ( 픽셀 )

 

 - 가장 많이 사용하는 단위입니다. 모니터 해상도의 한 화소인 픽셀을 기준으로 합니다. 픽셀의 크기는 변하지 않기 때문에 고정적인 단위입니다.

 

 

 2. % ( 퍼센트 )

 

 - 퍼센트는 비율을 나타내는 단위이고 비율을 나타내기 때문에 상대적인 단위입니다. 가변적이다 보니 가변적인 레이아웃에 주로 사용되는 단위입니다.

 

 ex) 상위 요소의 넓이가 200px 이고 하위 요소의 넓이가 60%라면 실제로 120px로 화면에 보여지게 되는것입니다.

 

 

 3. em

 

 - px , %는 어느정도 알지만 em은 생소한 단어입니다. em은 %와 마찬가지로 상대적인 단위입니다.

   하지만 %와는 다른부분이 있기때문에 em이 있겠죠??  em은 글자 크기를 기준으로 합니다

   em은 동적인 페이지나, 글자 크기에 따라 다른 크기를 줘야 하는 경우 많이 사용합니다.

 

 ex) 글자 크기 20px이라고 가정하였을때 요소의 넓이를 2em을 주게되면 40px이 됩니다.

 

 

 

 ◎ 색상 단위

 

1. 색상의 이름

 

 - 'white', 'green', 'black'등 다음과 같이 색상의 이름을 적어주는 방식입니다.  약 140개정도의 색상 이름이 존재합니다. 하지만 색상 이름을 다외울 수는 없습니다. 또 한계가 있기때문에 실제로는 자주 사용하지 않고 급하게 테스트하거나 디자인이 필요없을경우 쓰인다.

 

 2. RGB

 

 - 다양한 색상을 표기할수 있는 RGB가 있습니다 Red, Green, Blue를 나타내며  rgb(255,255,255) 다음과 같이 작성합니다

 r,g,b,에 해당하는 숫자에 따라 색상이 바뀌고 r, g , b 의 색상의 숫자가 높아질수록 밝아지고 낮을수록 어두워 집니다.

 

 

 3. Hex

 

 - Hex방식은 16진수로 색상을 표현한 방식입니다. < #ffffff > 다음과 같이 작성합니다.

 Hex방식은 기존의 10진수인 RGB 방식을 16진수로 나타낸것으로 보면됩니다. Hex방식은 rgb방식보다 글자 수를 줄여서 사용할 수 있어서 보다 많이 사용됩니다.