2023. 7. 2. 10:55ㆍ카테고리 없음
반응형 웹페이지란?
다양한 기기나 브라우저 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 제공해주기 위한 방법이다.
- 모바일, 데스크톱, 태블릿 등등…
예전에는 도메인을 달리해서 기기에 따른 웹을 제공했다고 합니다.
ex) www.naver.com / m.naver.com
이제는 웹의 생태계가 다양한 기기로 한번에 제공하기 위해 반응형 웹페이지를 배우는것은 가히 필수적이라고 할 수 있습니다.
그럼 차근차근 알아 봅시다.
뷰포트
컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.
<meta name="viewport" content="width=device-width, initial-scale=1" />vsCode에서 html 코드를 생성해보면, 나오는 코드 이다. content="width=device-width" 는 현재 기기의 넓이를 intial-scale 비율로 (1) width로 쓰겠다는 의미이다.
일단 html에서 뷰포트를 설정하여 넓이를 설정해 줄 수 있는것이다.
CSS 상대 단위 em & rem
절대 길이 단위 px
- px는 어떤 상황에서든 같은 크기를 유지 합니다.
- 어떤 상황에서도 동일한 값을 유지하므로 가변성이 없습니다.
em과 rem
em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위입니다.
em은 부모 요소의 글꼴 크기를, rem은 루트 요소(html)의 글꼴 크기(16px)를 의미합니다.
em으로 내,외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.inner {
display: inline-block;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">감사합니다.</div>
</div>
</body>
</html>
기본적인 html 글꼴 16px 입니다.
.outer {
font-size: 24px;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
background-color: tomato;
}여기서 outer의 폰트 사이즈를 바꾸면 outer의 자식인 inner의 폰트 사이즈가 24px로 바뀔 것이다.
.inner {
font-size: 2rem;
display: inline-block;
width: 200px;
height: 200px;
background-color: tomato;
}여기서 2rem(기본 글꼴 크기 기준)으로 크기를 변경하면 → 16px * 2 = 32px를 기대할 수 있다.
.outer {
font-size: 24px;
}
.inner {
font-size: 2em;
display: inline-block;
width: 200px;
height: 200px;
background-color: tomato;
}여기서 2em으로 크기를 변경하면 → 24px(부모요소의 크기) * 2 = 48px를 기대할 수 있다.
여백을 줄 때의 em은 자신의 글자 크기를 기준으로 여백을 주게 된다. ( 부모의 요소의 글꼴 크기에 영향 x )
- 부모는 24px , 자식은 18px 이지만 padding은 1em → 18px를 받게 된다.
em과 rem : 반응하진 않아요.
em과 rem은 주변 상황에 따라 그 크기를 달리 할 수 있는 가변성을 지니고 있다.
하지만, 브라우저나 기기화면에 크기에 따라 크기가 달라지는건 아니다.
반응 하는 단위들
아래 몇가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위 입니다.
/* 뷰포트 너비의 100분의 1 */
font-size: 1vw;
/* 뷰포트 높이의 100분의 1 */
font-size: 1vh;
/* 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 */
font-size: 1vmin;
/* 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 */
font-size: 1vmax;p {
margin: 0;
font-size: 10vw;
}
- 뷰포트 넓이에 따라 폰트 사이즈를 백분율로 지정할 수 있다.
p {
margin: 0;
font-size: 10vmax;
}
- 높이와 넓이에 따른 조건으로 크기를 정할 수 있다.
가변 레이아웃
박스도 변할 수 있다?!
비율에 기반한 크기 조절
em을 이용해 상대적인 크기의 폰트를 적용할 때 처럼, 레이아웃에도 비율에 기반한 개념을 적용할 수 있습니다.
%
%단위는 백분율 값을 나타냅니다. 부모 요소와의 상대적 크기를 지정할 때 사용합니다. 너비와 높이 여백 뿐 아니라 글자에도 사용할 수 있습니다.
원래의 레이아웃
<style>
.container {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.header {
width: 100%;
height: 100px;
background-color: tomato;
}
.main {
float: left;
width: 600px;
height: 300px;
background-color: orange;
}
.aside {
float: right;
width: 400px;
height: 300px;
background-color: purple;
}
.footer {
clear: both;
width: 1000px;
height: 100px;
background-color: violet;
}
</style>
</head>
<body>
<div class="container">
<div class="header">머리</div>
<div class="main">몸통</div>
<div class="aside">옆구리</div>
<div class="footer">발</div>
</div>
</body>
원래 구현 방식의 레이아웃
간단하고 무난하게 구현할 수 있습니다. 하지만 px로 인한 고정적인 레이아웃 배치가 될 것입니다.
따라서 너비가 작은 기기에 들어오면 고정적인 크기를 제공하게 됩니다.
이를 %를 이용해서 바꿔보겠습니다.
일단 container의 width를 100%로 변경합니다.
벌써 부터 가변성이 느껴지기 시작합니다. main과 aside를 또 비율을 계산해서 넣어 보겠습니다.
.container {
width: 90%;
margin: 0 auto;
text-align: center;
}
.header {
width: 100%;
height: 100px;
background-color: tomato;
}
.main {
float: left;
width: 64%;
height: 300px;
background-color: orange;
}
.aside {
float: right;
width: 36%;
height: 300px;
background-color: purple;
}
.footer {
clear: both;
width: 100%;
height: 100px;
background-color: violet;
}
- 문제 없이 가변성 있는 레이아웃을 설계할 수 있습니다.
.main {
float: left;
width: 64%;
padding: 10%;
height: 300px;
background-color: orange;
}
.aside {
float: right;
width: 36%;
height: 300px;
padding: 10%;
background-color: purple;
}
- 여백을 %로 잡을 때는 부모의 크기에 따라서 여백이 결정 된다.
- 높이는 부모 요소의 높이에 비례해 계산됩니다.
- 글자 크기는 부모 요소의 글자 크기에 비례해 계산됩니다.
CSS 함수
- CSS의 속성 값을 지정할 때도 함수 개념을 적용할 수 있습니다.
함수명(x)
css의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작합니다.
css 함수 : calc( )
calc( )를 이용하면 계산식의 결과를 속성값으로 지정할 수 있습니다. calc( ) 함수는 괄호 안에 표현식을 하나 받고, 표현식의 결과가 최종값이 됩니다.
표현식은 단순 계산식이면 무엇이든 가능합니다.
단순 text area 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.message {
display: flex;
justify-content: space-around;
align-items: center;
height: 100px;
padding: 0.5em;
border: 1px solid black;
font-size: 1.5em;
}
.message_text {
width: 80%;
height: 100%;
border: none;
resize: none;
}
.message_text:focus {
outline: none;
}
.message_send {
width: 20%;
height: 100%;
border-radius: 8px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="message">
<textarea class="message_text"></textarea>
<button class="message_send">버튼</button>
</div>
</body>
</html>
가변 레이아웃 완성
하지만 너비가 넓어 질때의 버튼이 너무 안좋아 보입니다. 이 버튼을 한번 고정으로 해보겠습니다.
이뻐 보입니다. 하지만 한가지 문제점이 있습니다.
브라우저가 넓어 졌을 때 버튼이 고정되어 있기 때문에 불필요한 여백이 생길 수 있습니다.
.message_text {
width: calc(100% - 100px);
height: 100%;
border: none;
resize: none;
}
이 때 calc( )를 이용해서 유동적으로 넓이를 지정해서 해결할 수 있습니다!
미디어 쿼리
미디어 쿼리는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나ㄴ 브라우저의 물리적 속성을 감지할 수 있는 유용한 기능입니다.
아래와 같은 속성이 있습니다.
- 미디어 타입
- 조건에 대한 물음(쿼리)
@media 미디어_타입 and (조건에_대한_물음) {
미디어 타입과 조건을
모두 만족할 때 덮어씌울
스타일 선언문
}@media screen and(max-width : 768px) {
/* 화면의 너비가 768px 이하일 경우에
여기에 정의된 스타일 선언문을
추가 적용할 것이다. */
}미디어타입
- screen : 일반적인 화면
- speach : 화면에 문제가 있는 경우 사용하는 음성전용 화면
조건
- min-width : 조건 이상 일 때
- max-width : 조건 이하 일 때
화면 너비에 따라 img의 크기가 변하는걸 볼 수 있다.
미디어 타입과 쿼리
| 속성 | 정의 |
|---|---|
| min-width | 디스플레이 영역의 최소 너비 |
| max-width | 디스플레이 영역의 최대 너비 |
| min-height | 디스플레이 영역의 최소 높이 |
| max-height | 디스플레이 영역의 최대 높이 |
| orientaion | portrait 또는 landscape 감지 |
| color | 기기의 색상당 비트 수 |
| color-index | 출력기기 색상 테이블 수 |
| aspect-reatio | 디스플레이 영억의 너비와 높이 비율 |
미디어 쿼리 적용의 다른 형태
다음과 같은 방식으로도 미디어 쿼리를 적용할 수 있습니다.
가변 이미지: 이미지의 상대 단위
- 이미지 요소에도 상대 단위를 얼마든지 사용할 수 있습니다.
- 주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점입니다.
- 이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있습니다.
max-width, max-height
- max-width속성은 너비의 최대값을 지정함
- max-height속성은 높이의 최대값을 지정함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이미지 크기</title>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="./img/1.jpg" />
</body>
</html>
- width: 100% 일 때
- max-width : 500px 적용했을 때.
body {
width: 50%;
}
img {
width: 100%;
max-width: 500px;
}
- body(부모)의 가변 넓이에 따라 img의 넓이가 바뀌게 됨.
picture
HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저 특정 조건에 따라 이미지를 반응형을 불러올 수 있음.
<picture>
<source srcset="img/1200.png" media="(min-width: 1220px)" />
<source srcset="img/800.png" media="(min-width: 800px)" />
<img src="img/1.jpg" />
</picture>
picture 태그를 써야 하는 이유
- HTML 태그 구현만으로 반응형 이미지 파일이 로딩되며, 웹 브라우저 너비 변화에 맞춰 동적으로 이미지 너비 또한 변경됩니다.
- 이미지를 위한 CSS 미디어쿼리를 추가로 작성해서 반응형 웹을 관리할 필요가 없습니다.
- CSS 미디어쿼리로 이미지를 관리하는 것보다 간결하며 이미지 로딩 속도가 더 빠릅니다. 당연하지만 자바스크립트로 비동기 이미지를 관리하는 것보다 훨씬 더 빠릅니다.
태그를 지원하지 않는 인터넷 익스플로러와 같은 구형 웹 브라우저에 대해서도 하위 태그인 태그를 통해 폴백(Fallback)을 지원하기 때문에 호환성 문제에 대한 해결 방법도 제공됩니다.
동영상을 가변적으로 처리하기
이미지를 가변 이미지로 처리 했던 것과 동일한 처리를 동영상에도 똑같이 적용할 수 있음.
→ 문제는 동영상 서비스에 따라 그 성질이 조금 달라질 수 있다는 점.
여러해상도를 처리하려면 이미지의 picture 태그 처럼 video에서도 마찬가로 source 태그로 처리하면 된다.
다른 동영상을 embeded하는 경우 단순히 사이즈만 맞추는 것으로는 영상에 대한 사이즈 조작이 불가능하다.
그럼 어떻게 하나요?
정확한 비율을 유지하는 여백을 만들어 그 안에서만 동영상이 보여지게 만드는 기법을 사용한다.
- 종횡비 계산
<iframe
width="560"
height="315"
>
원래 동영상 소스의 높이 / 너비를 이용해서 계산 해서 종횡비를 알아낸다.
- 종횡비 여백 주고 플레이어 창 고정 시키기
.player {
padding: 56.25%;
position: relative;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}<div class="player">
<iframe
width="560"
height="315"
></iframe>
</div>
- 가변적으로 플레이어가 비율에 맞게 조정되는 모습을 볼 수 있다.
이 내용은 입문자를 위한 반응형 웹 기초 강의를 보고 학습한 내용입니다!