2. Units

/*대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식*/
body {
    text-align: center;
}
div {
    font-size: 14px;
    font-weight: bold;
    padding: 2em; /* 14px * 2 = 28px */
    background-color: rgba(255, 0, 0, 0.2);
}

body {
    font-size: 14px;
    text-align: center;
}
div {
    font-size: 120%; /* 14px * 1.2 = 16.8px*/
    padding: 2em; /* 16.8px * 2 = 33.6px */
}

body {
    font-size: 14px;
    text-align: center;
}
div {
    font-size: 1.2em; /* 14px * 1.2 = 16.8px */
    padding: 2em;     /* 16.8px * 2 = 33.6px */
    /*중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다.*/
    /*font-size: 1.2rem;*/

    /*rem 은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem 의 r은 root 를 의미한다.*/
    /*사용자가 브라우저의 기본 폰트 크기를 변경(Mac Chrome 의 경우,
    설정 > 고급 설정 표시 > 웹 콘텐츠 > 글꼴 맞춤 설정)
    하더라도 이에 따라 웹사이트의 레이아웃을 적절히 조정할 수 있다는 장점이 있다.
    따라서 폰트 사이즈 뿐만이 아니라 콘텐츠의 크기에 따라 가변적으로 대응하여야 하는
    wrapper 요소(container) 등에 적합하다.*/
}

/*반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다.*/
/*하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.*/
/*Viewport 단위는 상대적인 단위로 viewport 를 기준으로 한 상대적 사이즈를 의미한다.*/
/*단위	Description*/
/*vw  viewport 너비의 1/100*/
/*vh	viewport 높이의 1/100*/
/*vmin	viewport 너비 또는 높이 중 작은 쪽의 1/100*/
/*vmax	viewport 너비 또는 높이 중 큰 쪽의 1/100*/
body {
    margin: 0px; }
.item {
    width: 500vw;
    height: 100vh;
    line-height: 100vh;
    font-size: 4rem;
}

h2 {
    background-color: red;
    /*green blue white orange yellow cyan black*/
}

/*HEX 코드 단위 (Hexadecimal Colors)*/
/*RGB (Red, Green, Blue)*/
/*RGBA (Red, Green, Blue, Alpha/투명도)*/
/*HSL (Hue/색상, Saturation/채도, Lightness/명도)*/
/*HSLA (Hue, Saturation, Lightness, Alpha)*/
#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);}