[css] step16. unit

step16. 01~03. unit (단위)

		/* 
			[ 크기나 거리를 나타내는 단위 ]

			px, %, em, rem

		*/
		.wrapper{
			background-color: yellow;
			width: 500px;
			margin: 0 auto;
		}
		.wrapper2{
			background-color: yellow;
			width: 50%; /* 부모 width 의 50% */
			margin: 0 auto;
		}
	</style>
</head>
<body>
<div class="wrapper">.wrapper</div>
<div class="wrapper2">.wrapper2</div>	
</body>

px : pixel (점, 화소의 개수)을 의미한다. 군대 px 아니다.
% : 부모의 크기에 대한 상대적인 비율이다.
em : 상속받은 글자 크기의 배수이다. 예를 들어 상속받은 글자 크기가 16px이면 1em=16px, 1.5em=24px, 2em=32px 이다.

rem : 최상위 요소(<html>) 글자 크기의 배수이다. html의 font-size가 14px이면 1rem=14px, 2rem=28px이 된다.
em과 rem은 모두 width와 height의 단위로 사용할 수 있다.

	<style>
		#one{
			font-size: 16px;
		}
		#two{
			font-size: 1em; /* inherit 된 글자 크기의 1배 */
		}
		#three{
			font-size: 2em; /* inherit 된 글자 크기의 2배 */
		}
		#four{
			font-size: 3em; /* inherit 된 글자 크기의 3배 */
		}
		.box{
			width: 10em;
			height: 10em;
			background-color: yellow;
			margin-left: 5em;
			border: 1px solid red;
		}
		.wrapper{
			font-size: 20px;
		}
	</style>
</head>
<body>
<h1>기본 글자의 크기는 16px 이다. </h1>
<p>ABCD 글자크기:16px</p>	
<p id="one">ABCD 글자크기:16px</p>
<p id="two">ABCD 글자크기:16px</p>
<p id="three">ABCD 글자크기:32px</p>
<p id="four">ABCD 글자크기:48px</p>
<div class="box"></div>
<div class="wrapper">
	<div class="box"></div>
</div>	
</body>

기본 글자의 크기는 16px이다.

같은 em으로 설정했어도 어떤 내용을 상속받았는가에 따라 크기가 달라진다. 상속받은 크기가 16px이면 1em이 16px, 20px이면 1em이 20px이다. 때문에 다음의 예시처럼 rem 단위를 쓰면 <html> 에서 상속받은 것을 기준으로 하기 때문에 크기를 통일할 수 있다. 최근에는 rem을 많이 쓰는 추세라고 했다.

	<style>
		html{
			/* 1 rem 의 기준 크기 */
			font-size: 10px;
		}

		#one{
			font-size: 16px;
		}
		#two{
			/*
				[ css3 에서 추가된 단위 rem ]
				-최상위(root) 글자 크기의 배수 
                -html 요소의 글자 크기의 배수 이다. 
			*/
			font-size: 1rem; 
		}
		#three{
			font-size: 2rem;
		}
		#four{
			font-size: 3rem;
		}
		.box{
			width: 10rem;
			height: 10rem;
			background-color: yellow;
			margin-left: 5rem;
			border: 1px solid red;
		}
		.wrapper{
			font-size: 20px;
		}
	</style>
</head>
<body>
<p>ABCD</p>
<p id="one">ABCD</p>
<p id="two">ABCD</p>
<p id="three">ABCD</p>
<p id="four">ABCD</p>
<div class="box"></div>
<div class="wrapper">
	<div class="box"></div>
</div>	
</body>

'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글

[css] step17. quiz (가운데 정렬) (0)	2021.12.14
[css] step15. box-sizing (0)	2021.12.14
[css] step14. etc (0)	2021.12.14
[css] step13. css weight (0)	2021.12.14
[css] step12. text (0)	2021.12.14