JunO3O
CSS 단위
CSS 단위
2023. 3. 21. 03:03ㆍCSS
CSS 단위
ㅁ 스타일 속성을 적용하려면 스타일 값으로 입력할 수 있는 css 단위를 알아야 합니다.
ㅁ 하지만 사용하는 단위가 많기 때문에 그때그때 필요한 단위를 찾아쓰는 연습을 하는 것이 중요하다고 생각합니다.
| 단위 | 설명 |
| % | 백분율 단위 |
| em | 배수 단위 |
| px | 픽셀 단위 |
# % 단위
ㅁ % 단위는 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정합니다.
<!DOCTYPE html>
<html>
<head>
<title>크기 단위 연습</title>
<style>
p:nth-child(1) {
font-size:100%;
}
p:nth-child(2) {
font-size:200%;
}
p:nth-child(3) {
font-size:300%;
}
</style>
</head>
<body>
<p>1 단위를 연습합니다.</p>
<p>2 단위를 연습합니다.</p>
<p>3 단위를 연습합니다.</p>
</body>
</html>
# em 단위
ㅁ em 단위는 배수를 나타내는 단위입니다. 1배는 1em이고, 이는 100%와 같습니다. 마찬가지로 2배는 2em이고, 200%와 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>크기 단위 연습</title>
<style>
p:nth-child(1) {
font-size: 1.0em;
}
p:nth-child(2) {
font-size: 3.0em;
}
p:nth-child(3) {
font-size: 5.0em;
}
</style>
</head>
<body>
<p>1 단위를 연습합니다.</p>
<p>2 단위를 연습합니다.</p>
<p>3 단위를 연습합니다.</p>
</body>
</html>
# px 단위
ㅁ 앞에 있는 % 단위와 em 단위는 크기를 상대적으로 비교하지만 px 단위는 크기를 절대적으로 지정합니다.
ㅁ 앞에 어떤 숫자가 있던 고정한 값으로 보여주는 것이 px 단위의 특징입니다.
<!DOCTYPE html>
<html>
<head>
<title>크기 단위 연습</title>
<style>
p:nth-child(1) {
font-size: 10px;
}
p:nth-child(2) {
font-size: 20px;
}
p:nth-child(3) {
font-size: 30px;
}
</style>
</head>
<body>
<p>1 단위를 연습합니다.</p>
<p>2 단위를 연습합니다.</p>
<p>3 단위를 연습합니다.</p>
</body>
</html>
# 색상 단위
ㅁ 색상을 입력할 때 red 와 같이 직접적으로 색 이름을 지정하는 방법(background-color : red)이 있지만 좀 더 구체적으로 색을 지정하는 방법이 있습니다.
h1 {
background-color:red;
}
ㅁ RGB 색상을 입력할 때 사용하는 :rgb(255, 255, 255) 와 같은 방법이 있으며, 여기에 투명도를 추가적으로 나타내는 :RGBA(255, 255, 255, 0.5) 방법이 있습니다. 0.0은 완전 투명한 상태이고, 1.0은 완전 불투명한 상태입니다.
<style>
h1 {
background-color:rgb(255,255,255); <!-- 또는 rgba(255, 255, 255, 0.5); -->
}
</style>
ㅁ 또한, HEX 코드 방식을 사용해서 나타낼 수 있는데, :#009303 과 같이 지정하여 사용합니다.
<style>
h1 {
background-color:#123456;
}
</style># URL 단위
ㅁ 이미지나 글꼴 파일을 불러올 때는 URL 단위를 사용합니다.
ㅁ 만약 백그라운드에 이미지를 지정하고 싶다면 background-image:url('image.jpg'); 형식을 사용하여 배경 이미지를 지정합니다.
<style>
body {
background-image:url('image.jpg');
}
</style>
ㅁ 현재 폴더의 이미지 파일을 불러올 때는 background-image:url('image.jpg'); 방식을 사용합니다.
<style>
body {
background-image:url('image.jpg');
}
</style>
ㅁ 특정 폴더(abc)의 이미지 파일을 불러올 때는 background-image:url('abc/image.jpg'); 방식을 사용합니다.
<style>
body {
background-image:url('abc/image.jpg');
}
</style>
ㅁ 루트 폴더의 이미지 파일을 불러올 때는 background-image:url('/image.jpg'); 방식을 사용합니다.
<style>
body {
background-image:url('/image.jpg');
}
</style>
'CSS' 카테고리의 다른 글
| 가시 속성(display) (0) | 2023.03.21 |
|---|---|
| 박스 속성 (0) | 2023.03.21 |
| 반응 / 상태 / 구조 선택자 (0) | 2023.03.21 |
| 후손 선택자 / 자손 선택자 (0) | 2023.03.21 |
| 속성 선택자 (0) | 2023.03.21 |