CSS - 문제 미리보기
문제 1428
easy
다음 코드에서 빈칸에 들어갈 올바른 속성값은?
```css
.tooltip .tooltiptext {
visibility: hidden;
/* 기타 스타일... */
}
.tooltip:hover .tooltiptext {
visibility: _______;
}
```
```css
.tooltip .tooltiptext {
visibility: hidden;
/* 기타 스타일... */
}
.tooltip:hover .tooltiptext {
visibility: _______;
}
```
정답: C
visibility 속성의 두 가지 핵심 값:
• `hidden`: 요소를 숨김 (공간은 유지)
• `visible`: 요소를 표시
툴팁의 동작 원리:
```css
/* 평상시: 툴팁 숨김 */
.tooltip .tooltiptext {
visibility: hidden;
}
/* 호버시: 툴팁 표시 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
```
visibility vs display 차이점:
• `visibility: hidden`: 공간은 유지하되 보이지 않음
• `display: none`: 완전히 제거 (공간도 차지하지 않음)
• 툴팁에서는 visibility가 더 적합 (레이아웃 변화 없음)
• `hidden`: 요소를 숨김 (공간은 유지)
• `visible`: 요소를 표시
툴팁의 동작 원리:
```css
/* 평상시: 툴팁 숨김 */
.tooltip .tooltiptext {
visibility: hidden;
}
/* 호버시: 툴팁 표시 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
```
visibility vs display 차이점:
• `visibility: hidden`: 공간은 유지하되 보이지 않음
• `display: none`: 완전히 제거 (공간도 차지하지 않음)
• 툴팁에서는 visibility가 더 적합 (레이아웃 변화 없음)
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.