Suhwanc

 

반갑다! 나는 css 어린이다. 오늘은 우리 프로젝트 사이트 디자인을 도굴하러 왔다!

 

프로젝트 페이지는 여기서 확인할 수 있다! (https://main.dgm2h3gefx045.amplifyapp.com/)

 

먼저 우리 사이트 도면을 소개하겠다! 도굴할 때 참고하도록!

 

 

 

메인 페이지이고! 헤더에서 푸터까지 보여주었으니 할 수 있겠지!

 

빨리빨리 움직이란말이야!

 

 

1. 전체 페이지 css 설정

* {
  box-sizing: border-box;
}

a:hover {
  text-decoration: none !important;
}

 

  • box-sizing을 border-box로 지정하였군! 이렇게 하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기 쉽지! 아주 기본이 되어있구만! (생활코딩 형님이 많이 추천하신다는군!)
  • text-decoration은 none, !important로 하였군! 나도 a tag 기본 값은 볼 때마다 기분이 나빠! 아주 잘했군!

 

 

2. 네비게이션 바

 

const StyledNav = styled.nav`
  min-height: 10vh;
  display: flex;
  margin: auto;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5rem;
  background: #282828;
  position: sticky;
  top: 0;
  z-index: 10;
  a {
    color: white;
    text-decoration: none;
  }
  ul {
    display: flex;
    list-style: none;
  }
  #logo {
    font-size: 1.5rem;
    font-weight: lighter;
  }
  li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4rem;
    position: relative;
  }
  @media (max-width: 900px) {
    flex-direction: column;
    padding: 2rem 1rem;
    #logo {
      display: inline-block;
      margin: 1rem;
    }
    ul {
      padding: 1rem;
      justify-content: space-around;
      width: 100%;
      li {
        padding: 0;
      }
    }
  }
`;

 

  • min-height는 최소 높이를 의미한다! 아니 vh 단위를 모른다고? 4번 교육생은 자기 모니터만 볼 줄 아는 이기주의야!
    vh는 viewport의 높이에 근거해! 10으로 설정했다면 viewport의 10% 높이라는 것이지! 아니 viewport도 모른다고? 당장 너가 보는 화면이 viewport야! 명심하도록!
  • position은 sticky로 설정하였군! 보통 네비게이션 바에서 자주 쓰이는데, 이렇게하면 아래로 스크롤해도 저 네비게이션 바는 유지가 된다! 추가로 top은 0으로 해서 위에 쩍 붙어버렸구만! 하하 아주 잘했어! (sticky는 document flow로 top, bottom, left, right 설정으로 위치 조절이 가능하네!)
  • z-index는 10으로 설정했군! 이건 z축에서 요소를 위에 둘지(above) 아래 둘지 정하는 건데, 양수면 위에 음수면 아래 위치해.
    아래 위치한다는건 다른 요소랑 겹치면 그 요소는 안보인다는 것이야! 보통 10정도면 거의 대부분 위에 둘 거라는 것이겠지!

 

나머지는 너 알아서 공부해!

 

끝난 줄 알았지! 정신 안차릴래!

 

 

네비게이션 바 안에 리스트도 봐야할 것 아니야! 여기도 잘 보면 positioning 이 들어가있다고!

 

 

저걸 한 줄 빼면 이렇게 폐급이 되는거야! 정신 똑바로 차려!

 

저 부분은 css 코드만 보면 이해할 수 없어! 아래 줄 코드도 참고하도록!

 

 

리액트에 인라인 스타일을 적용할 때는 CSS와는 다르게 캐멀 케이스로 속성명을 작성하지!

즉 marginTop은 css의 margin-top과 동일하고, 1rem만큼 현재 위치에서 아래로 이동한다네!

(Tip: 대부분의 브라우저에서 기본 1rem은 16px로 설정되어 있다네!)

 

그래서 relative로 포지셔닝을 하게되면 해당 글자에서의 marginTop 1rem 위치로 이동하게 되는거야!

 

 

3. 배경과 사진

 

 

마지막으로 메인 화면들이다! 이들은 사실 3중주로 구성되어 있지!

 

 

얘네들도 z-index를 이용하고 있어!

가장 밑 배경이 되는 애니메이션 그림이 0, 내용이 1, 사진이 2로 설정되어있더군!

 

다른거 배우면 또 오겠다! 안녕~

'CSS' 카테고리의 다른 글

[css] Margin Collapsing  (3) 2021.05.28
[css] Selector  (0) 2021.05.28