코딩자율학습단 19기 | 9일차 학습일지 – 반응형 웹(미디어 쿼리) + 그리드 배치 + 정렬 속성

오늘 학습 정보

• 날짜/Day: 2026/01/22 (Day9)
• 교재 범위: ~ 7.3 반응형 웹을 위한 미디어 쿼리 사용하기 (종이책 p.277~315)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 그리드 배치 속성(grid-area / grid-template-areas, grid-row/column)
• 핵심 키워드 2: 그리드 정렬 속성(align/justify, place-items/place-self)
• 핵심 키워드 3: 미디어 쿼리(@media, min/max-width, viewport)

태그/속성/개념 정리(가장 중요)

2-1) 플렉스 박스 레이아웃(Flexbox) 핵심

플렉스 박스 구성 요소

역할: 1차원(가로 또는 세로) 레이아웃 정렬/배치를 쉽게 만드는 모델

핵심 포인트:

• 주축(main axis): 배치가 진행되는 기본 방향
• 교차축(cross axis): 주축과 수직 방향
• 플렉스 컨테이너: display:flex(또는 inline-flex)가 적용된 부모
• 플렉스 아이템: 컨테이너의 자식 요소

기본 형식:

• display: flex | inline-flex;

짧은 예시(코드):

• .container { display: flex; }

flex-direction (주축 방향 결정)

역할: 아이템이 쌓이는 방향(주축)을 지정

핵심 포인트:

• row / column에 따라 주축이 가로/세로로 바뀜

기본 형식:

• flex-direction: row | column | row-reverse | column-reverse;

짧은 예시(코드):

• .container { display:flex; flex-direction: column; }

flex-wrap (줄 바꿈 여부)

역할: 아이템이 컨테이너를 넘칠 때 줄 바꿈할지 결정

핵심 포인트:

• nowrap이면 한 줄 유지, wrap이면 여러 줄로 내려감

기본 형식:

• flex-wrap: nowrap | wrap;

짧은 예시(코드):

• .container { display:flex; flex-wrap: wrap; }

flex-flow (direction + wrap 단축)

역할: flex-direction과 flex-wrap을 한 줄로 지정

핵심 포인트:

• 작성량 줄이기

기본 형식:

• flex-flow: <direction> <wrap>;

짧은 예시(코드):

• .container { display:flex; flex-flow: row wrap; }

정렬 속성 4종(요약)

역할: 플렉스 정렬을 담당하는 대표 속성

핵심 포인트:

• justify-content: 주축 방향으로 “아이템들을” 정렬
• align-items: 교차축 방향으로 “아이템들을” 정렬
• align-self: 개별 아이템 교차축 정렬
• align-content: **여러 줄(2줄 이상)**일 때 줄 묶음의 교차축 정렬

기본 형식:

• 속성별로 적용(아래 예시 참고)

짧은 예시(코드):

• .container { display:flex; justify-content: center; align-items: center; }
• .item2 { align-self: flex-end; }

2-2) 그리드 레이아웃(Grid) 개념 정리

그리드 레이아웃 구성 요소

역할: 2차원(행+열) 레이아웃 배치 모델

핵심 포인트:

• 행(row), 열(column)
• 그리드 셀(grid cell): 행·열이 만나는 한 칸
• 그리드 갭(grid gap): 셀과 셀 사이 간격
• 그리드 아이템(grid item): 셀 안에 배치되는 요소
• 그리드 라인(grid line), 그리드 넘버(grid number): 배치 기준선/번호
• 그리드 컨테이너(grid container): 아이템을 묶는 부모

기본 형식:

• display: grid | inline-grid;

짧은 예시(코드):

• .grid { display: grid; }

2-3) 그리드 레이아웃 기본 속성(행/열/간격)

grid-template-rows, grid-template-columns

역할: 그리드의 행/열 크기를 정의

핵심 포인트:

• 레이아웃의 “격자 틀”을 먼저 만든다

기본 형식:

• grid-template-columns: …;
• grid-template-rows: …;

짧은 예시(코드):

• .grid{ display:grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }

row-gap, column-gap

역할: 행/열 사이 간격 설정

핵심 포인트:

• 셀 사이 “틈”을 관리

기본 형식:

• row-gap: n;
• column-gap: n;

짧은 예시(코드):

• .grid{ row-gap: 10px; column-gap: 10px; }

2-4) 그리드 아이템 정렬(셀 안에서의 정렬)

align-items / align-self (세로 방향 정렬)

역할: 셀의 세로 방향에서 아이템 위치를 조정(전체/개별)

핵심 포인트:

• stretch / start / center / end

기본 형식:

• align-items: …;
• align-self: …;

짧은 예시(코드):

• .grid{ align-items: center; }
• .item2{ align-self: end; }

justify-items / justify-self (가로 방향 정렬)

역할: 셀의 가로 방향에서 아이템 위치를 조정(전체/개별)

핵심 포인트:

• 값은 유사하지만 방향이 가로

기본 형식:

• justify-items: …;
• justify-self: …;

짧은 예시(코드):

• .grid{ justify-items: start; }
• .item3{ justify-self: center; }

place-items / place-self (정렬 단축)

역할: 세로/가로 정렬을 한 줄로 지정

핵심 포인트:

• place-items: <align-items> <justify-items>
• place-self: <align-self> <justify-self>

기본 형식:

• place-items: A B;
• place-self: A B;

짧은 예시(코드):

• .grid{ place-items: center end; }
• .item4{ place-self: center end; }

2-5) 그리드 배치(“어디 칸에 놓을지” 결정)

grid-template-areas + grid-area (영역 이름 배치)

역할: 영역 이름으로 레이아웃을 설계하고, 아이템을 이름으로 꽂아 넣기

핵심 포인트:

• 큰 틀을 직관적으로 만들 수 있음(header/sidebar/content/footer 등)

기본 형식:

• grid-template-areas: “…” “…”;
• grid-area: name;

짧은 예시(코드):

.grid{
   display:grid;
   grid-template-areas:
   "header header header"
   "sidebar content content"
   "footer footer footer";
}
#header{ grid-area: header; }
#sidebar{ grid-area: sidebar; }
#content{ grid-area: content; }
#footer{ grid-area: footer; }

grid-column-start/end, grid-row-start/end (라인 번호 배치)

역할: 라인 번호로 시작/끝을 찍어서 배치

핵심 포인트:

• “정밀 제어”에 적합

기본 형식:

• start/end 각각 지정

짧은 예시(코드):

• .item1{ grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

grid-column, grid-row (배치 단축)

역할: start/end를 한 줄로 축약

핵심 포인트:

• 1/3 또는 1/span 2 형태로도 표현 가능

기본 형식:

• grid-column: <start>/<end>; 또는 grid-column: <start>/span <n>;

짧은 예시(코드):

• .item1{ grid-column: 1/3; grid-row: 1/3; }
• .item2{ grid-column: 1/span 2; grid-row: 1/span 2; }

2-6) 반응형 웹을 위한 미디어 쿼리(Media Query) + 뷰포트(Viewport)

뷰포트 메타 태그(meta viewport)

역할: 모바일에서 화면 너비 기준을 “기기 너비”로 맞춰 레이아웃이 자연스럽게 보이게 함

핵심 포인트:

• width=device-width, initial-scale=1.0이 대표 조합

기본 형식:

• <metaname=”viewport”content=”…”>

짧은 예시(코드):

• <metaname=”viewport”content=”width=device-width, initial-scale=1.0″>

content 주요 값(교재 표 기반 요약)

역할: 뷰포트의 너비/배율/확대 제한 설정

핵심 포인트:

• width, height, initial-scale, minimum-scale, maximum-scale, user-scalable

기본 형식:

• content=”width=…, initial-scale=…”

짧은 예시(코드):

• <metaname=”viewport”content=”width=device-width, initial-scale=1.0, user-scalable=yes”>

미디어 쿼리 기본 문법(@media)

역할: 조건(기기/화면)에 따라 CSS를 선택 적용

핵심 포인트:

• and로 조건을 연결하고, 조건은 괄호로 표현

기본 형식:

• @media <not|only> and () { … }

짧은 예시(코드):

• @media only screen and (min-width:360px) and (max-width:720px){ /* CSS 코드 */ }

mediatype와 자주 쓰는 media feature

역할: 어떤 매체에, 어떤 조건에서 적용할지 정의

핵심 포인트:

• mediatype: all / print / screen / speech
• feature: min-width / max-width / orientation(portrait|landscape)

기본 형식:

• @media screen and (min-width:…) { }

짧은 예시(코드):

• @media (orientation: landscape){ /* 가로 모드일 때만 */ }

“조건 해석”을 문장으로 읽는 법(적용 범위 확인)

역할: 작성한 쿼리가 언제 발동하는지 정확히 이해

핵심 포인트: 예) screen이면서 너비가 360~720px이면 적용

기본 형식: 동일

짧은 예시(코드):

• @media screen and (min-width:360px) and (max-width:720px){ /* 360~720px 구간 */ }

이슈 로그

• 그리드 정렬 속성에서 align-(세로)와 justify-(가로)를 자꾸 반대로 기억하려고 해서, “align=세로 / justify=가로”로 암기하려고 노력했습니다.
• grid-template-areas는 직관적인 대신 영역 이름/따옴표/행 구성 실수가 잦을 수 있어, 작은 예제부터 반복하면서 손에 익히는 게 필요했습니다.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」