반응형 웹과 미디어 쿼리

반응형 웹 알아보기

웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 표현하는 방식

뷰포트 : 스마트폰 화면에 실제 내용이 표시되는 영역
뷰포트 지정하기 : <head> 태그 사이에 작성

기본형
<meta name="viewport" content="속성1=값1", "속성2=값2",...>

웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정

<meta name="viewport" content="width=device-with, initial-scale=1">

미디어 쿼리 알아보기

사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법

미디어 쿼리 구문

기본형
@media [only | not] 미디어 유형 [and 조건] * [and 조건]

미디어 유형이 screen이면서 최소 너비가 768px이고 최대 너비는 1439px일 경우에 적용할 CSS를 정의

@media screen and (min-width: 768px) and (max-width: 1439px) {
  ...
}

그리드 레이아웃 알아보기

웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것

시각적으로 안정된 디자인을 만들 수 있다.

업데이트가 편한 웹 디자인을 구성할 수 있다.

요소를 자유롭게 배치할 수 있다.

그리드 레이아웃 만드는 방법
플렉서블 박스 레이아웃 (= 플렉스 박스) : 그리드 레이아웃을 기반으로 각 박스를 원하는 위치에 따라 배치하는 것
CSS 그리드 레이아웃 : 수평과 수직 어느 방향이든 배치할 수 있다.

플렉스 박스 레이아웃 알아보기

플랙스 박스 레이아웃에서 사용하는 용어

용어 정리

플렉스 컨테이너(부모 박스): 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소

플렉스 항목(자식 박스): 플렉스 박스 레이아웃을 적용할 대상

주축(main axis): 플렉스 항목을 배치하는 기본 방향 왼쪽(시작점)에서 오른쪽(끝점)으로 배치

교차축(cross axis): 주축과 교차하는 뱡향, 기본적으로 위(시작점)에서 아래(끝점)로 배치

플렉스 박스 항목을 배치하는 속성
justify-content : 주축 방향의 정렬 방법
align-items : 교차축 방향의 정렬 방법
align-self : 교차축에 있는 개별 항목의 정렬 방법
align-content : 교차축에서 여러 줄로 표시된 항목의 정렬 방법

플렉스 컨테이너를 지정하는 display속성
flex : 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치
inline-flex : 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치

플렉스 방향을 지정하는 flex-direction속성
row : 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치, 기본값
row-reverse : 주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치
column : 주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치
column-reverse : 주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치

플렉스 항목의 줄을 바꾸는 flex-wrap속성
nowrap : 플렉스 항목을 한 줄에 표시, 기본값
wrap : 플렉스 항목을 여러줄에 표시
wrap-reverse : 플렉스 항목을 여러줄에 표시하되, 시작점과 끝점이 바뀜

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow속성
```
#opt1 { flex-flow: row wrap; } /* 왼쪽에서 오른쪽, 여러 줄 */
#opt2 { flex-flow: row nowrap; } /* 왼쪽에서 오른쪽, 한 줄 */
```
주축 정렬 방법을 지정하는 justify-content속성
flex-start : 주축의 시작점에 맞춰 배치
flex-end : 주축의 끝점에 맞춰서 배치
center : 주축의 중앙에 맞춰 배치
space-between : 첫번째와 마지막 항복을 배치 후 나머지를 그 사이에 같은 간격으로 배치
space-around : 모든 항목을 주축에 값은 간격으로 배치

교차축 정렬 방법을 지정하는 align-items속성
flex-start : 교차축의 시작점에 맞춰 배치
flex-end : 교차축의 끝점에 맞춰서 배치
center : 교차축의 중앙에 맞춰 배치
baseline : 교차축의 문자 기준선에 맞춰 배치
stretch : 플렉스 항목을 늘려 교차축에 가득 차게 배치

특정 항목만 정렬 방법을 지정하는 align-self속성
align-items속성은 플렉스 컨테이너에서 사용하지만 align-self는 플렉스 항목에서 사용

CSS 그리드 레이아웃 사용하기

Author And Source

이 문제에 관하여(HTML&CSS(9)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ajt1097/HTMLCSS9

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML&CSS(9)