@charset "UTF-8";
/*unit_01.css*/

.unit_wrap_01 {width: 100%; height: 400px; 
	background-color: #ccf;}
.unit_narr {background-color: #ccc; margin-bottom: 1rem;}
.unit_wrap_01 > div {float:left; margin:10px ;
	background-color: #fff; 
	font-size: 1rem; font-weight: 300;}
	 p {background-color: #fa0;}
	 span {display: block; background-color: #0cf;}
	 strong {display: block; background-color: #333; color: #fff;
		font-weight: 300;}
	 i {display:block; background-color: #afa; color: #333}

/* px단위 =====================================*/
.box_01 {width: 300px; height: 300px; font-size: 20px;}
.box_01 p {width: 150px; height: 150px; font-size: 10px;}
.box_01 span {width: 200px; height: 200px; font-size: 15px;}
.box_01 i {width: 100px; height: 100px; font-size: 8px;}

/* pt단위  계산작업시 사용할 뿐 실사용은 하지 않는다. ================*/
.box_02 {background-color: #9c9 !important;
	width: 225pt; height: 225pt; font-size: 15pt;}
.box_02 p {width: 112.5pt; height: 112.5pt; font-size: 7.5pt;}
.box_02 span {width: 150pt; height: 150pt; font-size: 11.25pt;}
.box_02 i {width: 75pt; height: 75pt; font-size: 6pt;}

/* % 단위 부모값에서 계산 ==================================
	최초의 값이 없기때문에 16px == 100% */
.unit_wrap_01 .box_03 {background-color: #af4; 
	width: 300px; height: 300px; font-size: 125%;}
.box_03 p {width: 50%; height: 50%; font-size:50%;}
.box_03 span {width: 130%; height: 130%; font-size:130%;}
.box_03 i {width: 50%; height: 50%; font-size:50%;}

/*em 단위 ==========================*/
.unit_wrap_01 .box_04 {background-color: #f7a;
	width: 18.75em; height: 18.75em; font-size: 1em;
	/* font-size: 20px / 1.25em;*/}
.box_04 p {width: 9.375em; height: 9.375em; font-size: 1em;}
.box_04 span {width: 12.5em; height: 12.5em; font-size: 1em;}
.box_04 i {width: 6.25em; height: 6.25em; font-size: 1em;}


:root{font-size: 16px;}
/* rem 단위====================== */
.unit_wrap_01 .box_05 {background-color: #333;
	width: 18.75rem; height: 18.75rem; font-size: 1.25rem;
	/* font-size: 20px / 1.25rem;*/}
.box_05 p {width: 9.375rem; height: 9.375rem; font-size: 0.625rem;}
.box_05 span {width: 12.5rem; height: 12.5rem; }
.box_05 i {width: 6.25rem; height: 6.25rem; }

/* vw 단위====================== */

/* vh 단위====================== */

/* v-min 단위====================== */

/* v-mas 단위====================== */

/*반응형 웹 설정 @media 쿼리*/

/*
1. 반응형
2. 고정값 X
물리픽셀 / 논리픽셀... (물리적 해상도와 논리적 해상도)
pixel ratio: 

css:root - reset 보다 더 이전에 세팅하는것을 root라고 한다. ;

;
*/