CSS - 문제 미리보기
문제 1410
hard
다음 코드의 실행 결과를 예상해보세요:
```css
.container {
width: 100px;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
}
.container p {
text-overflow: ellipsis;
margin: 0;
}
.container:hover {
overflow: visible;
}
```
```html
<div class="container">
<p>This is a very long text that will overflow</p>
</div>
```
```css
.container {
width: 100px;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
}
.container p {
text-overflow: ellipsis;
margin: 0;
}
.container:hover {
overflow: visible;
}
```
```html
<div class="container">
<p>This is a very long text that will overflow</p>
</div>
```
정답: B
• 평상시 상태에서의 동작:
• `width: 100px`로 제한된 영역
• `white-space: nowrap`으로 줄바꿈 금지
• `overflow: hidden`으로 넘치는 부분 숨김
• `text-overflow: ellipsis`로 말줄임표(...) 표시
• 호버 시 동작:
• `overflow: visible`로 변경되어 숨겨진 텍스트가 보임
• 전체 텍스트가 컨테이너 밖으로 나와서 표시됨
• 이는 말줄임표로 축약된 텍스트의 전체 내용을 보여주는 일반적인 UI 패턴입니다
• `width: 100px`로 제한된 영역
• `white-space: nowrap`으로 줄바꿈 금지
• `overflow: hidden`으로 넘치는 부분 숨김
• `text-overflow: ellipsis`로 말줄임표(...) 표시
• 호버 시 동작:
• `overflow: visible`로 변경되어 숨겨진 텍스트가 보임
• 전체 텍스트가 컨테이너 밖으로 나와서 표시됨
• 이는 말줄임표로 축약된 텍스트의 전체 내용을 보여주는 일반적인 UI 패턴입니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.