웹 하나로 모바일과 태블릿, 데스크탑 모두 적용시킬 수 있는 반응형 웹을 만들고 싶어서 HTML과 CSS를 복습할 겸 미니 프로젝트를 만들어보기로 했다!
반응형 웹의 기본 viewport
✓ viewport란?
스마트폰 화면에서 실제 내용이 표시되는 영역이다.
뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소해서 표시할 수 있다.
<meta name="viewport" content="<속성1=값>,<속성2=값>,...">옵션은 여러가지가 있지만 가장 많이 쓰이는 코드만 이해하고 넘어간다.
<meta name="viewport" content="width=device-width, initial-scale=1">웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정한 것이다.
1. 가변 그리드 레이아웃
기기의 크기에 따라 레이아웃이 변하지 않으려면 요소들의 너비 값을 픽셀같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정해야 한다.
🚨 실제 화면에서 차지하는 비율이 아니라 부모 요소에서 자식 요소가 차지하는 비율로 너비를 지정해야 한다.
✏️ 가변 글꼴
- em - 부모 요소의 font-size가 1em (부모 요소의 크기에 따라 자식 요소의 글자 크기가 달라짐.)
- rem - 처음부터 기본 크기를 지정함.
✏️ 가변 이미지
- max-width: 100% - 간단하지만 파일의 크기가 크거나 텍스트가 포함된 이미지일 경우 부적합.
- img 태그와 srcset 속성 - 화면 너비에 따라 다르게 표시할 이미지
<img src="<이미지>" srcset="<이미지1>,<이미지2>,...">2. 미디어 쿼리
특정 미디어에서 어떤 CSS를 적용할 것인지 지정한다.
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
@media screen and (min-width:320px) and (max-width:1024px)3. 플렉스 박스 레이아웃
그리드 레이아웃을 기본으로 플렉스 박스를 원하는 위치에 배치하는 것.
반응형 웹 페이지를 작성할 때 편리하게 사용할 수 있다.
display: flex | inline-flex
flex : 플렉스 박스를 박스 레벨 요소로 정의
inline-flex : 플렉스 박스를 인라인 레벨 요소로 정의🚨 브라우저마다 지원 방식이 달라 브라우저 접두사를 붙여야 한다.
display:-webkit-box; /* iOS 6 이하, 사파리 3.1 */
display:-moz-box; /* 파이어폭스 19 이하 */
display:-ms-flexbox; /* IE 10 */
display:-webkit-flx; /* 웹킷 구 버전 */✏️ flex-direction 속성 : 플렉스 방향 지정하기
flex-direction : row | row-inverse | column | column-inverse
row - 왼쪽에서 오른쪽으로 배치
row-inverse - 오른쪽에서 왼쪽으로 배치
column - 위쪽에서 아래쪽으로 배치
column-inverse - 아래쪽에서 위쪽으로 배치✏️ flex-wrap 속성 : 플렉스 항목을 한 줄 또는 여러 줄로 배치하기
flex-wrap : no-wrap | wrap | wrap-inverse
no-wrap - 플렉스 항목을 한 줄에 표시. 기본값.
wrap - 플렉스 항목을 여러 줄에 표시
wrap-inverse - 플렉스 항목을 여러 줄에 표시하되 반대 방향으로 배치.✏️ flex-flow 속성 : 플레스 방향과 여러 줄의 배치 한꺼번에 지정하기
flex-flow : <플렉스 방향> <플렉스 줄 배치>✏️ order 속성 : 플렉스 항목의 배치 순서 바꾸기
order : 0 | 숫자다른 옵션도 많지만 많이 쓰이는 옵션만 적어보았다.
크롬의 디바이스 모드
내가 클론하고 있는 나이키 공식사이트로 예를 들었다.
F12로 개발자 도구를 열고 디바이스 모드를 클릭한다.
✏️ 간단하게 클론하여 다음 글에서 소개해보겠다.
첫 프로젝트 때 플렉스 박스를 제대로 알고 활용했었다면 디자인에 시간을 많이 뺏기지 않고 깔끔하게 코드를 작성할 수 있었을 텐데 너무 아쉽다.
이게 왜 🐷