CSS 단위와 색상

단위

엘리먼트의 너비나 높이, 글자 크기, 패딩, 마진, 보더 등등 지정하기 위해서는 수치를 입력해야 된다.

절대단위

고정된 크기, 장치에 따라 크기를 조절할 수 없음. ex) px, pt, cm

1. px (pixel)

   대체로 제일 많이 사용하는 단위.
   고정된 크기 단위 (주로 모니터의 해상의 한 화소인 '픽셀' 기준. ) 1px는 점 한개와 같음 크기가 조정이 안된다는점을 가지고 있음.

2. pt (point)

   고정된 크기 단위 ( 주로 인쇄매채에서 사용된다. ) 크기 조정이 안됌

상대단위

상대적인 크기, 장치에 따라 크기 조절이 가능함. ex) em, %,smaller,larger

1. % (percent)

   퍼센트는 비율을 나타내는 단위이기 때문에 상대적인 단위이다. 부모가 기준이 되고 부모가 '100px'이라고 가정하고 자식에게 80%를 하면 '80px' 이다.
   em과 비슷하게 다른 장치에 상대적으로 크기 조절이 가능함.

2. em

   em은 %와 같은 상대적인 단위이다. em은 글자 크기를 기준으로 한다.
   HTML의 기본 font-size가 16px이니 2em은 32px이다. em은 동적인 페이지나 글자 크기에 따라 다른 크기를 줘야 하는 경우 등에 많이 사용된다.
   웹 문서에서 사용되는 단위로, 컴퓨터 외 모바일 등 다른 장치에서도 크기 조정이 가능함. 1em은 12pt, 16px,100%와 같음. em도 부모가 기준이 되기때문에 중첩된 자식 요소에 쓰면 글씨가 커지기때문에 조심해서 써야한다.

   (margin과 padding의 단위를 em으로 쓸경우 부모기준이 아닌 자기 자신 text 크기를 기준으로 한다.)

   

3. rem

   rem은 최상위 요소 ( html )을 기준으로 잡는다. rem의 r은 root를 의미
   em은 바로 위 부모의 기준을 잡기때문에 상황에 따라 중첩된 자식들이 각기 다른 값을 가지지만 rem은 그럴 위험이 없다.

   

최상위 rem 계산 관련글 - https://aboveimagine.tistory.com/85

'px' 와 'em' 의 차이점

크기를 나타내주는 단위는 절대단위와 상대단위로 나뉜다.
둘다 부모로부터 상속이 가능하다.

Viewport 단위 ( vh, vw, vmin, vmax )

반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.
viewport 단위는 상대적인 단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다.
( viewport는 모바일, 태블릿, pc모니터마다 크기가 각기 다르다. 웹이 보여지는 화면이다. )

단위	의미
vw	viewport 너비의 1/100
vh	viewport 높이의 1/100
vmin	viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax	viewport 너비 또는 높이 중 큰 쪽의 1/100

예를 들어 viewport 너비가 1000px 높이가 600px인 경우

• 1vw : viewport 너비 1000px 1%인 10px
• 1vh : viewport 높이 600px 1%인 6px
• vmin : viewport 높이 600px 1%인 6px
• vmax : viewport 너비 1000px 1%인 10px

12pt 16px 1em 100%가 기본값이 된다.

색상

CSS에서 색상을 지정하는 방법은 여러가지가 있으며, 텍스트 색상, 배경 색상 등을 지정하든 상관없이 CSS의 모든 위치에서 동일한 색상 값을 사용할 수 있다. 미리 정의된 색상 이름 또는 RGB, RGBA, HEX, HSL, HSLA 값을 사용해서 지정할 수 있다.

1. 색상 이름 방식

   'black'과 'white'와 같은 색상 이름을 적어주는 방식. 약 140개 정도의 색상이름이 존재한다. 이름으로 나타내는 색상은 한계가 있기 때문에 급히 테스트를 하거나 디자인이 필요 없는 페이지 같은 경우에 유용하게 사용한다.

   기본 색상 이름 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow 등등

2. RGB 방식

   색상 이름 방식으로는 다양한 색상을 나타내기 힘들기 때문에, 다양한 색상을 코드로 표현할 수 있다. RGB는 각각 빛의 삼원색인 Red, Green, Blue를 나타낸다.

   rgb(255,10,0)

   rgb를 먼저 쓰고 괄호를 열고서 각 r,g,b에 해당하는 숫자를 입력한다.
   숫자 값은 0~255까지이며 숫자가 높을 수록 해당 색의 양이 많아진다. 또한 전체 색상의 양이 많아질 수록 색은 밝아진다. ( 0, 0, 0 ) 검은색 ( 255, 255, 255 )는 흰색

3. RGBA 방식

   RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장이다. RGBA 색상 값은 다음으로 지정된다.

   rgba( 빨강, 초록, 파랑, 알파 )

   알파는 0.0 ( 완전 투명 )에서 1.0 ( 전혀 투명하지 않음 ) 사이의 숫자이다.

4. HEX 방식

   HEX 방식은 색상을 16진수로 표현한 방식이다.

   #ffcc00

   보통 웹 작업을 할 때에 많이 쓰는 편이다. HEX 방식은 RGB 방식과 동일한 원리의 방식이다. 255가지의 숫자를 16진수 두 자리로 나타낸 것이다.
   ( 16진수는 0부터 F까지의 16개의 숫자를 한자리로 표현한다. )
   각 두 자리마다 r, g, b를 나타낸다 만약 ##ffcc00이라면 Red는 'ff' Green은 'cc' Blue는 '00'이 된다. 이걸 rgb방식으로 풀어쓰면 rgb( 255, 144, 0)이 된다. 두 자리가 동일하다면 한자리로 줄여서 쓸 수도있다.

5. HSL 방식

   RGB 보다 약간 덜 지원되는 HSL 색상은 색조 (Hue) 채도 (saturation) 명도 (lightness)값을 받아들인다.

   • 색조 ( Hue ) : 색상의 기본 음영 0~360 사이의 값 사용
   • 채도 ( Saturation ) : 색상이 얼마나 포함되있는지 0~100%로 사용 0은 회색으로 표현된다. 100%는 순수한 색상
   • 명도 ( Lightness ) : 색상의 밝기 0~100%로 사용 0은 빛 x 100%는 완전히 흰색으로 표현

6. HSLA 방식

   RGB 방식에서 RGBA가 있듯이 HSL에서 알파채널이 추가된 방식

색상이름 확인 - https://colorbada.com/colorname/

출처 - https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units
http://webberstudy.com/html-css/css-1/css-basic/