CSS - 문제 미리보기
문제 1267
hard
다음 두 clearfix 방법의 차이점과 장단점으로 올바른 것은?
```css
/* 방법 A */
.clearfix-old {
overflow: auto;
}
/* 방법 B */
.clearfix-modern::after {
content: "";
clear: both;
display: table;
}
```
```css
/* 방법 A */
.clearfix-old {
overflow: auto;
}
/* 방법 B */
.clearfix-modern::after {
content: "";
clear: both;
display: table;
}
```
정답: B
두 clearfix 방법의 상세 비교:
방법 A (overflow: auto)의 특성:
장점:
• 코드가 간단하고 직관적
• 구형 브라우저에서도 잘 작동
• 빠른 임시 해결책으로 유용
단점 및 위험성:
• 스크롤바 생성 위험: margin/padding이 컨테이너를 넘으면 스크롤바 표시
• 제어 어려움: 복잡한 레이아웃에서 예상치 못한 스크롤
• 디자인 깨짐: 의도하지 않은 스크롤바로 레이아웃 변형
방법 B (::after pseudo-element)의 특성:
장점:
• 부작용 없음: 스크롤바나 레이아웃 변형 위험 없음
• 정확한 제어: 오직 clearfix 목적으로만 작동
• 모던 표준: 현재 웹 개발에서 권장되는 방식
• 안정성: 다양한 상황에서 안전하게 작동
단점:
• 코드가 상대적으로 복잡
• IE7 이하에서는 지원하지 않음 (현재는 문제없음)
각 요소의 역할:
• `content: " "`: 빈 가상 요소 생성
• `clear: both`: 양쪽 float 모두 clear
• `display: table`: 블록 레벨 특성 부여
방법 A (overflow: auto)의 특성:
장점:
• 코드가 간단하고 직관적
• 구형 브라우저에서도 잘 작동
• 빠른 임시 해결책으로 유용
단점 및 위험성:
• 스크롤바 생성 위험: margin/padding이 컨테이너를 넘으면 스크롤바 표시
• 제어 어려움: 복잡한 레이아웃에서 예상치 못한 스크롤
• 디자인 깨짐: 의도하지 않은 스크롤바로 레이아웃 변형
방법 B (::after pseudo-element)의 특성:
장점:
• 부작용 없음: 스크롤바나 레이아웃 변형 위험 없음
• 정확한 제어: 오직 clearfix 목적으로만 작동
• 모던 표준: 현재 웹 개발에서 권장되는 방식
• 안정성: 다양한 상황에서 안전하게 작동
단점:
• 코드가 상대적으로 복잡
• IE7 이하에서는 지원하지 않음 (현재는 문제없음)
각 요소의 역할:
• `content: " "`: 빈 가상 요소 생성
• `clear: both`: 양쪽 float 모두 clear
• `display: table`: 블록 레벨 특성 부여
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.