CSS3 - Units

이소라·2021년 6월 21일

CSS Property에는 키워드, 크기 단위, 색상 표현 등의 특정 단위를 갖는 값을 지정함

1. 키워드

각 property에 따라 사용할 수 있는 키워드가 존재함
예) display의 property 값으로 사용할 수 있는 키워드 :
block, inline, inline-block, none

2. 크기 단위

CSS에서 사용하는 대표적인 크기 단위 : px, em, %
px (절대값) / em, % (상대값)
브라우저의 폰트 사이즈 기본값 : 16px, 1em, 100%
property 값이 0인 경우 단위 생략 가능

2.1 px

픽셀 : 화면을 구성하는 단위, 디바이스 해상도(resolution)에 따라 상대적인 크기를 가짐
px : 픽셀(화소) 단위
1px = 화소 1개 크기
1px = (브라우저에서) 1/96인치의 절대 단위
px은 요소나 이미지의 크기 지정에 주로 사용됨

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	text-align: center;
      }
      div {
      	font-size: 14px;
      	font-weight: bold;
      	padding: 2em; /*2em = 14px * 2 = 28px */
      	background-color: rgba(255, 0, 0, 0.2) /*rgba(red, green, blue, alpha)*/
      }
    </style>
  </head>
  <body>
    <div>Font size: 14px</div>
  </body>
</html>

2.2 %

% : 백분률 단위의 상대 단위
요소에 지정된 사이즈(상속되거나 디폴트인 값)에 대한 상대적인 사이즈를 설정함

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	font-size: 14px;
      	text-align: center;
      }
      div {
      	font-size: 120%; /* 14px * 1.2 = 16.8px */
      	font-weight: bold;
      	padding: 2em; /*2em = 16.8px * 2 = 33.6px */
      	background-color: rgba(255, 0, 0, 0.2)
      }
    </style>
  </head>
  <body>
    <div>Font size: 14px * 120% = 16.8px</div>
  </body>
</html>

2.3 em

em : 배수 단위의 상대 단위
요소에 지정된 사이즈(상속되거나 디폴트인 값)에 대한 상대적인 사이즈를 설정함
1em = 요소에 지정된 사이즈
2em = 요소에 지정된 사이즈의 2배
폰트 사이즈 설정 또는 컨테이너 크기 설정에 사용하기 편리함

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	font-size: 14px;
      	text-align: center;
      }
      div {
      	font-size: 1.2em; /* 14px * 1.2 = 16.8px */
      	font-weight: bold;
      	padding: 2em; /*2em = 16.8px * 2 = 33.6px */
      	background-color: rgba(255, 0, 0, 0.2)
      }
    </style>
  </head>
  <body>
    <div>Font size: 1.2em = 14px * 1.2 = 16.8px</div>
  </body>
</html>

중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의해야함
상대 단위인 em의 기준이 상속의 영향으로 바뀔수 있음

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	font-size: 14px;
      	text-align: center;
      }
      div {
      	font-size: 1.2em; /* 14px * 1.2 = 16.8px */
      	font-weight: bold;
      	padding: 2em;
      }
      .box1 { background-color: rgba(255, 0, 0, 0.2); }
      .box2 { background-color: rgba(255, 0, 0, 0.4); }
      .box3 { background-color: rgba(255, 0, 0, 0.8); }
    </style>
  </head>
  <body>
    <div class='box1'>
      Font size: 1.2em = 14px * 1.2 = 16.8px
      <div class='box2'>
        Font size: 1.2em = 16.8px * 1.2 = 20.16px
        <div class='box3'>
          Font size: 1.2em = 20.16px * 1.2 = 24.192px
        </div>
      </div>
    </div>
  </body>
</html>

2.4 rem

rem(root em) : 최상위 요소(html)의 사이즈를 기준으로 삼음

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      	font-size: 14px;
      	/* font-size 미지정 시에는 16px */
      }
      div {
      	font-size: 1.2rem; /* 14px(html font-size) * 1.2 = 16.8px */
      	font-weight: bold;
      	padding: 2em;
      text-align: center;
      }
      .box1 { background-color: rgba(255, 0, 0, 0.2); }
      .box2 { background-color: rgba(255, 0, 0, 0.4); }
      .box3 { background-color: rgba(255, 0, 0, 0.8); }
    </style>
  </head>
  <body>
    <div class='box1'>
      Font size: 1.2rem = 14px * 1.2 = 16.8px
      <div class='box2'>
        Font size: 1.2rem = 14px * 1.2 = 16.8px
        <div class='box3'>
          Font size: 1.2rem = 14px * 1.2 = 16.8px
        </div>
      </div>
    </div>
  </body>
</html>

사용자가 브라우저의 기본 폰트를 변경하더라도 이에 따라 웹사이트의 레이아웃을 적절히 조정 가능
컨텐츠의 크기에 따라 가변적으로 대응해야하는 wrapper 요소(container) 등에 적합함

.container {
	width: 70rem; /* 70rem = 14px * 70 = 980px */
}

2.5 Viewpoint 단위 (vh, vw, vmin, vmax)

viewpoint 단위 : viewpoint를 기준으로 한 상대적인 단위

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

예) viewpoint 너비 1000px, 높이 600px일 때,
- vw : 1000px의 1%인 10px
- vh : 600px의 1%인 6px
- vmin : 600px의 1%인 6px
- vmax : 1000px의 1%인 10px
IE8 이하 지원 X, IE 9~11, Edge 지원 불완전함

<!DOCTYPE html>
<html>
  <head>
    <style>
      body { margin: opx; }
        .item {
        width: 50vw;
        height: 100vh;
        text-align: center;
        line-height: 100vh;
        font-size: 4rem;
        color: white;
      }
      .item1 { background-color: red; }
      .item2 { background-color: orange; }
    </style>
  </head>
  <body>
    <div class='item item1'>item1</div>
    <div class='item item2'>item2</div>
  </body>
</html>

3. 색상 표현 단위

색상을 지정하기 위해 키워드 (red, blue...) 사용 가능
사용이 간편하나, 표현할 수 있는 색상 수가 제한됨

<!DOCTYPE html>
<html>
  <body>
    <h2 style="background-color:red">
      Red background color
    </h2>
    
    <h2 style="background-color:green">
      Green background color
    </h2>
    
    <h2 style="background-color:blue; color:white">
      Blue background color and white text color
    </h2>
    
    <h2 style="background-color:orange">
      Orange background color
    </h2>
    
    <h2 style="background-color:yellow">
      Yellow background color
    </h2>
    
    <h2 style="background-color:cyan">
      Cyan background color
    </h2>
    
    <h2 style="background-color:black; color:white">
      Black background color and white text color
    </h2>
  </body>
</html>

더욱 다양한 색상을 표현하기 위해 다음과 같은 색상 표현 단위 사용 가능

단위	사용 예
HEX 단위 코드 (Hexademical Colors)	#000000
RGB (Red, Green, Blue)	rgb(255, 255, 0)
RGBA (Red, Green, Blue, Alpha)	rgba(255, 255, 0, 1)
HSL (Hue 색상, Saturation 채도, Light 명도)	hsl(0, 100%, 25%)
HSLA (Hue, Saturation, Light, Alpha)	hsla(60, 100%, 25%, 1)

Hue : 0 ~ 360 사이 값을 가짐
- hue 0, 360 : red
- hue 120 : green
- hue 240 : blue
Saturation : 0 ~ 100 % 사이의 값을 가짐, 색상의 연하고 짙은 정도
- saturation 0% : gray
- saturation 100% : original
Light : 0 ~ 100 % 사이의 값을 가짐, 색상의 밝고 어두운 정도
- light 0% : black
- light 50% : original
- light 100% : white

<!DOCTYPE html>
<html>
  <head>
    <style>
      #hex-p1 { background-color: #ff0000; }
      #hex-p2 { background-color: #00ff00; }
      #hex-p3 { background-color: #0000ff; }
      #hex-p4 { background-color: #ffff00; }
      #hex-p5 { background-color: #ff00ff; }
      
      #rgb-p1 { background-color: rgb(255,0,0); }
      #rgb-p2 { background-color: rgb(0,255,0); }
      #rgb-p3 { background-color: rgb(0,0,255); }
      #rgb-p4 { background-color: rgb(192,192,192); }
      #rgb-p5 { background-color: rgb(255,255,0); }
      #rgb-p6 { background-color: rgb(255,0,255); }
      
      #rgba-p1 { background-color: rgba(255,0,0,0.3); }
      #rgba-p2 { background-color: rgba(0,255,0,0.3); }
      #rgba-p3 { background-color: rgba(0,0,255,0.3); }
      #rgba-p4 { background-color: rgba(192,192,192,0.3); }
      #rgba-p5 { background-color: rgba(255,255,0,0.3); }
      #rgba-p6 { background-color: rgba(255,0,255,0.3); }
      
      #hsl-p1 { background-color: hsl(120,100%,50%)}
      #hsl-p2 { background-color: hsl(120,100%,75%)}
      #hsl-p3 { background-color: hsl(120,100%,25%)}
      #hsl-p4 { background-color: hsl(120,60%,70%)}
      #hsl-p5 { background-color: hsl(290,100%,50%)}
      #hsl-p6 { background-color: hsl(290,60%,70%)}
      
      #hsla-p1 { background-color: hsla(120,100%,50%,0.3)}
      #hsla-p2 { background-color: hsla(120,100%,75%,0.3)}
      #hsla-p3 { background-color: hsla(120,100%,25%,0.3)}
      #hsla-p4 { background-color: hsla(120,60%,70%,0.3)}
      #hsla-p5 { background-color: hsla(290,100%,50%,0.3)}
      #hsla-p6 { background-color: hsla(290,60%,70%,0.3)}
    </style>
  </head>
  <body>
    <h1>HEX colors:</h1>
    <p id="hex-p1">Red</p>
    <p id="hex-p2">Green</p>
    <p id="hex-p3">Blue</p>
    <p id="hex-p4">Yellow</p>
    <p id="hex-p5">Cerise</p>
    
    <h1>RGB colors:</h1>
    <p id="rgb-p1">Red</p>
    <p id="rgb-p2">Green</p>
    <p id="rgb-p3">Blue</p>
    <p id="rgb-p4">Gray</p>
    <p id="rgb-p5">Yellow</p>
    <p id="rgb-p6">Cerise</p>
    
    <h1>RGB colors with opacity:</h1>
    <p id="rgba-p1">Red</p>
    <p id="rgba-p2">Green</p>
    <p id="rgba-p3">Blue</p>
    <p id="rgba-p4">Gray</p>
    <p id="rgba-p5">Yellow</p>
    <p id="rgba-p6">Cerise</p>
    
    <h1>HSL colors:</h1>
    <p id="hsl-p1">Green</p>
    <p id="hsl-p2">Light Green</p>
    <p id="hsl-p3">Dark Green</p>
    <p id="hsl-p4">Pastel Green</p>
    <p id="hsl-p5">Violet</p>
    <p id="hsl-p6">Pastel Violet</p>
    
    <h1>HSL colors with opacity:</h1>
    <p id="hsla-p1">Green</p>
    <p id="hsla-p2">Light Green</p>
    <p id="hsla-p3">Dark Green</p>
    <p id="hsla-p4">Pastel Green</p>
    <p id="hsla-p5">Violet</p>
    <p id="hsla-p6">Pastel Violet</p>
  </body>
</html>

이소라

이전 포스트

CSS3 - Selector

다음 포스트

CSS3 - Units

1. 키워드

2. 크기 단위

2.1 px

2.2 %

2.3 em

2.4 rem

2.5 Viewpoint 단위 (vh, vw, vmin, vmax)

3. 색상 표현 단위

CSS3 - Selector

CSS3 - Box Model

0개의 댓글