<!DOCTYPE html>
<html lang="en">
<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>
#fontpx {
font-size: 10px;
/* #000000 : HEX 코드 단위 */
color: #0000ff;
}
div {
font-size: 10px;
}
#fontem {
/* em : 부모 요소 크기에 따른 배수 단위 */
font-size: 1.5em;
/* rgb(red, green, blue) : RGB 색상 단위 */
/* color: rgb(0, 15, 255); */
/* a => alpha 색의 투명도, 0~1 사이의 값 */
color: rgba(0, 0, 255, 1);
}
#fontrem {
/* rem : HTML문서 폰트 크기에 따른 배수 단위 */
font-size: 1.5rem;
}
</style>
</head>
<body>
<p>폰트크기조절</p>
<!-- p#fontpx -->
<p id="fontpx">px로 조정</p>
<div>
<p id="fontem">em으로 조정</p>
</div>
<p id="fontrem">rem으로 조정</p>
</body>
</html>
댓글