** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
- CSS는 길이를 표현하는 몇 가지 다른 단위가 있습니다.
- 예를 들어 width로 가로폭을 표현할 때 [ width: 300px; ]이라고 쓰죠? 이때 px이 단위입니다.
- 이번 강좌에서는 단위의 종류들을 알아보고자 합니다.
** 단위의 몇가지 특징
- 숫자와 단위 사이에는 공백을 쓸 수 없습니다.
- 0은 단위 생략이 가능합니다.
- 일부 CSS 속성의 경우 음수 길이가 허용됩니다.
1. 절대적 길이 단위
- 절대적 길이 단위는 고정되어 있으며, 정확히 그 크기로 나타내는 것을 말합니다.
- 화면 크기(뷰포트)는 기기에 따라 모두 다르기 때문에 절대적 단위만 쓰는 것은 추천하지 않습니다.
- 아래 표로 여러가지 단위를 보여드리지만, 웹에서는 절대적 단위는 px만 쓴다는 것을 기억해주시면 됩니다.
| 단위 | 설명 |
| cm | centimeters, 센치미터 단위, 인쇄용 단위로 웹에서는 사용하지 않습니다. |
| mm | millimeters, 밀리미터 단위, 역시 인쇄용 단위로 웹에서는 사용하지 않습니다. |
| in | inches, 인치 (1in = 96px = 2.54cm) |
| px | pixels, 픽셀 (1px = 1/96th of 1in) |
| pt | points, 포인트 (1pt = 1/72 of 1in) |
| pc | picas, 피카스 (1pc = 12pt) |
2. 상대적 길이 단위
- 상대적 길이 단위는 요소에서 상대적인 길이를 지정합니다.
- 상대적 길이 단위는 서로 다른 기기(모니터 폭) 간에 더 잘 확장됩니다.
- 그래서 반응형웹이나 모바일 웹을 하려면 상대적 단위를 잘 알아야 합니다.
| 단위 | 설명 |
| em | 글꼴을 상대적으로 표현하는 단위, 부모 요소가 갖고 있는 크기에 등배단위로 처리 ex) 2em => 2배 |
| ex | 현재 글꼴의 x-height로 상대적으로 표현하는 단위(거의 사용되지 않음) |
| ch | 0(영)의 너비를 기준으로 상대적으로 처리 |
| rem | 글꼴을 root element(html태그) 기준으로 크기에 등배단위로 처리 |
| vw | 뷰포트 너비(width)의 1%로 처리 |
| vh | 뷰포트 높이(height)의 1%로 처리 |
| vmin | 현재 뷰포트 중(width와 height 중) 작은 쪽으로 선택해서 vw 혹은 vh 수치로 처리 ** 익스플로러(IE)는 안되므로 잘 알고 사용해야 합니다. |
| vmax | 현재 뷰포트 중(width와 height 중) 큰 쪽으로 선택해서 vw 혹은 vh 수치로 처리 ** 익스플로러(IE)는 안되므로 잘 알고 사용해야 합니다. |
| % | 부모요소가 갖고 있는 크기에 %처리 ex) 200% => 2배 |
3. em과 rem의 차이
- 둘다 등배 단위를 뜻하는 상대적 단위입니다.
- 하지만 em은 부모 크기를 기준으로 등배 단위가 처리되고, rem은 root(즉 html)를 기준으로 등배 단위가 처리됩니다.
- 아래 코드로 비교해보도록 하겠습니다.
## 코드보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>사이즈</title>
<style>
/* 등배단위 사이즈 - 기준으로부터 몇배 */
*{ font-size: 20px; } /* 모든 요소에 사이즈를 20으로 처리 - html태그도 포함 */
/* em : 기준이 부모가되서 거기에 대한 등배단위 */
.box01{ font-size: 10px; }
.box01 h1{ font-size: 3em; }
.box01 p{ font-size: 2em; }
/* rem : 기준이 루트(html)이 되서 거기에 대한 등배단위 */
.box02{ font-size: 10px; }
.box02 h1{ font-size: 3rem; }
.box02 p{ font-size: 2rem; }
</style>
</head>
<body>
<div class="box01">
<h1>제목태그</h1>
<p>문단태그</p>
</div>
<hr>
<div class="box02">
<h1>제목태그</h1>
<p>문단태그</p>
</div>
</body>
</html>- 일단 전체 선택자(*)로 글자크기를 20px로 처리했습니다. 모든 태그 선택이라 root격인 <html> 태그에도 20px을 준 것입니다.
- <div> 태그는 두 개로 각각. box01과. box02라는 클래스로 처리했습니다.
- <div> 태그에도 글자크기를 주었습니다. 10px로 처리했어요.
- .box01 의 자손들을 em단위로 글자크기를 지정할것이고, .box02 의 자손들을 rem단위로 글자크기를 지정할 겁니다.
## 결과 보기
- 위의 두 글자는 부모크기(10px)에서 상속받아, 제목 태그는 3em이라 30px로 처리, 문단태그는 2em이라 20px로 처리됩니다.
- 아래의 두글자는 root(* = 20px)에서 상속받아, 제목태그는 3 rem이라 60px로 처리, 문단 태그는 2 rem이라 40px로 처리됩니다.
- 부모 크기를 매번 기억할 수는 없으니 rem을 쓰는 것이 더 효과적이겠죠?
4. 반응형 웹에서 rem을 사용하는 이유
- 반응형 웹은 데스크톱(PC), 태블릿, 모바일을 한 번에 코딩합니다.
- html은 하나를 사용하지만 각각의 CSS를 넣어야 하는 거죠.
- 근데 모든 것을 매번 3파트로 나눠서 코딩하면 어떨까요? 코딩을 너무 많이 해야겠죠?
- 그래서 공통적인 것은 공통으로 작업하고, 정말 잘 안 맞는 파트만 미디어 쿼리에 코딩하는 것이 좋습니다.
- 마찬가지로 글자 크기를 px로 하면 PC에서 볼 때, 태블릿에서 볼때, 모바일에서 볼 때 조금씩 작아져야 하는데 한 요소 작성할 때마다 3번씩 써야 하는 불편함이 생깁니다.
- 그래서 rem단위를 이용하면 공통적으로 한 번만 작성해도 되고, 정 맞지 않는 파트만 수정하면 돼서 편리하다는 것이죠.
1) 모바일 웹을 공통으로 코딩
- 일단 모바일 기기로만 비교해보겠습니다.
- [iphone plus] 계열들을 가로폭이 414px입니다. [iphone 6~x] 계열들은 가로 폭이 375px입니다.
[iphone5&se]는 가로폭이 320px입니다.
- 그럼 기기에 따라 보이는 것이 다릅니다. 아래 예시를 통해 보겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이즈 단위</title>
<style>
h1{ font-size: 32px; background-color: aquamarine; }
h3{ font-size: 20px; background-color: lightblue; }
p{
font-size: 16px;
text-align: justify;
background-color: pink;
}
</style>
</head>
<body>
<h1>가장 큰 제목</h1>
<h3>작은 제목</h3>
<p>
파란 자랑처럼 차 슬퍼하는 않은 봅니다. 부끄러운 시와 이름과, 가을 아무 않은 있습니다. 한 아스라히 그리고 있습니다. 내 무엇인지 청춘이 토끼, 지나가는 시인의 이런 된 별에도 봅니다.
</p>
</body>
</html>- h1태그는 글자크기를 32px, h3태그는 20px, p태그는 16px로 절대적 단위를 사용해봤습니다.
## 결과 보기
- 화면 폭이 전부 다르기 때문에 여백이 다 다릅니다.
- 첫 번째로 h1태그의 가장 큰 제목을 보면 옆에 남는 여백들이 오른쪽으로 갈수록 점점 좁아지는 것이 보입니다.
- 그리고 p태그로 작성한 핑크색 부분을 보면 iphone plus들은 4줄에 마지막 줄이 반을 넘어가지 않습니다. iphone 6/7/8은 4줄이긴 하지만 마지막 줄이 반을 넘어갑니다. iphone 5 같은 경우는 5줄이나 되죠.
- 완전히 똑같은 위치에 놓을 수는 없더라도, 최소 줄 수라도 같게 해달라고 할 수도 있겠죠?
- 그래서 공통적으로 작업하게 되면 각각 줄 수가 없습니다.
2) 모바일 웹을 px단위로 각각 처리
- 그럼 이번에는 미디어 쿼리를 써서 글자크기를 px로 각각 맞춰보도록 하겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이즈 단위</title>
<style>
/* 모든 기기 공통 CSS */
h1{ background-color: aquamarine; }
h3{ background-color: lightblue; }
p{
text-align: justify;
background-color: pink;
}
/* iphone plus */
@media screen and (max-width: 414px){
h1{ font-size: 32px; }
h3{ font-size: 20px; }
p{ font-size: 16px; }
}
/* iphone 678 */
@media screen and (max-width: 375px){
h1{ font-size: 26px; }
h3{ font-size: 16px; }
p{ font-size: 14px; }
}
/* iphone 5 & se */
@media screen and (max-width: 320px){
h1{ font-size: 22px; }
h3{ font-size: 14px; }
p{ font-size: 12px; }
}
</style>
</head>
<body>
<h1>가장 큰 제목</h1>
<h3>작은 제목</h3>
<p>
파란 자랑처럼 차 슬퍼하는 않은 봅니다. 부끄러운 시와 이름과, 가을 아무 않은 있습니다. 한 아스라히 그리고 있습니다. 내 무엇인지 청춘이 토끼, 지나가는 시인의 이런 된 별에도 봅니다.
</p>
</body>
</html>- px단위를 써서 각각 맞춰봤습니다.
- 고작 3개의 요소의 CSS 코드를 쓰는데도, 이렇게 많이 작성해야 하죠?
- 실제 홈페이지를 제작한다면 px단위를 쓰면 너무 많은 코드를 작성하게 되는 겁니다.
## 결과 보기
- 완벽한 길이까지 맞지 않아도, p태그를 보면 4줄에 마지막 줄이 전부 반을 넘지 않는 것을 확인할 수 있습니다.
- 그래서 같은 디자인처럼 보이게 하려면 기기별로 글자 크기가 다른 것이 좋은 거죠.
- 근데 px단위를 쓰면 코드가 너무 많아진다고 했죠? 그래서 rem단위를 써서 조율해보도록 하겠습니다.
3) 모바일 웹을 rem단위로 한 번에 처리
- 미디어 쿼리를 작성하지 않은 상단 CSS부분은 모든 기기 공통을 적는 것입니다.
- 기본 root만(전체 선택자) 미디어 쿼리에 기본 폰트를 잡아준 후 공통작업에서 rem단위를 써서 알아서 계산되서 들어가게 처리해주는 것입니다.
- 그리고 rem으로 계산할 때 그나마 괜찮은 숫자가 나오는 것이 16px이라 iphone plus계열의 기본폰트를 16으로 잡겠습니다.
- 무슨 얘기냐면 20px로 크기를 맞추고 싶다면 [20/16]을 처리합니다. 그럼 [1.25]가 나오고 [1.25 rem]으로 적어주는 것입니다. 다른 숫자인 경우 소수점이 너무 심하게 처리되어 16px을 기본 폰트로 하는 것이 수학적 계산이 쉽니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이즈 단위</title>
<style>
/* 모든 기기 공통 CSS */
*{ font-size: 16px; } /* 기본폰트 */
h1{
font-size: 2rem;
background-color: aquamarine;
}
h3{
font-size: 1.25rem;
background-color: lightblue;
}
p{
font-size: 1rem;
text-align: justify;
background-color: pink;
}
/* iphone 678 */
@media screen and (max-width: 375px){
*{ font-size: 14px; } /* 기본폰트 */
}
/* iphone 5 & se */
@media screen and (max-width: 320px){
*{ font-size: 12px; } /* 기본폰트 */
}
</style>
</head>
<body>
<h1>가장 큰 제목</h1>
<h3>작은 제목</h3>
<p>
파란 자랑처럼 차 슬퍼하는 않은 봅니다. 부끄러운 시와 이름과, 가을 아무 않은 있습니다. 한 아스라히 그리고 있습니다. 내 무엇인지 청춘이 토끼, 지나가는 시인의 이런 된 별에도 봅니다.
</p>
</body>
</html>- 공통 CSS에는 기본 폰트를 16px로 해서 iphone plus들의 기본 크기를 적어줍니다.
- 그리고 미디어 쿼리에 각각의 기본 폰트를 적어줍니다. iphone 6/7/8은 14px, iphone 5는 12px로 설정합니다.
- 그리고 공통 CSS에서 rem을 적으면 각각의 글자크기로 들어가는 겁니다.
- h1태그를 2 rem으로 했죠? 2배라고 준거잖아요? 그럼 iphone plus일 때는 32px, iphone 6/7/8은
## 결과 비교해서 보기
- 결과는 px과 크게 다르지 않습니다. 알아서 p태그가 4줄에 마지막 줄이 반이 넘지 않는 것을 확인할 수 있습니다.
- 대신 코드를 한 번씩 적었다는 것입니다. 기본 root값(전체 선택자)을 다르게 하고 rem을 쓰면 알아서 계산해서 처리해주는 거죠.
- 글자 크기가 phone plus일 때는 32px, iphone 6/7/8은
- rem단위를 사용하면 코드를 많이 줄일 수 있습니다.
5. 정말 상대적인 단위 - vw, vh
- 반응형 웹은 PC에서는 창 사이즈를 resize 해서 많이 봅니다.
- 그렇기 때문에 유동형 사이즈를 쓰는 것이 아닌 경우엔 일일이 줄일 수밖에 없는데, 그럼 너무 힘들겠죠?
- 미디어 쿼리를 사이즈마다 적어서 글자크기나 요소 크기를 줄인다는 것은 정말 힘든 일이겠죠?
- 그래서 창 사이즈(뷰포트)에 반응해서 크기가 상대적으로 바뀌는 단위도 나온 겁니다.
- vw는 viewport width를 줄인 말로 창사이즈 중 가로폭의 1%를 크기로 갖습니다. 그러니까 1vw를 주면 폭이 1000px이면 10px로 처리되는 거죠.
- vh는 viewport height를 줄인 말로 창사이즈 중 높이의 1%를 크기로 갖습니다.
- 우린 vw로만 단위를 확인해보겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>사이즈 단위</title>
<style>
.text01{ font-size: 30px; } /* 절대적 단위 */
.text02{ font-size: 3vw; } /* 상대적 단위 - 창사이즈가 1000px일때 30px */
</style>
</head>
<body>
<h1 class="text01">제목태그 - px단위사용</h1>
<h1 class="text02">제목태그 - vw단위사용</h1>
</body>
</html>
## 결과 보기
- 위쪽 글자는 창 사이즈를 바꿔도 고정으로 절대 크기가 바뀌지 않습니다.
- 아래쪽 글자는 창 사이즈에 따라 상대적으로 변화되는 것 확인되시죠?
- vw는 꼭 글자크기로만 하지 않고, 요소 크기 및 마진, 패딩에도 잘 사용할 수 있습니다.
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 38강 CSS의 변수 - var() 함수 (0) | 2022.09.15 |
|---|---|
| [CSS3강좌] 36강 유동형 사이즈와 유동형 그리드 - 오쌤의 니가스터디 (0) | 2022.08.05 |
| [CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ }) (0) | 2022.08.04 |
| [CSS3강좌] 34강 CSS filter속성 - 오쌤의 니가스터디 (0) | 2021.07.01 |
| [CSS3강좌] 33강 폰트가 깨져 보일때 해결법(IE) (0) | 2021.02.10 |
