미디어 쿼리

미디어 쿼리 구문

- @media 속성을 사용

- 적용할 미디어 대상 지정

- 적용할 css를 지정

- style태그 사이에 정의

- 형식 : @media [not|only] 미디어타입 [and 조건] [and 조건] { / css 코드 */ }

- 속성값

• not : 다음에 지정하는 미디어타입을 제외
• only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 무시
• and : 여러 개를 연결하여 추가 가능

미디어 유형

• all : 지원하는 모든 미디어
• print : 인쇄 장치에서 사용할 css 정의
• screen : 컴퓨터 스크린과 같은 모니터 스크린, 스마트폰 포함
• tv : TV
• aural : 음성 신호 장치(TTS 같은 장비들)
• braille : 점자 표시 장치
• handheld : 패드같은 이동성 장치
• projection : 프로젝트 같은 장비
• tty : 디스플레이 기능이 성능이 낮은 장비들
• embossed : 점자 프린터

웹 문서 기준 가로/세로

- 실제 웹 문서 내용이 표현되는 영역의 가로/세로

- width, height

- min-width, min-height --> 브라우저 사이즈에 대해 컨텐츠가 노출 영역의 변동 최저 값

- max-width, max-height --> 디바이스 구분 용도

- @media screen and (min-width:1440px) { / css 코드 / }

- 너비가 최소 1440px인 화면에서 플레이 되는 스타일

단말기 기준

- 단말기 해상도와 실제 브라우저의 너비가 다름

- device-width, device-height

- min-device-width, min-device-height

- max-device-width, max-device-height

- @media screen and (min-device-width:380px) and (min-device-height:812px) { / css 코드 / }

화면 회전 기준

- orientation : portrait - 단말기 세로모드

- orientation : landscape - 단말기 가로모드

그리드 레이아웃

- 반응형 웹 디자인에서 웹 문서의 요소를 배치하는 기준

- 웹 사이트의 화면을 여러 개의 컬럼으로 나눠서 배치

- 화면을 규칙적으로 배치하고, 레이아웃 일관적으로 관리 편리

- 시각적으로 안정된 디자인

- 업데이트가 편함

- 요소 자유롭게 배치하는 것이 가능

- 구성하는 방법

- - 플렉스 박스 레이아웃

• 수평방향, 수직방향 중 하나를 축으로 정하고 박스를 배치
• 여유 공간이 생길 경우, 너비나 높이를 적절하게 늘리거나 줄일 수 있음
• 주축 : 플렉스 박스의 진행 방향
• 교차축 : 주축과 수직방향
• 플렉스 컨테이너 : display 속성 값으로 flex, inline-flex 사용
• 플렉스 아이템 : 플렉스 컨테이너의 자식관계를 이루는 요소

- - 플렉스 박스의 기본 속성

• display 속성
• • flex : 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치
• • inline-flex : 플렉스 항목을 인라인 레벨 요소로 배치
• • 형식 : display:flex / inline-flex
• flex-direction 속성
• • 플렉스 박스 레이아웃의 주축 방향 지정
• • 형식 : flex-direction:속성값
• • row : 주축 방향을 왼쪽->오른쪽
• • row-reverse : 주축 방향을 오른쪽->왼쪽
• • column : 주축 방향을 위->아래
• • column-reverse : 주축 방향을 아래->위
• flex-wrap 속성
• • 플렉스 아이템의 자동 줄바꿈 여부 처리
• • 형식 : flex-wrap:속성값
• • nowrap : 아이템이 플렉스 컨테이너의 영역을 벗어나도 무시
• • wrap : 아이템이 컨테이너 영역을 벗어나면 줄바꿈
• • wrap-reverse : 아이템이 컨테이너 영역을 벗어나면 wrap의 역방향으로 줄바꿈
• flex-flow 속성
• • flex-direction과 flex-wrap 속성을 한번 사용할 수 있는 단축 속성
• • 형식 : flex-flow:direction wrap
• • 기본값 : flex-flow:row no-wrap
• justify-content 속성
• • 플렉스 아이템을 모두 주축 방향으로 정렬
• • 형식 : justify-content:속성값
• • flex-start : 주축 방향의 시작점 기준으로 정렬
• • flex-end : 주축 방향의 끝점을 기준으로 정렬
• • center : 주축 방향의 중앙을 기준으로 정렬
• • space-between : 플렉스 아이템 사이의 간격이 일정하도록 정렬
• • space-around : 플렉스 아이템의 둘레가 일정하도록 정렬
• • space-evenly : 아이템의 사이, 양끝 간격이 일정하도록 정렬
• align-items, align-self 속성
• • 플렉스 아이템을 모두 교차축 방향으로 정렬
• • 교차축에서 특정 항목만 지정할 경우 align-self
• • 형식 : align-items:속성값
• • flex-start : 교차축 방향의 시작점을 기준으로 정렬
• • flex-end : 교차축 방향의 끝을 기준으로 정렬
• • center : 교차축 방향의 중앙을 기준으로 정렬
• • baseline : 플렉스 아이템의 baseline을 기준으로 정렬
• • stretch : 교차축 방향으로 플렉스 아이템의 너비, 높이가 늘어남
• align-content 속성
• • 플렉스 아이템이 두 줄 이상일 때 교차축 방향으로 정렬
• • 형식 : align-content:속성값
• • flex-start : 교차축 시작점에 맞춰 배치
• • flex-end : 교차축 끝점에 맞춰 배치
• • center : 교차축 기준 중앙에 맞춰 배치
• • space-between : 첫 항목, 끝 항목은 교차축의 시작과 끝에 맞추고, 사이간격은 같은 간격으로 배치
• • space-around : 교차축에 모든 항목을 같은 간격으로 배치
• • stretch : 교차축 방향으로 플렉스 아이템의 너비, 높이가 늘어남

CSS 그리드 레이아웃

- 최근 등장한 css 표준

- 수평이나 수직이나 어디로든 배치 가능

- 레고블럭 끼우듯이 처리

- 양쪽 축 방향을 모두 사용할 수 있음(2차원 레이아웃)

- 행(row), 컬럼(column)으로 화면 구성

- 행, 열 사이의 여백 조절 --> table과 유사

- 그리드 셀(grid cell) : 행과 열이 만나서 이루어지는 공간

- 그리드 갭(grid gap) : 그리드 셀과 셀 사이의 간격

- 그리드 아이템(grid item) : 그리드 셀 안의 컨텐츠

- 그리드 라인(grid line) : 그리드 행과 열을 그리는 선

- 그리드 넘버(grid number) : 그리드 라인에 붙는 번호

- 그리드 컨테이너(grid container) : 그리드 아이템을 묶는(감싸는) 부모 요소

그리드 레이아웃 속성

display 속성

• grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치
• inline-grid : 컨테이너 안의 항목을 인라인 레벨 요소로 배치

grid-template-columns, grid-template-rows 속성

• grid-template-columns : 그리드 컨테이너 안의 컬럼 개수, 너비값
• grid-template-rows : 그리드 컨테이너 안의 줄 갯수, 너비값
• 형식 : grid-template-columns:1열값 2열값 .....
• 형식 : grid-template-rows:1행값 2행값 .....
• 컬럼에 지정하는 값 -> 상대크기로 지정 가능 --> 테이블 colspan과 같은 개념
• 형식 : grid-template-columns: 2fr 1fr 2fr

row-gap, column-gap 속성

• 그리드 셀과 셀 사이의 간격
• 형식 : row-gap:크기
• 형식 : column-gap:크기

align-items 속성

• 그리드 아이템 전체를 셀의 세로 방향으로 정렬
• stretch : 그리드 아이템이 그리드 셀을 가득 채우도록 크기를 늘림
• start : 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치
• end : 그리드 아이템을 그리드 셀의 맨 아래에 배치

align-self 속성

• 각각의 그리드 아이템을 셀의 세로 방향으로 각각 지정

justify-items 속성

• 그리드 아이템 전체를 셀의 가로 방향으로 정렬
• stretch : 그리드 아이템이 그리드 셀을 가득 채우도록 크기를 늘림
• start : 그리드 아이템을 그리드 셀의 왼쪽 끝에 배치
• center : 그리드 아이템을 그리드 셀의 가로 방향 중간에 배치
• end : 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치

justify-self 속성

• 각각의 그리드 아이템을 셀의 가로 방향으로 정렬

place-item 속성

• align-items, justify-items 속성을 한 번에 지정
• 형식 : place-items: align-items속성 justify-items속성

place-self 속성

• align-self, justify-self 속성을 한 번에 지정
• 형식 : place-self: align-self속성 justify-selfthrtjd

grid-template-areas 속성

• 그리드 레이아웃에 행과 열을 이름으로 지정

grid-area 속성

• 그리드 아이템에 이름을 지정

grid-column-start, grid-column-end

• 그리드 레이아웃에서 열의 시작, 끝번호 지정
• 형식 : grid-column-start:속성값
• 형식 : grid-column-end:속성값

grid-row-start, grid-row-end 속성

• 그리드 레이아웃에서 행의 시작, 끝번호 지정
• 형식 : grid-row-start:속성값
• 형식 : grid-row-end:속성값

grid-column

• grid-column-start, grid-column-end 의 단축 속성
• 형식1 : grid-column:start end
• 형식2 : grid-column:start/span(열의 개수)

grid-row

• grid-row-start, grid-row-end 의 단축 속성
• 형식1 : grid-row:start end
• 형식2 : grid-row:start/span(행의 개수)

오늘은 mediaQuery, flex layout, grid layout에 대해서 공부를 진행했다. grid에 대해선 알고 있었지만 항상 flex로 layout을 잡는 걸 고집해왔었는데 grid로 layout을 나누는 게 코드 상으로는 훨씬 깔끔한 느낌을 받았다. 손에 익을 정도로 열심히 공부해야할 것 같다.