CSS - 문제 미리보기
문제 1085
hard
다음 상황에서 가장 적절한 CSS 코드는?
상황: 헤더 영역에 회사 로고를 배경 이미지로 넣되, 오른쪽 상단 모서리에 한 번만 표시하고 싶습니다.
정답: D
요구사항을 모두 만족하려면 세 가지 속성을 조합해야 합니다.
요구사항 분석:
1. 로고를 배경 이미지로 → `background-image: url("logo.png")`
2. 한 번만 표시 → `background-repeat: no-repeat`
3. 오른쪽 상단에 위치 → `background-position: right top`
각 선택지 분석:
1) 기본 설정만 있어서 이미지가 반복되고 왼쪽 상단에 위치
2) 가로로 반복되어 로고가 여러 개 나타남
3) 한 번만 표시되지만 기본 위치(왼쪽 상단)에 있음
4) 모든 요구사항을 만족 ✓
실무 활용:
```css
.header {
height: 80px;
background-image: url("company-logo.png");
background-repeat: no-repeat;
background-position: right top;
/* 로고가 헤더 오른쪽 상단에 깔끔하게 배치됨 */
}
```
이런 패턴은 웹사이트 헤더, 카드 컴포넌트, 배너 등에서 자주 사용됩니다.
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.