■ 뷰포트
반응형 웹에서는 제일 먼저 뷰포트를 설정하여야 합니다.
뷰포트(Viewport)는 컴퓨터나 스마트 폰의 브라우저 화면 크기 를 말하는데, 메뉴바와 탭 영역을 제외한 영역을 의미합니다.
<meta name="viewport" content="width=device-width, inital-scale=1.0">
'width=device-width'는 웹 페이지의 너비를 접속 기기의 뷰포트 너비와 일치시켜서 화면에 표시하라고 웹 브라우저에게 알려주는 것입니다.
■ 폰트 크기 단위 : em
em 단위에서는 영문자 M의 너비를 1em으로 계산하여 이에 대한 상대적인 크기로 글자 크기를 표현합니다.
1em은 픽셀 값으로 변환하면 16px이 된다. 2em은 16px x 2 = 32px이 된다. 또한 0.5 em은 8px의 값을 가집니다.
< !DOCTYPE html>
< html>
< head>
< meta charset=" utf-8" >
< meta name=" viewport" content=" width=device-width, inital-scale=1.0" >
< style>
.title1 { font-size: 1.25em; }
.title2 { font-size: 1.5em; }
.title3 { font-size: 1.75em; }
< /style>
< /head>
< body>
< h3 class=" title1" > 안녕하세요.< /h3>
< h3 class=" title2" > 안녕하세요.< /h3>
< h3 class=" title3" > 안녕하세요.< /h3>
< /body>
< /html>
ex1-1.html의 실행 결과
새 창에서 보기
em은 16px를 기준으로 한 상대적인 글자 크기를 나타내는 데
em이 사용된 요소의 하위 요소에서는 부모 요소의 em을 상속 받아 글자 크기가 정해집니다.
< style>
#a { font-size: 1em; }
#a span { font-size: 2em; }
#b { font-size: 2em; }
#b span { font-size: 2em; }
< /style>
< body>
< div id=" a" >
안녕하세요.< span> 반갑습니다.< /span>
< /div>
< div id=" b" >
안녕하세요.< span> 반갑습니다.< /span>
< /div>
< /body>
ex1-2.html의 실행 결과
새 창에서 보기
■ 폰트 크기 단위 : rem
rem 단위에서는 em 단위에서와 달리 상속의 개념이 존재하지 않습니다. 브라우저의 기본 크기인 16px을 1rem으로
한 상대적인 크기를 나타냅니다. 2em은 16px의 두 배인
32px, 3em은 16px의 3배인 48 px을 의미한다. 그리고 0.5em은 16px의 1/2인 8px을 나타냅니다.
< style>
#a { font-size: 1rem; }
#a span { font-size: 2rem; }
#b { font-size: 2rem; }
#b span { font-size: 2rem; }
< /style>
< body>
< div id=" a" >
안녕하세요.< span> 반갑습니다.< /span>
< /div>
< div id=" b" >
안녕하세요.< span> 반갑습니다.< /span>
< /div>
< /body>
ex1-3.html의 실행 결과
새 창에서 보기
■ 박스 크기 단위 : vw/vh
1vw = viewport 너비의 1% (500px 너비 => 1vw = 5px)
1vh = viewport 높이의 1% (1000px 높이 => 1vh = 10px)
vw/vh 단위의 사용 예
ex1-10.html
< !DOCTYPE html>
< html lang=" ko" >
< head>
< meta charset=" UTF-8" >
< meta name=" viewport" content=" width=device-width, initial-scale=1.0" >
< title> vw / vh 예제< /title>
< style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
width: 50vw;
height: 50vh;
background-color: skyblue;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2vw;
color: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
< /style>
< /head>
< body>
< div class=" box" > 50vw × 50vh< /div>
< /body>
< /html>
ex1-10.html의 실행 결과
새 창에서 보기