<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 크기단위 */
/* 1. px : 화소 하나의 크기에 대응대는 단위(고정값) */
body{
font-size: 10px;
}
#px{
font-size: 20px;
}
/* 2. em : 부모 요소 크기에 따른 배수 단위 */
#em{
/* 10px*2em = 20px */
font-size: 2em;
}
/* rem : 최상위태그(html)의 크기에 따른 배수 단위 */
/* 3. % : 기본설정되어있는 크기에서 상대적인 단위 */
/* 반응형 웹 만들때 많이 사용 */
#percent{
font-size: 50%;
}
</style>
</head>
<body>
<p id="px">이시원(px)</p>
<p id="em">이시원(em)</p>
<p id="percent">이시원(%)</p>
</body>
코딩공부