네이버 클론코딩 header 및 layout.css

네이버 클론코딩 header

<header class="header">
  <div class="header-inner">
  
    <!-- 네이버 로고와 검색창 그룹 -->
    <div class="group-search">
      <h1 class="logo">
        <a href="">
          <span class="blind">네이버 로고</span> <!-- 화면에 보이지 않는 텍스트로 로고 설명 -->
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG 형식의 네이버 로고 -->
            <path d="M16.273 12.845 7.376 0H0v24h7.727V11.155L16.624 24H24V0h-7.727v12.845z"></path>
          </svg>
        </a>
      </h1>

      <!-- 검색 폼 -->
      <form action="" method="get">
        <fieldset> <!-- 검색 폼에 대한 영역 설정 -->
          <legend class="blind">검색</legend>
          <input type="text" class="input-text">

          <!-- 가상 키보드, 도움말, 전송 버튼 -->
          <button class="btn-keyboard"><span class="blind">가상키보드</span></button>
          <button class="btn-help"><span class="blind">도움말</span></button>
          <button class="btn-submit"><span class="blind">전송</span></button>
        </fieldset>
      </form>
    </div>

    <!-- 네비게이션 그룹 -->
    <nav class="group-nav">
      <ul class="nav-list">
        <!-- 각 네비게이션 항목 -->
        <li class="nav-item">
          <a href="">
            <i class="ic-mail"></i>
            <span class="name">메일</span>
        </li>
        <li class="nav-item">
          <a href="">
            <i class="ic-cafe"></i>
            <span class="name">카페</span> 
          </a>
        </li>
        
        <li class="nav-item"> <a href=""> <i class="ic-cafe"></i> <span class="name">카페</span> </a> </li>
        <!-- 중략 -->
      </ul>
    </nav>

    <!-- 왼쪽 유틸리티 영역 -->
    <div class="util-area left">
      <button class="btn-menu"><span class="blind">확장메뉴</span></button>
      <a href="" class="btn-pay"><span class="blind">네이버페이</span></a>
    </div>

    <!-- 오른쪽 유틸리티 영역 -->
    <div class="util-area right">
      <button class="btn-talk"><span class="blind">네이버톡</span></button>
      <button class="btn-alert"><span class="blind">알림 혜택</span></button> 
    </div>

  </div>
</header>

이 HTML 코드는 웹 페이지의 헤더 섹션을 나타내며, 네이버의 로고, 검색 폼, 네비게이션, 그리고 유틸리티 영역을 포함합니다. 각 요소와 클래스에 대한 주석이 포함되어 있으며, 해당 요소의 역할과 구조가 설명되어 있습니다.

Layout.css

/* reset.css와 common.css 파일을 가져옵니다. */
@import './reset.css';
@import './common.css';

/* .header 요소에 스타일을 적용합니다. */
.header {}

/* .header 내부의 .header-inner 요소에 스타일을 적용합니다. */
.header .header-inner {
  position: relative; /* 상대 위치 지정 */
  width: 1280px; /* 너비 설정 */
  height: 261px; /* 높이 설정 */
  margin: 0 auto; /* 수평 가운데 정렬 */
  padding: 64px 0 42px; /* 내부 여백 설정 */
}

/* .header 내부의 .group-search 요소에 스타일을 적용합니다. */
.header .group-search {
  display: flex; /* 플렉스 컨테이너로 설정하여 자식 요소들을 가로로 배열 */
  position: absolute; /* 절대 위치 지정 */
  top: 64px; /* 위에서 64px 떨어진 위치 */
  left: 50%; /* 가로 중앙 정렬 */
  width: 706px; /* 너비 설정 */
  border: 1px solid #03c75a; /* 테두리 설정 */
  border-radius: 33px; /* 테두리 반경 설정 */
  background-color: #fff; /* 배경색 설정 */
  transform: translateX(-50%); /* 가로 중앙 정렬을 위한 이동 변형 */
}

/* .group-search 내부의 .logo에 스타일을 적용합니다. */
.header .group-search .logo {}

/* .group-search 내부의 .logo 내부의 링크(a)에 스타일을 적용합니다. */
.header .group-search .logo a {
  display: block; /* 블록 수준 요소로 설정 */
  margin-right: 12px; /* 오른쪽 여백 설정 */
  padding: 17px 17px 17px 27px; /* 내부 여백 설정 */
}

/* .group-search 내부의 .logo 내부의 SVG 이미지에 스타일을 적용합니다. */
.header .group-search .logo svg {
  width: 24px; /* 너비 설정 */
  height: 24px; /* 높이 설정 */
}

/* .group-search 내부의 .logo 내부의 SVG path에 스타일을 적용합니다. */
.header .group-search .logo path {
  fill: #03c75a; /* 채우기 색상 설정 */
}

/* .group-search 내부의 form 요소에 스타일을 적용합니다. */
.header .group-search form {
  flex: 1; /* 플렉스 컨테이너 내에서 공간을 나눔 */
}

/* .group-search 내부의 fieldset에 스타일을 적용합니다. */
.header .group-search fieldset {
  display: flex; /* 플렉스 컨테이너로 설정하여 자식 요소들을 가로로 배열 */
}

/* .group-search 내부의 .input-text에 스타일을 적용합니다. */
.header .group-search form .input-text {
  flex: 1; /* 플렉스 컨테이너 내에서 공간을 나눔 */
  height: 58px; /* 높이 설정 */
  color: #000; /* 글자 색상 설정 */
  padding: 17px 0; /* 내부 여백 설정 */
  font-size: 2rem; /* 글꼴 크기 설정 */
  line-height: 24px; /* 줄 높이 설정 */
  font-weight: bold; /* 글꼴 두껍게 설정 */
  outline: 0; /* 아웃라인 제거 */
}

/* .group-search 내부의 .btn-keyboard에 스타일을 적용합니다. */
.header .group-search form .btn-keyboard {
  padding: 0 3px; /* 내부 여백 설정 */
}

/* .group-search 내부의 .btn-help에 스타일을 적용합니다. */
.header .group-search form .btn-help {
  padding: 0 6px; /* 내부 여백 설정 */
}

/* .group-search 내부의 .btn-submit에 스타일을 적용합니다. */
.header .group-search form .btn-submit {
  padding: 0 27px 0 10px; /* 내부 여백 설정 */
}

/* .group-search 내부의 .btn-keyboard의 가상 요소에 스타일을 적용합니다. */
.header .group-search form .btn-keyboard::before {
  content: ''; /* 가상 요소에 내용 없음 */
  width: 24px; /* 너비 설정 */
  height: 16px; /* 높이 설정 */
  display: block; /* 블록 수준 요소로 설정 */
  background-position: -270px -234px; /* 배경 이미지 위치 설정 */
}

/* .group-search 내부의 .btn-help의 가상 요소에 스타일을 적용합니다. */
.header .group-search form .btn-help::before {
  content: ''; /* 가상 요소에 내용 없음 */
  width: 10px; /* 너비 설정 */
  height: 6px; /* 높이 설정 */
  display: block; /* 블록 수준 요소로 설정 */
  background-position: -318px -247px; /* 배경 이미지 위치 설정 */
}

/* .group-search 내부의 .btn-submit의 가상 요소에 스타일을 적용합니다. */
.header .group-search form .btn-submit::before {
  content: ''; /* 가상 요소에 내용 없음 */
  width: 25px; /* 너비 설정 */
  height: 25px; /* 높이 설정 */
  display: block; /* 블록 수준 요소로 설정 */
  background-position: -295px -329px; /* 배경 이미지 위치 설정 */
}

/* .group-nav에 스타일을 적용합니다. */
.header .group-nav {
  width: 676px; /* 너비 설정 */
  margin: 72px auto 0; /* 위쪽 여백 및 수평 가운데 정렬 */
}

/* .group-nav 내부의 .nav-list에 스타일을 적용합니다. */
.header .group-nav .nav-list {
  display: flex; /* 플렉스 컨테이너로 설정하여 자식 요소들을 가로로 배열 */
  gap: 4px; /* 자식 요소 사이의 간격 설정 */
}

/* .group-nav 내부의 .nav-item에 스타일을 적용합니다. */
.header .group-nav .nav-item {
  flex: 1; /* 플렉스 컨테이너 내에서 공간을 나눔 */
}

/* .group-nav 내부의 .nav-item 내부의 링크(a)에 스타일을 적용합니다. */
.header .group-nav .nav-item a {
  display: flex; /* 플렉스 컨테이너로 설정하여 자식 요소들을 세로로 배열 */
  flex-direction: column; /* 자식 요소들을 세로 방향으로 정렬 */
  align-items: center; /* 가로 중앙 정렬 */
  gap: 7px; /* 자식 요소 사이의 간격 설정 */
}

/* .group-nav 내부의 .nav-item 내부의 아이콘 요소에 스타일을 적용합니다. */
.header .group-nav .nav-item [class*="ic-"] {
  display: flex; /* 플렉스 컨테이너로 설정하여 자식 요소들을 가로로 배열 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  position: relative; /* 상대 위치 지정 */
  width: 48px; /* 너비 설정 */
  height: 48px; /* 높이 설정 */
}

/* .group-nav 내부의 .nav-item 내부의 아이콘 요소의 가상 요소에 스타일을 적용합니다. */
.header .group-nav .nav-item [class*="ic-"]::before {
  content: ''; /* 가상 요소에 내용 없음 */
  display: block; /* 블록 수준 요소로 설정 */
  position: absolute; /* 절대 위치 지정 */
  top: -2px; /* 위쪽으로 약간 이동 */
  left: -3px; /* 왼쪽으로 약간 이동 */
  background-position: 0px -128px; /* 배경 이미지 위치 설정 */
  width: 54px; /* 너비 설정 */
  height: 54px; /* 높이 설정 */
}

/* .group-nav 내부의 .nav-item 내부의 아이콘 요소의 가상 요소에 스타일을 적용합니다. */
.header .group-nav .nav-item [class*="ic-"]::after {
  content: ''; /* 가상 요소에 내용 없음 */
  width: 44px; /* 너비 설정 */
  height: 44px; /* 높이 설정 */
  z-index: 1; /* Z-인덱스 설정 */
}

/* .group-nav 내부의 .nav-item 내부의 .name에 스타일을 적용합니다. */
.header .group-nav .nav-item .name {}

/* .group-nav 내부의 .nav-item 내부의 .ic-mail에 스타일을 적용합니다. */
.header .group-nav .nav-item .ic-mail::after {
  background-position: -250px -90px; /* 배경 이미지 위치 설정 */
}

/* .group-nav 내부의 .nav-item 내부의 .ic-cafe에 스타일을 적용합니다. */
.header .group-nav .nav-item .ic-cafe::after {
  background-position: -250px 0; /* 배경 이미지 위치 설정 */
}

/* .util-area에 스타일을 적용합니다. */
.header .util-area {
  position: absolute; /* 절대 위치 지정 */
  top: 18px; /* 위에서 18px 떨어진 위치 */
  display: flex; /* 플렉스 컨테이너로 설정하여 자식 요소들을 가로로 배열 */
}

/* .util-area의 왼쪽 부분에 스타일을 적용합니다. */
.header .util-area.left {
  left: -10px; /* 왼쪽에서 10px 떨어진 위치 */
}

/* .util-area의 오른쪽 부분에 스타일을 적용합니다. */
.header .util-area.right {
  right: -10px; /* 오른쪽에서 10px 떨어진 위치 */
}

/* .util-area 내의 자식 요소들에 스타일을 적용합니다. */
.header .util-area > * {
  padding: 10px; /* 내부 여백 설정 */
}

/* .util-area 내의 .btn-pay에 스타일을 적용합니다. */
.header .util-area .btn-pay {
  padding: 7px; /* 내부 여백 설정 */
}

/* .util-area 내의 .btn-menu에 가상 요소를 적용하여 스타일을 적용합니다. */
.header .util-area .btn-menu::after {
  content: ""; /* 가상 요소에 내용 없음 */
  display: block; /* 블록 수준 요소로 설정 */
  background-position: -82px -329px; /* 배경 이미지 위치 설정 */
  width: 26px; /* 너비 설정 */
  height: 26px; /* 높이 설정 */
}

/* .util-area 내의 .btn-pay에 가상 요소를 적용하여 스타일을 적용합니다. */
.header .util-area .btn-pay::after {
  content: ""; /* 가상 요소에 내용 없음 */
  display: block; /* 블록 수준 요소로 설정 */
  background-position: -295px -177px; /* 배경 이미지 위치 설정 */
  width: 32px; /* 너비 설정 */
  height: 32px; /* 높이 설정 */
}

/* .util-area 내의 .btn-talk에 가상 요소를 적용하여 스타일을 적용합니다. */
.header .util-area .btn-talk::after {
  content: ""; /* 가상 요소에 내용 없음 */
  display: block; /* 블록 수준 요소로 설정 */
  background-position: -190px -329px; /* 배경 이미지 위치 설정 */
  width: 26px; /* 너비 설정 */
  height: 26px; /* 높이 설정 */
}

/* .util-area 내의 .btn-alert에 가상 요소를 적용하여 스타일을 적용합니다. */
.header .util-area .btn-alert::after {
  content: ""; /* 가상 요소에 내용 없음 */
  display: block; /* 블록 수준 요소로 설정 */
  background-position: -136px -329px; /* 배경 이미지 위치 설정 */
  width: 26px; /* 너비 설정 */
  height: 26px; /* 높이 설정 */
}

이 CSS 코드는 웹 페이지의 헤더 부분에 대한 스타일을 정의합니다. 각 요소와 속성에 대한 주석이 포함되어 있으며, 각 스타일의 목적과 설정값이 설명되어 있습니다.