에어비앤비 홈페이지 클론 코딩_Header

에어비앤비 홈페이지 클론 코딩 Header 부분을 끝냈다

Header 부분 밑에 width:100% 선을 추가하는게 어려웠는데 (좌우 여백이 생겨서)

 

나는 styled-components를 사용했기 때문에 reset 패키지도 깔아줬어야했다

style-components npm 설치

npm install styled-components

styled-components를 사용하면 css를 초기화하는 방법으로

createGlobalStyle을 import해서 많이 사용하는데

index.js파일에 

import하고 밑에 <GlobalStyle />을 추가해야 한다

나는 이 코드를 추가해서 사용했다

a{
    text-decoration: none;
    color: inherit;
  }
  input, textarea { 
    -moz-user-select: auto;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
  }
  input:focus {
    outline: none;
  }

  button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
  }

 

styled-reset 은

브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지이다.
즉, 기본 제공 스타일을 초기화시켜 호환성을 맞춘다.

reset npm 설치

npm i styled-reset

설치 후 저 코드를 추가해주면 끝!

그리고 선은 Horizonline.jsx 컴포넌트를 추가해서 

App.js파일에 검색어창 밑에 추가해주었다