[CSS 2강] 누구를 꾸밀까요? 선택자와 박스 모델 완벽 이해
"원하는 요소를 선택하고 크기를 조절하는 CSS의 핵심을 배워봅시다."
안녕하세요! 지난 1강에서는 CSS를 연결하는 법을 배웠습니다. 오늘은 내가 원하는 부분만 콕 집어서 스타일을 입히는 선택자(Selector)와, 웹사이트의 모든 요소를 사각형 박스로 이해하는 박스 모델(Box Model)을 알아보겠습니다.
1. 기본 선택자 (누구를 꾸밀 것인가?)
CSS에서 가장 많이 쓰이는 세 가지 선택자입니다. 상황에 맞게 골라 쓰는 것이 중요합니다.
✅ 태그 선택자: 특정 태그 전체 (예: h1 { ... })
✅ 클래스 선택자(.): 여러 번 재사용할 그룹 (예: .box { ... })
✅ 아이디 선택자(#): 단 하나뿐인 고유 요소 (예: #logo { ... })
2. 모든 요소는 박스다! 박스 모델
웹사이트의 모든 태그는 사각형 박스로 이루어져 있습니다. 이 박스의 크기를 결정하는 4가지 요소를 기억하세요.
- 📦 Content: 텍스트나 이미지가 들어가는 실제 내용 영역
- 📏 Padding: 테두리와 내용 사이의 안쪽 여백
- 🖼️ Border: 요소의 테두리(선)
- 🚀 Margin: 다른 요소와의 간격인 바깥쪽 여백
3. 선택자와 박스 모델 예제 (실습)
아래 코드를 통해 클래스 선택자를 사용하고 박스의 여백을 조절하는 법을 확인해 보세요.
/* 클래스 선택자로 꾸미기 */
.my-box {
width: 300px; /* 가로 너비 */
background-color: #ffffff;
border: 2px solid #3498db; /* 파란색 테두리 */
/* 박스 모델 설정 */
padding: 20px; /* 안쪽 여백 */
margin: 30px; /* 바깥쪽 여백 */
/* 꿀팁: 테두리까지 크기에 포함하기 */
box-sizing: border-box;
}
/* 태그 선택자로 글자 꾸미기 */
p {
color: #555;
line-height: 1.5;
}
레이아웃의 기본기 완료!
Margin과 Padding의 차이만 명확히 알아도 디자인이 훨씬 깔끔해집니다.
다음 3강에서는 페이지를 더욱 아름답게 만드는 '폰트와 텍스트 스타일'을 알아볼게요!