온라인 강의/Advanced CSS and Sass [Udemy]

75. Building the Header - Part 1

유호야 2023. 8. 3. 00:25
반응형

 

Icon font 보다 svg img가 더 나은 대안으로 사용되고 있다.

icomoon.com 

아이콘을 무료로 사용할 수 있는 유용한 웹사이트다

 

 

_components.scss

////////////////////////////////////////////////
/// LOGO

.logo {
  height: 3.25rem;
}

////////////////////////////////////////////////
/// SEARCH
.search {
  &__input {
  }

  &__button {
  }
  &__icon {
    height: 2rem;
    width: 2rem;
  }
}

/// ////////////////////////////////////////////////
/// USER NAVIGATION
.user-nav {
  &__icon-box {
  }

  &__icon {
    height: 2.25rem;
    width: 2.25rem;
  }

  &__notification {
  }

  &__user {
  }

  &__user-photo {
    height: 3.75rem;
    border-radius: 50%;
  }

  &__user-name {
  }
}

 

layout.scss

.container {
  max-width: 120rem;
  margin: 8rem auto;
  background-color: var(--color-grey-light-1);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.3);

  min-height: 50rem;
}

.header {
  height: 7rem;
  background-color: #fff;
  border-bottom: var(--color-grey-light-2);
}

.content {
  display: flex;
}

.sidebar {
  background-color: var(--color-grey-dark-1);
  flex: 0 0 18%;
}

.hotel-view {
  background-color: #fff;
  background-color: orange;
  flex: 1;
}

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />

    <title>trillo &mdash; Your all-in-one booking app</title>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <img src="img/logo.png" alt="" class="logo" />
        <form action="#" class="search">
          <input type="text" class="search_input" placeholder="Search hotels" />
          <button class="search__button">
            <svg class="search__icon">
              <use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
            </svg>
          </button>
        </form>
        <nav class="user-nav">
          <div class="user-nav__icon-box">
            <svg class="user-nav__icon">
              <use xlink:href="img/sprite.svg#icon-bookmark"></use>
            </svg>
            <span class="user-nav__notification">7</span>
          </div>
          <div class="user-nav__icon-box">
            <svg class="user-nav__icon">
              <use xlink:href="img/sprite.svg#icon-chat"></use>
            </svg>
            <span class="user-nav__notification">13</span>
          </div>
          <div class="user-nav__user">
            <img
              src="./img/user.jpg"
              alt="User photo"
              class="user-nav__user-photo"
            />
            <span class="user-nav__user-name">Yujin</span>
          </div>
        </nav>
      </header>
      <div class="content">
        <nav class="sidebar">Navigation</nav>
        <main class="hotel-view">Hotel view</main>
      </div>
    </div>
  </body>
</html>
반응형