웹사이트 따라만들기 2-4 | 상품 UI 반응형 만들기 (margin 규칙 · Flex 방향 전환 · picture 태그)
Автор: 펀치코딩
Загружено: 2026-01-17
Просмотров: 37
❤ 수업자료: 👉 https://www.frontendmentor.io/challen...
❤인스타: 👉 / punch_coding
💬 html, css, js 질문 단톡방
👉 https://open.kakao.com/o/gMcVsI8h
💼 IT 프론트엔드 취업 상담
👉 https://open.kakao.com/o/sjWbPsXh
이번 영상은 웹사이트 따라만들기 시리즈 2-3편으로,
상품 상세 UI의 패딩·마진 정리부터
PC / 모바일 반응형 레이아웃 구현까지 진행합니다.
디자인 시안을 기준으로
margin 규칙을 먼저 만들고,
CSS 선택자 우선순위와
Flex 방향 전환 개념을 함께 설명합니다.
✔ 블록 요소가 쌓이는 구조 이해
✔ margin-bottom 규칙 하나로 간격 정리하는 방법
✔ :not(:last-child) 선택자 실전 활용
✔ 특정 요소만 간격을 더 주는 전략
✔ CSS 우선순위(selector specificity) 개념
✔ 왜 아래에 있는 CSS가 덮어쓰는지 설명
✔ Flexbox 주축 / 교차축 개념 정리
✔ flex-direction: row → column 전환 이유
✔ PC → 모바일 레이아웃 변경 흐름 이해
✔ media query로 반응형 분기 처리
✔ picture / source 태그로 이미지 반응형 처리
✔ 모바일에서 용량 줄이는 이미지 최적화 전략
✔ HTML 구조로 반응형 처리하는 사고 방식
HTML과 CSS가 처음인 분들도
“왜 이렇게 마진을 주는지”
“왜 모바일에서 레이아웃이 바뀌는지”
구조적으로 이해할 수 있도록 설명합니다.
📌 다음 강의에서는
CSS 미디어쿼리를 활용해
레이아웃을 더 정교하게 분기 처리합니다.
📺 실습 위주의 HTML · CSS 기초 강의를 원하신다면
구독과 좋아요는 큰 힘이 됩니다!
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
![[더 보다] 자율주행, 전쟁이 시작됐다 / KBS 2026.01.12.](https://image.4k-video.ru/id-video/BHhGoH18emU)
![[playlist]🎧Только я защищу себя💚Просто сядь и brain off| GROOVE | Музыка для магазина · Кафе](https://image.4k-video.ru/id-video/152R1o2ij7E)
![[playlist] ☕ Грувовый зимний плейлист для снежных дней | R&B · Pop | Музыка для кафе | SoolSoolpl 💿](https://image.4k-video.ru/id-video/CjLfRhtQgdc)
