반응형 웹
참고(출처): 유노코딩(https://www.youtube.com/watch?v=yRyphOqSFKo&list=PLFeNz2ojQZjvPhBMUy3-641YBOOyLrXYS&index=1)
개요
반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 의미
기기에 최적화된 콘텐츠를 계속해서 생산해내는 것은 현실적으로 어렵기 때문에, 사용하는 기기에 적절하게 맞춰지는 사이트를 개발하는 것이 바람직
⇒ 반응형 웹사이트를 만드는 것이 좋다.(반응형 웹의 가장 핵심 키워드는 ‘가변성’
기기에 따라 다른 화면 크기에 대응하기 위해, 웹문서에 viewport 속성에 대한 마크업이 추가 되어야 한다.
상대 단위 em, rem
절대 길이 단위 px
입문 레벨에서 가장 많이 사용하는 단위 px(픽셀)은 절대 길이 단위
px은 어떤 상황에서도 동일한 값을 유지, 가변성이 없음
상대 길이 단위 em, rem
- em과 rem은 박스에서 텍스트 크기를 조절할 때 사용하는 단위
- em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미
- em으로 내, 외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 한다
※ em과 rem은 주변 상황에 따라 그 크기를 달리할 수 있는 가변성을 지니고 있지만, 브라우저나 기기 화면에 크기에 따라 크기가 달라지는 단위는 아님
화면 크기에 맞춰 반응하는 단위
vw, vh, vmin, vmax
| 속성값 | 의미 |
|---|---|
| vw | 뷰포트 너비의 100분의 1 |
| vh | 뷰포트 높이 100분의 1 |
| vmin | 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 |
| vmax | 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 |
가변 레이아웃
% 단위
- %단위는 백분율 값을 나타낸다.
- 보통 부모 요소와의 상대적 크기를 지정할 때 사용
- 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용가능
가변 레이아웃 정리
- 가변 레이아웃에는 %단위가 주로 사용
- 너비와 여백은 부모 요소의 너비에 비례해서 계산
- 높이는 부모 요소의 높이에 비례
- 글자 크기는 부모 요소의 글자 크기에 비례
CSS 함수 개념과 calc()
함수란?
주어진 인수에 따라 정해지는 값을 일컫는 표현
CSS 함수
CSS의 함수는 괄호 안에 인수를 전달, 인수에 따른 결과값을 속성에 적용
calc()
- 계산식의 결과를 속성값으로 지정 가능
- 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다.
- 표현식은 단순 계산식이면 무엇이든 가능
미디어 쿼리
미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)
화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많음
미디어 쿼리 구성 요소
- 미디어 타입
- 조건에 대한 물음(쿼리)
@media 미디어_타입 and (조건에_대한_물음) {
/*
미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일 선언문
*/
}미디어 타입과 쿼리
| 속성명 | 정의 |
|---|---|
| min-width | 디스플레이 영역의 최소 너비 |
| max-width | 디스플레이 영역의 최대 너비 |
| min-height | 디스플레이 영역의 최소 높이 |
| max-height | 디스플레이 영역의 최대 높이 |
| orientation | portrait 또는 landscape 감지 |
| color | 기기의 색상당 비트 수 |
| color-index | 출력 기기의 색상 테이블 수 |
| aspect-ratio | 디스플레이 영역의 너비와 높이의 비율 |
link 태그에 미디어 쿼리 추가
<link rel="stylesheet" href="style.css" media="screen and (max-width: 768px)">@import 구문을 이용한 추가
@import url("style.css") screen and (max-width: 768px);가변 이미지
이미지 요소에도 상대 단위 em, vw, % 등을 얼마든지 사용 가능
※ 브라우저가 대개 이미지의 비율을 유지한다는 점
※ 이미지가 무작정 커지는 것을 경계해야 한다는 점
이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있다.
max-width
CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 한다.
%로 지정하면 부모 요소보다 커질 수 없음!
picture
HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다.
<picture>
<source srcset="desktop.png" media="(min-width: 1200px)">
<source srcset="tablet.png" media="(min-width: 800px)">
<img src="mobile.png">
</picture>가변 동영상
이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를 동영상도 똑같이 적용할 수 있다.
※ 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다.
유튜브 동영상 등을 embed하면 동영상의 실제크기가 원하는 만큼 변하지 않는 경우가 생김
⇒ why? 동영상 플레이어 자체에 다양한 속성들이 존재, 자체적인 동영상 플레이어에서 자체적으로 처리 방법이 있을 것으로 추측
⇒ Solution: 여백을 하나 만들고, 절대값으로 고정시키는 방법
<style>
.player {
padding-top: 종횡비%;
position: relative; //위치를 고정시킴
}
.iframe {
position: absolute; //부모 요소(.player) 기준으로 절대값으로 고정
top: 0; left: 0;
width: 100%;
height: 100%;
}
</style>
...
<div class="player">
<iframe width="560" height="315" ...>
</div>종횡비 계산: height / width * 100
모듈화 디자인
컴포넌트 만들기
- 반응형 웹 개발의 대세 ‘페이지 만들기’ ⇒ ‘컴포넌트 만들기’로 이동
- 웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적으고 재사용이 가능한 모듈을 뜻한다.
- 컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있다.
모듈화 디자인
여러개의 페이지는 각가의 다양한 레이아웃을 가졌지만, 페이지를 구성하는 컴포넌트의 형태는 비슷한 경우가 많아 컴포넌트에 초점을 맞추어 개발하면 웹을 만들때 일이 줄어 들게 된다.
⇒ 모듈화란? 개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업
모듈화의 장점
- 반응형 컴포넌트를 만들고 그것을 조립하면 자연스럽게 반응형 페이지가 된다.
- 스타일 재사용이 용이, 필요한 경우 추가 스타일을 적용
- 페이지의 일관성을 유지하기 용이
