웹사이트 따라만들기 1-7 | 카드 UI 만들기 (CSS 박스모델 · 패딩 & 마진 실전)
Автор: 펀치코딩
Загружено: 2026-01-10
Просмотров: 7
❤ 수업자료: 👉 http://bit.ly/4qTynbZ
❤인스타: 👉 / punch_coding
💬 html, css, js 질문 단톡방
👉 https://open.kakao.com/o/gMcVsI8h
💼 IT 프론트엔드 취업 상담
👉 https://open.kakao.com/o/sjWbPsXh
이번 영상은 웹사이트 따라만들기 시리즈 1-7편으로,
카드 UI를 만들기 위한 CSS 간격 배치와 박스 모델 개념을 다룹니다.
이전 강의에서 CSS Reset을 통해
브라우저 기본 스타일을 초기화했다면,
이번 시간에는 실제 카드 UI를 기준으로
padding, margin을 어떻게 나누고 적용하는지 실습합니다.
✔ 카드 UI에서 여백을 잡는 기준
✔ box model (content / padding / border / margin) 복습
✔ padding-top, bottom, inline 개념 정리
✔ 피그마 간격(px)을 CSS로 옮기는 방법
✔ 개발자 도구로 padding이 안 먹는 이유 디버깅
✔ wrapper vs text-wrapper 역할 차이
✔ h1, p 태그 선택 기준과 기본 타이포그래피
✔ margin-bottom으로 요소 간 간격 조절
✔ nth-child 선택자 실전 활용
✔ 버튼 영역 배치 기초 설계
HTML과 CSS가 처음인 분들도
디자인 시안을 보고 “어디에 padding을 줘야 할지”
기준이 생기도록 설명합니다.
📌 다음 강의에서는
카드 버튼 UI 스타일링을 완성합니다.
📺 HTML · CSS 기초부터 실습으로 배우고 싶다면
구독과 좋아요는 큰 힘이 됩니다!
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
![[EN] 풍향고2 사전모임은 핑계고｜EP.97](https://imager.clipsaver.ru/A47f5LTeGoI/max.jpg)
