LEVEL 5 QUEST
레이아웃 기초
위-아래-좌-우, 화면 배치의 핵심 개념
레이아웃 마스터
화면을 원하는 대로 배치하는 핵심 개념!
Box Model이란?
📦 모든 HTML 요소는 상자(Box)다!
웹페이지의 모든 요소는 사각형 상자로 이루어져 있어요. 글자, 이미지, 버튼... 전부 다 박스! 이 박스는 4개의 층으로 구성됩니다.
🎯 Box Model 직접 보기 (클릭해서 확인!)
margin (바깥 여백)
border (테두리)
padding (안쪽 여백)
content (내용)
🟧 margin: 다른 요소와의 거리
🟦 border: 테두리선
🟩 padding: 내용과 테두리 사이
💡 일상생활 비유
택배 상자를 떠올려보세요!
content = 택배 물건
padding = 뽁뽁이(완충재)
border = 상자 자체
margin = 상자와 다른 상자 사이의 거리
content = 택배 물건
padding = 뽁뽁이(완충재)
border = 상자 자체
margin = 상자와 다른 상자 사이의 거리
/* Box Model 예시 */
.my-box {
margin: 20px; /* 바깥 여백 */
border: 2px solid gold;
padding: 16px; /* 안쪽 여백 */
width: 200px; /* 내용 너비 */
}
.my-box {
margin: 20px; /* 바깥 여백 */
border: 2px solid gold;
padding: 16px; /* 안쪽 여백 */
width: 200px; /* 내용 너비 */
}
🔒
여기까지는 미리보기입니다
레이아웃 기초
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.
Google로 3초 만에 시작 →🧵 Threads로 시작무료 공개 강의 둘러보기 (Lv.1~3)무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.