728x90
1. 먼저 반응형웹을 적용하기 위해서는 HTML head 부분에 meta viewport를 설정해주어야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1"># 반응형 웹 디자인
패블릿, 태블릿, 데스크탑, 게임콘솔, 티비, 웨어러블 기기 등등 정말 다양한 화면 크기가 있습니다.
화면 크기는 언제나 변하기 때문에 사이트는 어떤 화면 크기에도 언제나 적응 가능하도록 설계되어야 합니다.
미디어 쿼리(@media)는 장치에 따라 각기 다른 레이아웃을 만들거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹 페이지를 작성할 때 사용합니다.
부트스트랩은 CSS 미디어 쿼리를 사용해 반응형으로 휴대폰에서부터 태블릿, 데스크탑까지 적용되는 사이트를 만들 수 있도록 도와주는 HTML, CSS, JS 프레임워크입니다.
적절한 렌더링과 확대/축소를 위해 부트스트랩 시작 페이지에서는 다음 코드를 <head>에 추가하라고 명시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
사용방법
1. viewport의 속성
-
width: viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다.
- height : viewport의 세로 크기를 조정합니다.
- initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.
- minimum-scale : viewport의 최소 배율값, 기본값은 0.25입니다.
- maximum-scale : viewport의 최대 배율값, 기본값은 1.6입니다.
-
user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes입니다.
2. 정의된 속성 값
- device-width : 기기의 가로 넓이 픽셀 값 (웹페이지의 가로(width) 값은 기기가 사용하는 가로 넓이 값(device-width) 만큼 적용하여 사용하라는 의미)
- device-height : 기기의 세로 높이 픽셀 값
MEMO
width=device-width를 추가함으로써 전체적인 웹 페이지의 width가 설정되고 @media 에서 선언된 width의 범위에 따라 css가 적용되어 결과적으로 반응형 웹을 만들 수 있는것 입니다.
width=device-wiedth : 화면의 넓이를 디바이스의 넓이로 지정하는 것.
initial-scale : 초기 화면 배율
4개의 반응형 분기점
- 낮은 해상도의 PC, 태블릿 가로 : ~1024px
- 테블릿 가로 : 768px ~ 1023px
- 모바일 가로, 태블릿 : 480px ~ 767px
- 모바일 : ~ 480px
WHAT IS RESPONSIVE WEB DESIGN?
https://iformatlogic.com/plugin/article/view/97/what-is-responsive-web-design
History of Responsive Web Design
https://marutitech.com/responsive-web-design-key-element-of-web-strategy/
Responsive Web Design- Key Element of Web Strategy
Responsive Web Design, a web development technique which effectively optimizes the browsing experience by crafting website which fits into the user's device.
marutitech.com
728x90
반응형
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML] HTML 웹사이트를 분석하는 꿀팁 (유투브 드림코딩 필기) (0) | 2023.01.04 |
|---|---|
| [CSS] 기본셀렉터 완전 정리 ( 유투브 드림코딩 필기) (0) | 2023.01.04 |
| [CSS] 2023올해의 색상예측, 나무위키_헥스코드, checkbox색변경☞리액트적용 (0) | 2022.12.30 |
| [CSS] Normalize.css vs Reset.css (작성중_20221229) (0) | 2022.12.29 |
| [CSS] Chrome창으로 CSS보는법 [스타일 | 계산됨 ] (0) | 2022.12.28 |
댓글