두 번째 문제: 유연한 내비게이션 바 만들기

요구사항

HTML 구조:
- <nav> 태그를 최상위 컨테이너로 사용합니다.
- 내부에는 순서 없는 목록 <ul>을 사용합니다.
- 목록 아이템 <li>를 4개 만들고, 각각 **링크 <a>**를 넣어 메뉴 항목을 구성합니다. (예: Home, About, Services, Contact)
CSS 스타일:
- Flexbox 레이아웃 적용: <nav> 안에 있는 <ul>이 가로로 항목을 정렬하고 항목 사이에 균일한 간격을 갖도록 Flexbox를 사용합니다.
  - <ul>에 display: flex와 justify-content: space-around를 적용합니다.
- 기본 스타일 제거:
  - <ul>의 리스트 스타일 (list-style)을 제거합니다.
  - <ul>의 기본 패딩 (padding)을 제거합니다.
- 링크 스타일:
  - <a> 태그의 밑줄을 제거합니다.
  - <a> 태그의 글자색을 검은색으로 설정합니다.
  - <a> 태그에 padding: 10px 15px을 적용하여 클릭 영역을 넓힙니다.
- 호버 효과 (Hover Effect):
  - <a> 태그에 마우스를 올렸을 때 (:hover), 배경색을 #eee (아주 밝은 회색)로 변경합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gnb__list {
            display: flex;
            justify-content: space-around;
            padding: 0;
            list-style: none;
        }
        .gnb__link {
            padding: 10px 15px;
            background-color: transparent;
            text-decoration: none;
            color: #000;
            transition: background 0.3s ease;
        }
        .gnb__link:hover {
            background-color: #eee;;
        }
    </style>
</head>
<body>
    <nav class="gnb">
        <ul class="gnb__list">
            <li class="gnb__item"><a class="gnb__link" href="javascript:;">Home</a></li>
            <li class="gnb__item"><a class="gnb__link" href="javascript:;">About</a></li>
            <li class="gnb__item"><a class="gnb__link" href="javascript:;">Services</a></li>
            <li class="gnb__item"><a class="gnb__link" href="javascript:;">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'w. Gemini' 카테고리의 다른 글

여섯 번째 문제: 스크롤 및 애니메이션 효과가 있는 헤더 만들기 (0)	2025.10.27
다섯 번째 문제: CSS 변수를 활용한 커스텀 입력 필드 만들기 (0)	2025.10.27
네 번째 문제: 툴팁을 포함하는 버튼 만들기 (0)	2025.10.27
세 번째 문제: 반응형 3열 카드 레이아웃 만들기 (0)	2025.10.27
첫 번째 문제: 간단한 프로필 카드 만들기 (0)	2025.10.27

요구사항

'w. Gemini' 카테고리의 다른 글

티스토리툴바