CSS - 문제 미리보기
문제 1334
easy
입력 필드 내부에 여백을 추가하고 외부 간격을 설정하는 CSS 속성들은?
```css
input[type=text] {
width: 100%;
_____: 12px 20px;
_____: 8px 0;
box-sizing: border-box;
}
```
```css
input[type=text] {
width: 100%;
_____: 12px 20px;
_____: 8px 0;
box-sizing: border-box;
}
```
정답: B
• `padding`은 요소 내부 여백, `margin`은 요소 외부 간격을 설정합니다
• 패딩 설정 (`padding: 12px 20px`):
• 상하 12px, 좌우 20px의 내부 여백
• 텍스트와 테두리 사이 공간 확보
• 입력하기 편한 환경 제공
• 마진 설정 (`margin: 8px 0`):
• 상하 8px, 좌우 0px의 외부 간격
• 입력 필드들 사이의 간격 확보
• 레이아웃의 시각적 분리
• `box-sizing: border-box`의 역할:
• 패딩과 테두리를 전체 너비에 포함
• 예측 가능한 크기 계산
• 레이아웃 깨짐 방지
• Box Model 이해:
• Content → Padding → Border → Margin 순서
• 각각의 역할과 용도가 다름
• 패딩 설정 (`padding: 12px 20px`):
• 상하 12px, 좌우 20px의 내부 여백
• 텍스트와 테두리 사이 공간 확보
• 입력하기 편한 환경 제공
• 마진 설정 (`margin: 8px 0`):
• 상하 8px, 좌우 0px의 외부 간격
• 입력 필드들 사이의 간격 확보
• 레이아웃의 시각적 분리
• `box-sizing: border-box`의 역할:
• 패딩과 테두리를 전체 너비에 포함
• 예측 가능한 크기 계산
• 레이아웃 깨짐 방지
• Box Model 이해:
• Content → Padding → Border → Margin 순서
• 각각의 역할과 용도가 다름
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.