CSS - 단위 길이

여기서 말하는 단위란 길이 단위, 백분율 단위, 색상 단위가 그것이며, 하나씩 알아 보도록 하겠습니다.

길이 단위

사용 가능한 길이로는 em, px, in, cm, mm, pt, pc 가 있으며, 길이 값 앞에 + - 가 선택적으로 올 수 있습니다.

<style>
.hh1 { font-size: 0.4in }      /* 인치, 1in = 2.54cm */
.hh2 { font-size: 1cm }        /* cm, 센티미터 */
.hh3 { font-size: 10mm }       /* mm, 밀리미터*/
.hh4 { font-size: 28pt }       /* 포인트, 1pt = 1/72 in */
.hh5 { font-size: 2.4pc }      /* 피카, 1pc = 12pt */
.hh6 { font-size: 38px }       /* pixels, 상대 단위 값 */
.hh7 { font-size: 3em }
</style>

<h4 class="hh1">제목입니다.</h4>
<h4 class="hh2">제목입니다.</h4>
<h4 class="hh3">제목입니다.</h4>
<h4 class="hh4">제목입니다.</h4>
<h4 class="hh5">제목입니다.</h4>
<h4 class="hh6">제목입니다.</h4>
<h4 class="hh7">제목입니다.</h4>

상대단위

단 위	설 명
em	3em 이면 현재 font-size 의 3배 크기 (1em = 16px)
ex	x-height 값을 1로 하는 단위
px	픽셀 수. 해상도에 대한 상대값
vw	브라우저의 너비(가로)를 기준으로 결정하는 단위 브라우저의 너비가 960px 이고, 폰트 크기를 10vw 이라고 한다면 960px 의 1% 인 9.6px 가 됨.
vh	브라우저의 폭(세로)을 기준으로 결정하는 단위 브라우저의 폭이 960px 이고, 폰트 크기를 10vh 라고 한다면 960px 의 1% 인 9.6px 가 됨.

절대단위

단 위	설 명
cm	센티미터
mm	밀리미터
in	인치 (1in = 2.54cm)
pt	포인트 (1pt = 1/72in)
pc	파이카 (1pc = 12pt)

픽셀 단위는 폰트 크기가 고정적인데, 모바일로 볼 때는 글씨가 작아 보이고, 화면이 큰 PC로 볼 때는 크게 보이는 등 그 화면의 해상도에 따라 크기가 달라집니다. 그래서 보통 em 단위를 사용하는 것을 권장합니다.

백분율 단위

백분율 값은 선택적으로 +, - 가 올 수 있고 그 뒤에 수치(또는 소수점)가 옵니다.

<style>
.hh1 { }
.hh2 { font-size: 200% }
</style>

<h4 class="hh1">제목입니다.</h4>
<h4 class="hh2">제목입니다.</h4>

글자가 200% 이면 현재 폰트의 크기가 200% 라는 뜻이 됩니다.

색상 단위

색상 단위로 사용할 수 있는 것은 기본 키워드(keyword)와 RGB를 사용할 수 있습니다.

색 상	설 명
기본 색상	윈도우의 기본 16 색상을 사용할 수 있는 키워드(Keyword). Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow Ex.) color: red
RGB	rgb(빨간색, 초록색, 파란색) 각 색상 값은 0 ~ 255 사이의 수, 255 에 가까울수록 채우는 양이 커짐. 또는 0.0 ~ 100.0% 사이의 백분율 Ex) color: rgb(255, 0, 0)
RGBa	rgba(빨간색, 초록색, 파란색, 불투명도) 각 색상 값은 0 ~ 255 사이의 수. 255 에 가까울수록 채우는 양이 커짐. 또는 0.0 ~ 100.0% 사이의 백분율 불투명도는 0.0 ~ 1 사이의 수. 0에 가까울수록 투명해짐. Ex.) color: rgba(255, 0, 0, 0.5)
#RGB	#으로 시작하는 3자리 16진수 #다음에 빨강(R), 녹색(G), 파랑(B)의 각 값을 00 - FF 로 하는 16진수. Ex.) #F00, #FBO
#RRGGBB	#으로 시작하는 6자리 16진수 #다음에 빨강(RR), 녹색(GG), 파랑(BB)의 각 값을 00 ~ FF 로 하는 16진수 Ex.) #FF0000, #FFBB00
HSL	hsl(색상, 채도, 밝기) 색상: 0(360)는 빨강, 녹색은 120, 파랑은 240(도)임. 채도 : 색의 선명함 정도를 0% ~ 100% 사이의 범위로 지정  0%는 무채색, 100%는 순색이 됨. 밝기 : 색의 밝기는 0% ~ 100% 사이의 범위로 지정.  0%는 가장 어둡게, 100%는 가장 밝게, 50%는 순색이 됨.
HSLa	hsla(색상, 채도, 밝기, 불투명도) 불투명도는 0.0 ~ 1 사이의 수. 0 에 가까울수록 투명해짐. Ex.) color: hsla(0, 100%, 50%, 0.5)

<style> 
.h1 { color: blue; }
</style>

<h1>제목입니다.</h1>

아래 예제에서 모두 같은 색상을 나타냅니다.

h1 { color: #f00 } /* #rgb */
h1 { color: #ff0000 } /* #rrggbb */
h1 { color: rgb(255,0,0) } /* 0 - 255 */
h1 { color: rgb(100%, 0%, 0%) } /* 0.0% - 100.0% */

RGB 값이 # 로 시작하는 16진수(1,2,3,4 ... abcdef) 표현이고, 3자리 혹은 6자리가 옵니다. 3자리 형식은 #rrggbb 형식을 따르는데, 예를 들어 #fb0 은 #ffbb00 이 됩니다.

RGB 값은 기능적 표현도 가능한데, 세 가지 색상으로 빨간색, 초록색, 파란색 순으로 각 색상 값은 0 ~ 255 범위의 수치, 또는 0.0% ~ 100.0% 범위의 백분율 값이 올 수 있습니다.

h1 { color: rgb(255,0,0) }
h1 { color: rgb(280,0,0) }      /* 255 로 정의됨 */
h1 { color: rgb(110%, 0%, 0%) } /* 100%로 정의됨 */

아래는 hsl 예제입니다.

h1 { color: hsl(0,100%,50%) }     /* 빨간색 */
h1 { color: hsl(120, 100%, 50%) } /* 그린 */
h1 { color: hsl(120, 100%, 25%) } /* 다크 그린 */
h1 { color: hsl(120, 100%, 75%) } /* 라이트 그린 */