1. 반응형 웹 (Responsive Web)
- 하나의 HTML 파일과 하나의 URL로 각 기기 혹은 환경에 최적화된 웹페이지를 제공하는 것
- 모바일 기기 발전 초기에는 별도의 모바일 페이지를 운영하였는데 PC/모바일 두 가지 웹을 동시에 제작/관리해야 하는 문제가 발생해야 함에 따라 반응형 웹이 등장하였다.
- 장점
(1) 유지보수가 간편하다 : 모바일, 태블릿, 데스크톱 등 다양한 환경에 대한 디자인을 하나의 파일에서 관리
(2) 마케팅에 용이하다 : 웹 마케팅에서는 접근성이 중요하기 때문
(3) SEO에 유리하다 : 반응형 웹은 하나의 주소와 하나의 파일만을 가지기 때문에 검색 엔진에 더 많이 노출되고 광고 비용을 줄일 수 있다. (PC/모바일 웹을 각각 운영하는 경우 무슨 정보가 정확한지 판단하기 어려워 검색엔진 우선순위에서 밀리며 광고 비용 역시 각각 들어가게 되어 비효율적이다.)
(4) 미래지향적이다 : 스마트TV, 냉장고 등 다양한 크기의 스마트 기기가 등장하는데 이러한 다양한 크기 및 환경에도 제약 없이 최적화가 가능하다.
2. 모바일 퍼스트
- 반응형 웹의 중요한 개념으로 UX를 디자인할 때 PC보다 모바일을 우선시한다는 뜻이다 (모바일 사용자가 더 많기 때문)
- PC용 고사양 웹페이지가 저사양 모바일 기기에서도 불편함 없이 구현되는 것에 초점을 맞춘다.
- 모바일의 제약
(1) 모바일 기기의 스크린 크기
(2) 네트워크 속도 및 품질
(3) 사용하는 모드
→ 이를 극복하기 위해 네비게이션보다 컨텐츠를 중심으로 하고 불필요한 기능·형식·꾸미기·이동 등을 최소화하여 모바일 사이트를 구현한다.
ex) 웹 메뉴를 버튼으로 축소시키고 첫 화면부터 컨텐으를 보여준다.
3. viewport (meta 태그)
- 웹 페이지에서 사용자에게 보이는 영역을 지정해준다. (visible area)
- width : 뷰포트의 가로 크기 지정
- device-width로 지정시 기기의 스크린에 뷰포트 너비를 맞춘다.
ex) <meta name="viewport" content="width=device-width">
- 미지정하거나 100% 지정시 기본값인 980px로 적용된다.
- initial-scale : 페이지에 처음 접속했을 때 확대 비율 설정
- 1로 설정시 CSS 픽셀과 화면에 보여질 픽셀이 1:1비율 이룸
ex) <meta name="viewport" content="initial-scale=1">
- 값이 1보다 작으면 페이지가 축소되어 보이고 1보다 크면 확대되어 보인다.
- user-scalable : 확대/축소 가능 여부 설정
- yes(디폴트)와 no로 지정할 수 있다.
- minimum-scale : 뷰포트의 최소 배율값 설정 (0~10)
- maximum-scale : 뷰포트의 최대 배율값 설정 (0~10)
4. 미디어 쿼리 (media query)
- CSS3부터 등장하였으며 조건에 따라 다른 스타일을 적용할 수 있게 해준다.
- 크게 네 가지 방법으로 활용 가능하다.
(1) <link>
<head>태그 안의 <link>태그에 media 속성을 정의함으로써 특정 조건을 만족할 때만 해당 CSS 파일을 불러온다.
ex) <link href="mobile.css" media="screen and (min-width : 512px) and (max-width : 1024px)" rel="stylesheet">
(2) <style>
<head>태그 안의 <style>태그에 media 속성을 정의함으로써 특정 조건 만족할 때만 해당 스타일을 적용시킨다.
<style type="text/css" media="screen and (min-width : 512px) and (max-width : 1024px)">
div {
color : red;
}
</style>
(3) <style> - @import
import문의 조건 충족시 해당 CSS 파일을 불러온다.
<style>
@import url(mobile.css) screen and (min-width : 512px) and (max-width : 1024px);
</style>
(4) CSS 파일 내부
CSS 파일 혹은 스타일 내부에 직접 미디워 쿼리를 작성한다.
@media screen and (min-width : 512px) and (max-width : 1024px) {
div {
color : red;
}
}
- 미디어 쿼리 구문은 '미디어 유형/논리 연산자/특성'으로 구성되며 대소문자를 구별하지 않는다.
- 미디어 유형
(1) all : 모든 디바이스 대상 (디폴트)
(2) screen : 화면 대상
(3) print : 인쇄결과물 혹은 인쇄 미리보기 문서
→ 보통은 all 혹은 screen을 활용한다.
- 논리 연산자
(1) and : 모든 쿼리가 참이여야 함
(2) not : 모든 쿼리가 거짓이여야 함
(3) , : 하나라도 참이면 됨 (OR의 기능)
(4) only : 미디어 쿼리를 지원하는 브라우저에만 적용
ex) @media only screen { }시 미디어 쿼리 지원하지 않는 브라우저에서는 해당 스타일이 무시된다.
- 특성
(1) width : 뷰포트 너비
(2) height : 뷰포트 높이
(3) aspect-ratio : 뷰포트 가로세로비율
(4) orientation : 뷰포트 방향 (가로/세로 길이를 비교하여 자동 가로/세로모드가 적용된다)
- Scss의 mixin을 활용하여 미디어 쿼리를 편리하게 관리할 수 있다. (분기점을 변수로 관리) → 유지보수 용이
'프론트엔드 기본개념 복습 > CSS' 카테고리의 다른 글
| [CSS] currentColor (0) | 2022.04.09 |
|---|---|
| [CSS] Grid (0) | 2022.02.26 |
| 2021-09-22 Scss, styled-components (0) | 2021.09.23 |
| 2021-09-17 CSS Inline과 Block 비교 (0) | 2021.09.17 |
| 2021-09-17 CSS 상속과 캐스케이딩 (0) | 2021.09.17 |