반응형 웹이란 사용자의 해상도(데스크탑,테블릿,스마트폰)에 따라
레이아웃을 최적화 해서 보여주는 웹을 뜻한다
반응형 웹을 만들수 있게 해주는게 CSS에서는 미디어 쿼리 라는게 있다
일단 미디어컬을 알기전에 뷰포트를 알아야 한다고 한다
우리가 코드를 작성하기 제일 처음 html을 생성을 하면
해당 html코드가 나온다
여기서
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
해당 코드가 뷰포트 이다
예를 들어 데스크탑에선 콘텐츠가 1500px이였는데
최대 넓이가 700px정도인 모바일로 1500px인 콘텐츠를 보려면
좌우로 스크롤을 해야될 것이다
보통 상하로 스크롤하기 떄문에 좌우로 스크롤이 있으면
엄청 불편할 것 이다
그래서 content="width=device-width
content="width=device-width 가 넓이 = 사용자의 디바이스 넓이 라는 뜻이고
initial-scale=1.0"
initial-scale=1.0 은 1대1 비율이라는 뜻이다
이것이 우리가 html을 생성하면 만들어지는 뷰포트이다
미디어 쿼리를 직접 코드를 쳐보면서 익혀보자
이렇게 태그 선택자로 <body> 태그의 백그라운드 색을 옐로우로 주고
이렇게 노란색 배경을 만들었다
그리고 미디어 쿼리 를 적용시켯다
해당 미디어 쿼리 속성은 screen(화면) 이 width 600px(넓이가 600px)이 되었을때
<body> 태그들의 백그라운드 색이 빨간색으로 바뀐다는 뜻의 속성값이다
그러면 이제 웹을 width 600px로 바꿔보자
F12로 개발자 옵션에 들어가서 1번 디바이스 버튼에 들어가면 임의로 크기를 조절할 수 있다
넓이를 600으로 맞추면 백그라운드 색이 600px로 되는걸 볼 수 있다
하지만 모든 스마트폰이 넓이가 600px인건 아니기 때문에
max-, min- 이라는 접두사를 사용한다
이렇게 max-width를 1000px로 주면 넓이가 1000px 이하인 웹에선 전부 적용이 된다
이렇게 미디어 쿼리를 하나 더 만들어서 max-width를 600px로 지정했다
코드는 순서상으로 같은 코드가 있으면 밑에있는 코드를 적용시킨다
그러면 width 가 600px 이하로 가면 파란색
600초과 1000이하면 빨간색
1000초과면 노란색이 된다
반응형 웹은 미디어쿼리의 이러한 원리를 이용한 거라고 한다
넓이가 몇 px이하가 되면 컨텐츠가 row 에서 column으로 변환 등등
미디어 쿼리 중 orientation 이라는 속성도 있다
landscape 는 스마트폰의 가로모드
portraint는 세로모드 로 생각하면 된다
그래서 orientation 속성으로 가로 또는 세로 모드일때
CSS를 적용시킬 수 있다
'css' 카테고리의 다른 글
| 반응형 웹 만들어 보기 (0) | 2023.09.25 |
|---|---|
| 레이아웃을 만들기 위한 CSS (0) | 2023.09.24 |
| overflow 속성 (0) | 2023.09.19 |
| HTML 요소의 위치 정의 (2) | 2023.09.09 |
| border 스타일링 (0) | 2023.09.08 |
