Flex Layout을 이용한 프로젝트 - Header 1

기운찬곰·2020년 9월 4일

CSS

CSS Flex Layout

목록 보기

3/7

본 포스팅은 💻 유데미 Advanced CSS and Sass강좌 를 공부하면서 정리한 내용입니다.

SVG 아이콘 다운 받기

1. SVG 이란?

SVG는 벡터 이미지를 표현하기 위한 포맷으로 W3C에서 만든 벡터 이미지 표준이다. 반면 PNG, JPEG, GIF는 래스터 이미지 혹은 비트맵 이미지라고 부른다. SVG는 XHTML과 비슷한 XML 언어로 선이나 유동적인 그림을 그릴 때 많이 사용합니다.

참고로 svg 코드는 다음과 같이 되어있다.

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-bookmark" viewBox="0 0 20 20">
      <title>bookmark</title>
      <path class="path1" d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
    </symbol>
  </defs>
</svg>

신기하게도 이런 코드가 아이콘 같은 이미지를 표현할 수 있다. 실제로 위 코드를 작성하는건 어려울거 같고 이미 많은 샘플이 존재하므로 그걸 이용해보도록 하겠다.

2. 다운받기

💻 iconmoon 사이트 접속하기

사이트에 접속해보면 많은 종류의 라이브러리들이 있는데 우리는 그중에서 Entypo+를 사용해보도록 하겠다.

아래는 Entypo+ 안에 쓸 수 있는 아이콘 모형들이다. 여기서 사이트에서 사용할 아이콘을 선택한 다음 밑에 있는 Generate SVG & More을 클릭한다.

그럼 아래처럼 나오는데 다운로드 하기전에 톱니타퀴 모양(설정)을 클릭한 다음, PNG 선택이 되어있던것을 해제해준다. 우리가 원하는 포맷은 SVG이기 때문이다.

3. 프로젝트 적용

다운받은 압축파일을 해제시켜준다.

다운로드 받은 파일 중에 필요한건 SVG 폴더와 symbol-defs.svg이다. 이걸 자신의 프로젝트로 이동시켜주자. 이동시킨 후에 symbol-defs.svg은 sprite.svg로 이름을 바꿔줬다.

그런 다음 html에서 다음과 같이 사용할 수 있다.

원래는 직접 svg 코드를 작성한 다음에 path를 써서 그림을 표현했어야 했지만, 우리는 이미 만들어진게 파일이 있기 때문에 use 태그에서 xlink를 통해 img 폴더에 있는 sprite.svg 파일에 icon-magnifying-glass라는 id를 가진 svg를 불러서 쓸 수 있게 되는 것이다.

<svg>
   <use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
</svg>

Header HTML 작성

자, 이제 Header에 사용할 SVG 아이콘도 다운받았으니 본격적으로 index.html에서 Header 코드를 작성해보자.

// index.html

<header class="header">
  <img src="img/logo.png" alt="trillo logo" 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">Jones</span>
    </div>
  </nav>
</header>

header 구조를 보면 크게 3등분으로 나눠진것을 볼 수 있다. img와 form과 nav. 이렇게 나눈 이유는 나중에 flex를 이용해서 정렬할 예정이기 때문이다.

근데 좀 특별한 점은 class 명칭이다. 아래와 같이 뭔가 통일성있는 class 명칭을 사용하고 있다는 것을 눈치챘을 것이다.

form의 search 경우
- input : search__input,
- button : search__button,
- svg : search__icon
nav의 user-nav 경우
- div : user-nav__icon-box,
  - svg : user-nav__icon,
  - span : user-nav__notification,
- div : user-nav__user,
  - img : user-nav__user-photo,
  - span : user-nav__user-name

CSS BEM 방법론

이렇게 지정하는 것을 CSS BEM 방법론이라고 부른다. 이것을 사용하는 이유는 다음과 같은 이점이 있기 때문이다.

클래스 중복 문제 해결

Sass 디자인 구조에 적합

이렇게 2가지 이유가 가장 크다고 볼 수 있겠다. 뭐...지금 이해가 안가더라도 하다보면 이해하게 될 것이다.

sass 폴더안에 파일 중에 _componets.scss를 열어서 다음과 같이 작성해주자. components 파일은 각 요소마다의 디자인 코드를 작성하는 파일이라고 보면 된다.

////////////////////////////////////////////////
// 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 {
  }
}