[CSS] CSS 프로퍼티 값 (단위)
by mini_min[CSS] CSS 프로퍼티 값 (단위)
✔️ CSS 프로퍼티
: CSS 프로퍼티에는 키워드, 크기단위, 색상 표현 등 특정 단위를 갖는 값이 들어간다.
: 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다.
✔️ CSS 프로퍼티 크기 단위
1) px 단위
: 픽셀은 해상도에 따라 상대적인 크기를 갖는다.
: 픽셀 화소는 디바이스에 따라 다르기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다.
: 1px 를 1/96 inch 로 인식한다.
<h3> 단위(Units) : px </h3>
<div class="box">글자크기: 14px</div>
</body>
</html>
2) %
: 백분률 단위의 상대 단위이다.
: 요소에 지정된 사이즈에 상대적인 사이즈를 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
font-size: 14px;
}
.box {
width: 300px; height: 200px; border: 3px dotted gray;
font-size: 120%; /* 부모 폰트 크기 *1.2 = 사이즈 나옴 16.8px */
font-weight: 600;
padding: 2em; /*글자크기 곱하기 2*/
text-align: center;
}
</style>
</head>
<body>
<h3> 단위(Units) : % </h3>
<div class="box">글자크기: 14px * 120% = 16.8px</div>
</body>
</html>
3) em
: em은 배수단위로 상대 단위이다.
: 요소에 지정된 사이즈에 상대적인 사이즈를 설정한다.
: 2em 은 지정된 사이즈에 2배 이다.
: 외국에서 자주 사용하는 단위라고 보면 된다.
❌ 중첩된 자식 요소에 em 을 지정하면 모든 자식 요소에 영향을 미치기에 주의한다!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
font-size: 14px;
}
div {
font-size: 1.2em;
font-weight: 600;
padding: 2em;
text-align: center;
}
.box1 { background-color: red;}
.box2 { background-color: green;}
.box3 { background-color: yellow;}
</style>
</head>
<body>
<h3> 단위(Units) : em </h3>
<p>중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의</p>
<div class='box1'>
Font size: 1.2em = 14px * 1.2 = 16.8px
<div class='box2'>
Font size: 1.2em = 16.8px * 1.2 = 20.16px
<div class='box3'>
Font size: 1.2em = 20.16px * 1.2 = 24.192px
</div>
</div>
</div>
</body>
</html>
4) rem
: rem 은 root em 이라는 뜻으로, HTML 의 root 요소인 <html>을 가리킨다. 지정된 크기를 기준으로 상대적인 값을 가지게 된다는 뜻이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*지정하지 않으면 16px*/
html {font-size: 14px; }
/* html 글자 크기 * 1.2 = 14*1.2 = 16.8 */
/*rem 은 다 똑같다. 최상위 기준으로 크기 일정하게 출력 */
div {
font-size: 1.2rem;
font-weight: 600;
padding: 2em;
text-align: center;
}
.box1 { background-color: red;}
.box2 { background-color: green;}
.box3 { background-color: yellow;}
</style>
</head>
<body>
<h3> 단위(Units) : rem </h3>
<p>최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미</p>
<div class='box1'>
Font size: 1.2rem = 14px * 1.2 = 16.8px
<div class='box2'>
Font size: 1.2rem = 14px * 1.2 = 16.8px
<div class='box3'>
Font size: 1.2rem = 14px * 1.2 = 16.8px
</div>
</div>
</div>
</body>
</html>
5) Viewport
: 상대적인 단위로, viewpoint 를 기준으로 한 상대적인 사이즈이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {margin: 0; }
.box {
width: 50vw; /*1vw : viewport 너비가 1000px 인 경우 1%인 10px*/
height: 100vh;
line-height: 100vh;
font-size: 4rem;
color: white;
text-align: center;
}
.box1 {background-color: blue;}
.box2 {background-color: orange;}
</style>
</head>
<body>
<h3> 단위(Units) : Viewport 예 </h3>
<div class="box box1">항목 1</div>
<div class="box box2">항목 2</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| [CSS] 선택자(Selector) ⭐⭐ / Attribute Selector / class Selector (0) | 2022.09.14 |
|---|---|
| [CSS] 상속 (Inheritance) / 캐스캐이딩 (Cascading Order) (0) | 2022.09.13 |
| [CSS] CSS 기초 문법 (import / link) (0) | 2022.09.13 |
| [HTML] <img> 태그 / <audio> 태그 (0) | 2022.09.13 |
| [HTML] <label> 태그 / <fieldset> 태그 (0) | 2022.09.13 |
블로그의 정보
개발자 미니민의 개발로그
mini_min