Sass를 활용한 미니프로젝트

근듀·2023년 6월 20일

미니프로젝트

목록 보기

3/3

💿 완성된 페이지 미리보기

📌 사용 기술
html Sass

🔗코드보기 🔗페이지보기 🔗배포사이트보기

📌 제작기간: 23년 6월 19일 ~ 23년 6월 24일

구성 시안

🔗 리얼월드 홈페이지

만들게 된 이유

수업 도중 배웠던 Sass 가 어려워서 익숙해지려고 프로젝트를 시작했습니다.
리얼월드로 시안을 정했던 이유는 첫번째로 가고 싶은 회사 중 한 곳이였고 두번째는 홈페이지를 둘러보니 Sass로 구현할 수 있는 부분이 많아보여서였습니다.

🦆 Detail

🏷️ 이번 프로젝트의 가장 큰 목표
image 폴더를 따로 만들지 않고 전부 리얼월드에 있는 이미지 주소를 이용하여 제작해보고자 합니다.

1. 파비콘 설정

<link rel="icon" type="image/png" sizes="16x16" href="~" data-gatsby-head="true">

이렇게 많은 icon이 있어서 위에서 부터 하나씩 대입해보았습니다.
그러다가 rel='apple-touch-icon'과 rel='icon' 이것이 다르다는 것을 알고 검색해보았습니다.

apple-touch-icon iOS 기기에서 사용하는 파비콘을 지정한다.
icon 모든 기기에서 사용하는 파비콘을 지정하는데 사용한다.

즉, 제가 구현하고 있는 것은 브라우저이기 때문에 rel='icon' 속성을 사용해야 한다는 것을 깨닫고 밑 부분에 있는 코드를 넣었더니 원하는 파비콘 설정이 완료되었습니다.

2. header 영역 브라우저 상단에 고정시키기

.realworldHeader{
  background: $nav-bgcolor;
  position: fixed;
  top: 0;
  z-index: 1000;
  }

position: fixed 와 top: 0을 주어 브라우저 상단에 고정시키고 레이어 맨 위에 존재해야 하기 때문에 z-index: 1000을 주었습니다.

3. background-image 투명하게 만들기

  &::before{
    content: "";
    background-image: url(~);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 1100px 0;
    opacity: 0.5;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
  }

가장 부모 요소에 투명한 배경이미지를 넣고 싶어서 저 코드를 그대로 부모 요소에 넣어줬더니 하위 요소들까지 전부 투명해졌습니다. 그래서 어떻게 할까 고민하다가 부모 요소보다 전에 있는 가장 요소를 만들어서 투명한 배경을 깔아주었습니다.

4. 테마들을 슬라이드처럼 보여주기

리얼월드 페이지처럼 테마 이미지들을 슬라이드 이미지로 보일 수 있도록 애니메이션 효과를 주었습니다. 마우스로 이동가능하게 하고 싶었지만 아직 script는 배우지 않아 구현해 내지 못했습니다.

@keyframes moveTheme{
  15%{
    transition: transform,1s;
    transform: translateX(-25%);}
  30%{transform: translateX(-55%);}
  42%{transform: translateX(-80%);}
  58%{transform: translateX(-85%);}
  69%{transform: translateX(-80%);}
  78%{transform: translateX(-55%);}![](https://velog.velcdn.com/images/f_vlkoklv/post/b831ed41-850a-4b24-b7b1-e8296f37afa2/image.gif)

  85%{transform: translateX(-25%);}
  100%{transform: translateX(0%);}
}

@mixin afterAnimation{
  animation-name: moveTheme;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out 0s;
  animation-delay: 1.5s;
}

5. 콘텐츠 문의하기 영역 브라우저에 고정시키기

리얼월드 페이지에 나와있는 콘텐츠 문의하기 영역을 똑같이 브라우저에 고정시켜주었습니다.

// 콘텐츠 제작 문의하기
.rwInquiry{
  position: fixed;
  right: 10px;
  bottom: 10px;
 }

🖥️ 배운점

① 첫 번째 오류

리얼월드 홈페이지 처럼 브라우저 가장 윗부분에 header 영역을 붙이고 싶어서 position: sticky 를 주었습니다. 리얼월드 코드를 확인해보니 동일하게 주었길래 완벽하다 생각했는데 투명한 배경이 먹히지 않았습니다. position이면 분명 살짝 떠있어서 투명한 배경을 주면 밑에 존재하는 요소가 보여야 하는데 아무리 해도 보이지 않았습니다. 그런데 밑부분으로 슬라이드를 했더니 제가 원했던 결과가 나왔습니다.

그래서 header 영역 전에 가상요소를 주어 투명한 배경도 만들어보고, header 영역과 동일한 투명한 요소를 만들고 relative를 준 다음 header 영역을 absolute로 띄워보기도 하고 다양한 시도를 해보았습니다. 리얼월드 코드가 sticky로 나와있어서 position을 바꿀 생각을 못해봤습니다.
정말 방법을 모르겠어서 개발자 친구에게 물어봤더니 position: fixed를 줘보라고 조언을 받아 코드를 변경해보았습니다.

드디어 제가 원하는 형태가 나오기 시작했고 왜 그런가 알아보았습니다.

sticky 는 자리를 지키다가 스크롤 할 때 공중으로 띄지는 것
fixed는 처음부터 공중으로 띄워진 상태에서 고정되는 것

position은 static, relative, absolute만 사용하던 저에게는 생소한 속성이였고 이번 기회로 확실하게 개념을 알게 되었습니다.

② 두 번째 오류

완성한 후 문법 검사를 해보았더니 오류가 3개 나타났습니다. 그것은 전부 다 버튼요소였습니다. 1개는 button을 a로 감싼 것이였고 2개는 a를 button으로 감싼 것이였습니다.
둘다 오류가 난 것을 보고 그러면 대체 어떻게 해야 button요소에 링크를 걸 수 있을까 고민하게 되었습니다.
검색을 해서 찾아보니 button 태그에 링크를 연결하는 방법은 onclick="location.href='#'"속성을 추가해주는 것이였습니다. 링크 연결은 무조건 a태그로만 해야되는 줄 알고있었는데 이런 속성이 있다는 것을 이번 기회에 배우게 되었습니다. 속성을 추가하고 a태그를 삭제해주었더니 문법검사에서 모두 오류없이 나왔습니다.