CSS - 크기단위 (%,em,px 백분율단위,배수단위,픽셀단위)
- 각종정보모음/컴퓨터
- 2020. 3. 20.
| 단위 | 설명 |
| % | 백분율단위 |
| em | 배수단위 |
| px | 픽셀단위 |
% 백분율단위 적용하기
%단위는 기본으로 설정된 크기 기준으로 상대적인 크기를 지정한다.
이때 100%가 초기에 설정된 크기이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
p:nth-child(1){}
p:nth-child(2){font-size: 100%;}
p:nth-child(3){font-size: 150%;}
p:nth-child(4){font-size: 200%;}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</body>
</html>
em 단위 예시
em은 굉장히 유용한 크기 단위이다.
em은 배수를 나타내는 단위이다 1배=1em=100%이고 1.5배=1.5em=150% 이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
p:nth-child(1){}
p:nth-child(2){font-size: 1.0em;}
p:nth-child(3){font-size: 1.5em;}
p:nth-child(4){font-size: 2.0;}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</body>
</html>
PX단위 적용하기
%와 em단위는 크기 상대적으로 지정하지만, PX단위는 크기를 절대적으로 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
p:nth-child(1){}
p:nth-child(2){font-size: 16px;}
p:nth-child(3){font-size: 24px;}
p:nth-child(4){font-size: 32px;}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</body>
</html>
'각종정보모음 > 컴퓨터' 카테고리의 다른 글
| 노트북 배터리 오래쓰는법 몇가지 꿀팁:) (16) | 2020.07.11 |
|---|---|
| CSS - 색상단위(RGB색상,RGBA색상,HEX코드) (7) | 2020.03.21 |
| CSS - 구조선택자 (5) | 2020.03.20 |
| CSS - 상태선택자 (16) | 2020.03.20 |
| CSS - 반응선택자 (7) | 2020.03.20 |
| CS Position 속성 활용팁 (margin과 absoulte 활용) (14) | 2020.03.18 |