다음 상황에서 가장 효율적인 CSS 작성 방법은? 상황: 네비게이션 메뉴의 각 항목을 디... | CSS

CSS - 문제 미리보기

문제 1113

hard

다음 상황에서 가장 효율적인 CSS 작성 방법은? 상황: 네비게이션 메뉴의 각 항목을 디자인하는데, 위쪽과 아래쪽은 테두리가 없고, 왼쪽은 3px 실선, 오른쪽은 1px 점선으로 만들고 싶습니다. 또한 코드의 가독성과 유지보수성을 고려해야 합니다.

A. ```css .nav-item { border-top-style: none; border-right-style: dotted; border-right-width: 1px; border-bottom-style: none; border-left-style: solid; border-left-width: 3px; } ```

B. ```css .nav-item { border-style: none dotted none solid; border-width: 0 1px 0 3px; } ```

C. ```css .nav-item { border: none; border-right: 1px dotted; border-left: 3px solid; } ```

D. ```css .nav-item { border-left: 3px solid; border-right: 1px dotted; } ```

정답: D

효율적인 CSS 작성을 위해서는 필요한 것만 명시하는 것이 가장 좋습니다. 실무 팁: ```css /* 기본 상태에서는 테두리가 없으므로 none을 명시할 필요 없음 */ .nav-item { border-left: 3px solid #007bff; border-right: 1px dotted #ccc; padding: 10px 15px; transition: border-color 0.3s ease; } .nav-item:hover { border-left-color: #0056b3; } ``` 성능 고려사항: • 브라우저는 기본적으로 테두리가 없는 상태이므로 none을 명시할 필요 없음 • 필요한 속성만 설정하면 렌더링 효율성 향상

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.