웹사이트 따라만들기 2-5 | CSS 반응형 완성하기 (미디어쿼리 · Flex 방향 전환 · overflow 해결)
Автор: 펀치코딩
Загружено: 2026-01-17
Просмотров: 23
❤ 수업자료: 👉 https://www.frontendmentor.io/challen...
❤인스타: 👉 / punch_coding
💬 html, css, js 질문 단톡방
👉 https://open.kakao.com/o/gMcVsI8h
💼 IT 프론트엔드 취업 상담
👉 https://open.kakao.com/o/sjWbPsXh
이번 영상은 웹사이트 따라만들기 시리즈 2-5편으로,
CSS 미디어쿼리를 활용해
상품 UI 반응형 레이아웃을 완성하는 강의입니다.
지난 시간에 HTML picture / source 태그로
이미지 반응형 처리를 했다면,
이번 시간에는 CSS로 레이아웃 자체를
PC → 모바일 구조로 전환합니다.
✔ media query(min-width / max-width) 개념 정리
✔ 왜 모바일 기준(max-width)으로 반응형을 잡는지
✔ flex-direction: row → column 전환 흐름
✔ 반응형에서 불필요한 CSS 줄이는 방법
✔ overflow: hidden 때문에 요소가 사라지는 이유
✔ height 고정의 문제점과 min-height 개념
✔ PC / 모바일 높이 값 다르게 처리하는 전략
✔ 이미지 영역 높이 계산하는 방법
✔ width: auto / 100% 차이 이해
✔ 반응형 디버깅 시 개발자도구 활용법
✔ 실제 시안 기준으로 문제 해결하는 사고 방식
HTML과 CSS가 처음인 분들도
“왜 모바일에서 요소가 안 보이는지”
“왜 flex 방향을 바꾸면 깨지는지”
원인부터 해결까지 이해할 수 있도록 설명합니다.
📌 다음 강의부터는
카드·상품 UI를 넘어
실제 웹사이트 전체 레이아웃(헤더, 네비게이션)을
구성하기 시작합니다.
📺 무료로 웹사이트를 처음부터 끝까지
직접 만들어보고 싶다면
구독과 좋아요는 큰 힘이 됩니다!
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
