반응형 웹에 필요한 4가지 기본 개념
🍎 가변 그리드
Fluid Layout / Flexible Layout / Flexible Grid
반응형은 px로 작업할 수 없다. 대신 퍼센트(%)로 작업해야한다.
퍼센트(%)로 작업해야지 가변 폭에 따라 내용들도 가변적으로 늘어났다 줄어들었다 할 수 있다.
💡 가변, 가변적이다
"어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것"
💡 그리드, 그리드 작업
그리드란 격자, 눈금을 말함
웹 디자인에서는 웹페이지의 가로크기, 세로크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용
🍎 미디어쿼리 & 뷰포트
퍼센트로만 css를 작업한다고해서 반응형 웹이 되는 것은 아니다.
비율로 제작 시 가변적으로 작동하긴 하나 기기나 환경에 따라 구조를 바꾸지는 못한다.
그래서 화면을 제어할 '뷰포트' & 화면의 크기나 환경을 감지하여 구조를 바꿔줄 '미디어 쿼리'가 필요한 것이다.
💡 미디어쿼리 (Media Queries)
: 어떤 종류의 미디어인지? 미디어의 화면의 크키는 어느 정도 되는지?
미디어를 감지하여 웹사이트를 변경하는 기술
쿼리 : 질의 -> 컴퓨터에게 미디어의 종류와 크기를 물어보니까
💡 뷰포트 (Viewport)
: 화면에 보이는 영역을 제어하는 기술 (미디어 쿼리가 기기의 화면 크기를 정확하게 감지하도록 도와준다)
PC는 사용자가 지정한 해상도에 따라 보이는 영역이 결정, but 스마트폰 등 스마트 기기류들은 보이는 영역이 기본 설정값으로 자동으로 설정된다. 그래서 미디어 쿼리만 사용하면 스마트 기기에서 화면의 크기를 정확하게 감지할 수 없다.
뷰포트를 제어하기 위해서는 <head></head> 태그 사이에 뷰포트 제어하기 위한 <meta>태그를 작성해야한다.
<meta> 태그를 이용해 화면의 크기, 배율 등을 조절해 줘야 미디어 쿼리가 정상적으로 작동할 수 있다.
뷰포트 예시
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"미디어 쿼리 작성 예시
/* 웹 브라우저 가로 폭 상관없이 항상 */
body {
background: #f00;
}
/* 웹 브라우저 가로 폭이 320px 이상일 때 */
@media all and (min-width:320px) {
body {
background: #ff0;
}
}🍎 플렉서블 박스
가변적인 박스를 만드는 기술, 웹사이트의 구조설계를 위한 새로운 기술
CSS의 flex, grid 등의 display 속성을 이용해 가변적인 박스를 쉽고 빠르게 만들 수 있다.
참고>> Do it! 반응형 웹페이지 만들기
'Mark Up & StyleSheet > 반응형' 카테고리의 다른 글
| [반응형] 가변(반응형) 공식 (1) | 2023.12.28 |
|---|---|
| [반응형] 반응형 웹에 대해서 (0) | 2023.12.27 |
| [반응형] font size converter (px, em, vw...) 사이트 (0) | 2023.12.18 |
| [반응형] Break Point (화면에 대한 분기점) (0) | 2023.05.15 |
| [반응형] Media Query 사용하기 (0) | 2023.05.15 |