그동안 TIL 안 쓴 이유 변명타임 😅

사실 지금까지 아무것도 안 하고 탱자탱자 논 것은 아니고.. >wecode의 정식 프로그램 시작 전 4주간 진행되는 >westudy 1주 차 과제인 '자기소개 웹 페이지 만들기'와 2주 차 과제인 'JavaScript 공부하기'를 진행했다.

1주 차 금요일(6/19)에 IELTS 시험이 있었어서 평일은 시험 대비를 했고 시험이 끝난 후 토요일부터 부랴부랴 웹 만들기를 진행했다.

그동안 TIL은 안 쓰고 넘겼는데 강의를 들으면서 배운 것은 정리하기가 쉬웠지만, 직접 코드를 작성하다가 막히는 부분을 해결하는 과정에서 얻은 지식은 강의처럼 정리된 지식이 차곡차곡 쌓이지 않아서 더욱 정리하기가 쉽지 않았고 정리도 안 됐고 무엇보다도 귀찮았다.😏

그래서 오늘은 2주 차를 마무리하면서 1주 차와 2주 차에 겪었던, 해결했던 문제들을 적어봐야겠다.

Navigation Bar 🧭

페이지로 이동 👉🏻

위의 이미지는 큰 화면에서 볼 때의 모습이며 총 4개의 구역으로 나누어져 있다.

스크롤을 내려도 상단에 고정이 되도록 position: sticky;를 사용했으며, 배경색을 반투명으로 처리해보았다.

background-color: rgba(54, 77, 85, 0.7);

Home Logo 🏡

처음에는 Font Awesome에서 주워온 로고 이미지와 'Home'이라는 텍스트가 있었지만 아무리 봐도 너무 별로라서 미모지를 넣어줬다..! 나만의 개성이 더 살아난 느낌이라 만족쓰,, 카톡으로 바로 받은 파일은 png 파일이라 배경도 없어서 누끼도 안 따도 되고 좋았다!! (맥북으로 에어드랍했을때는 jpg 확장자라 배경이 남아있었음..다른 방법이 있는 걸까? 쭈굴,,)

Menu 🐶

메뉴는 초반에 여러 개를 만들어두고 여러 가지 페이지를 만들어보려고 했었는데 하다 보니 그건 나의 능력으로는 1주일로 끝나지 않을 것 같았고 무엇보다도 채울 내용도 없었다. 🙈

그리고 메뉴를 클릭하면 해당 페이지로 스크롤이 되는 게 처음에는 순간이동처럼 '팟!' 하며 이동했는데 그건 전혀 cool 하지 않아서 구글링해본 결과 아주 간단하지만 내가 원했던 효과를 얻을 수 있었다.

html {
  scroll-behavior: smooth;
}

이런 아름답고도 간단하지만 큰 효과를 내는 것을 왜 무료강의들은 알려주지 않았는가,,?! 라고 짧게 생각을 했지만 나는 강의를 끝까지 듣지 않았는걸,,,👀 너무 간단해서 안 알려준 건가 싶기도 하고.. ㅋㅋ

마우스를 올리면 이렇게 버튼처럼 배경도 생기고 폰트 색깔이 변하게 해보기도 했다.

html

<ul class="navbar__menu">
  <li class="menuAbout"><a href="#about">About</a></li>
  <li class="menuFavorites"><a href="#favorites">Favorites</a></li>
  <li class="menuPortfolio"><a href="#portfolio">Portfolio</a></li>
</ul>

css

.navbar__menu {
  margin:0;
  display: flex;
  align-self: center;
  justify-content: space-between;
  width: 40vw;
  max-width: 500px;
  list-style: none;
  padding-left: 0;
}
.navbar__menu li > a {
  padding: 8px 12px;
  display: block;
}
.navbar__menu li:hover {
  background-color: var(--accent-color);
  border-radius: 5px;
  transition:all .5s ease;
}
.navbar__menu li:hover a{
  color:black;
  transition: all .5s ease;
}

var(--accent-color);이 부분은 '유지/보수할 때 이런 방법도 쓴다'라는 말을 듣고 나중에 Hoxy,,, 하는 마음에 어설프게 따라 해본 부분이다..

css

:root {
  --text-color: #f0f4f5;
  --background-color: #8a989c;
  --accent-color: #cfd8dc;
}

이런 식으로 해두면 폰트나 배경색을 한 번에 바꿔야 할 일이 생길 때 쉽게 가능하다고 한다..!

Icons 🐷

메일 보내는 부분은 아직 구현하지 않았으며, 인스타그램과 깃허브, @ 아이콘은 Font Awesome에서 가져다 썼고 벨로그의 아이콘은 찾을 수가 없었기 때문에 벨로그 좌측상단에 뜨는 부분을 개발자 도구로 찾아서 긁어가서 색깔과 사이즈를 바꿔서 썼다. (이거,, 괜찮은 거죠?)

아이콘들은 메뉴와 마찬가지로 <ul>를 써서 추가했고 긁어와서 수정한 부분은 다음과 같다.

<li>
  <a target="_blank" href="https://velog.io/@seob">
    <svg width="24" height="24" viewBox="0 0 192 150" fill="none">
      <rect width="24" height="24" fill="none" rx="24"></rect>
      <path
        d="M49 65.48V57.92C53.8 56.36 59.44 54.68 65.92 52.88C72.4 50.96 76.78 50 79.06 50C84.1 50 87.1 52.4 88.06 57.2L99.76 123.62C103.48 118.7 106.54 114.56 108.94 111.2C112.66 105.92 116.08 99.86 119.2 93.02C122.44 86.18 124.06 80.06 124.06 74.66C124.06 71.42 123.16 68.84 121.36 66.92C119.68 64.88 116.5 62.3 111.82 59.18C116.62 53.06 122.62 50 129.82 50C133.66 50 136.84 51.14 139.36 53.42C142 55.7 143.32 59.06 143.32 63.5C143.32 70.94 140.2 80.24 133.96 91.4C127.84 102.44 116.02 119.06 98.5 141.26L80.68 142.52L67 65.48H49Z"
        fill="black"></path>
    </svg>
    <span>velog</span></a>
</li>

내가 바꾼 부분은 width, height, viewBox, fill 부분이다.
svg도, rect도, path도 다 처음 봤지만 당황하지 않고(?) 아이콘 훔쳐 오기 성공..!

아이콘 부분에 마우스 호버 했을 경우에는 다른 효과를 주고 싶어서 누군가의 동영상을 보고 따라 해본 결과물 👇🏻

마우스를 올리면 말풍선 부분이 아이콘이 있는 높이에서 촤르르 하고 내려온다.

여기서 새롭게 알게 된 점은 두 가지가 있다. 첫 번째로는, 말풍선의 삐침 부분.

.navbar__icons li a span::before{
  content:'';
  position: absolute;
  left: 50%;
  bottom: 1.9em;
  margin-left: -4px;
  border-bottom: 7px solid var(--accent-color);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

border를 이용해서 이런 식으로 모양을 만들어낼 수 있다니 너무 신기했다. 테두리만 쳐주는 줄 알았는데..! 나중에는 이와 같은 방식으로 메인 페이지에서 화살표도 만들게 되었다.

그리고 두 번째로 말풍선의 border-radius 부분도 꼭짓점 4개를 모두 다르게 적용할 수 있다는 점도 신기했다.

 border-radius: 6px 0;

이런 식으로 비대칭으로 굴곡을 줄 수 있다는 점!

Hamburger Button 🍔

이 부분은 가로 길이가 넓을 때는 안보이지만 스마트폰이나 테블릿 등 가로 길이가 좁을 때보이는 부분이다.

네비바는 스크롤을 조금 내려보면 이렇게 반투명상태인 것을 알 수 있다.

최상단에서는 불투명하게, 스크롤을 조금 내리면 반투명하게 하고 싶었지만 그냥 맨 위에는 스크롤 공간을 남겨두고 항상 반투명인 상태로 두는 게 지금 내 실력에는 적당한 것 같아서 이렇게 했다.

햄버거 버튼은 클릭하면 회전하는 효과와 함께 메뉴바가 생긴다.

메뉴 부분을 창의 밖으로 배치해서 아래로 부드럽게 펼쳐지는 효과를 넣어보려고 했지만, 그냥 나오는 부분도 크게 나쁘지 않은 것 같아서 이 방식으로 하기로 했다.

이 부분에서 자바스크립트를 써야 했다.

JavaScript를 쓴 이유

처음 목표는 복잡한 기능 없이 Html과 CSS만 사용해서 최대한 해보려고 했는데 한번 시도해보는 것도 나쁘진 않을 것 같아서 무작정 부딪혀봤다.

저 부분을 만들 당시 JS는 공부를 하나도 안 한 상태여서 유튜브 동영상을 보고 따라하기만 했는데 나중에 2주 차 때 투두리스트를 만들면서 조금 익숙해져서 1주 차에는 없었던 기능을 넣을 수 있었다.

그래서 어떻게? 🤷🏻‍♂️

1주 차에 만든 내용
JavaScaript

const checkBtn = document.querySelector(".checkBtn");
const menu = document.querySelector(".navbar__menu");
const icons = document.querySelector(".navbar__icons");
checkBtn.addEventListener("click", () => {
  checkBtn.classList.toggle("clicked");
  menu.classList.toggle("active");
  icons.classList.toggle("active");
});

CSS

.checkBtn{
  position: absolute;
  right: 32px;
  font-size: 24px;
  color: white;
  display: none;
  transition: transform 500ms ease-in-out;
  cursor: pointer;
}
.checkBtn.clicked {
  transform: rotate(270deg);
}
#hamburgerCheck{
  display: none;
}

그리고 가로길이가 줄어들면 적용되는 부분

@media screen and (max-width: 768px) {
  .navbar {
    display: absolute;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
  }
  .navbar__menu {
    position: relative;
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .navbar__menu li {
    width: 100%;
    text-align: center;
    display: inline;
    margin: 0 2px;
  }
  .navbar__icons {
    display: none;
    justify-content: center;
    width: 100%;
    padding-left: 0;
  }
  .checkBtn{
    display: block;
  }
  .navbar__menu.active,
  .navbar__icons.active {
    display: flex;
  }
}

평소에는 햄버거 버튼을 display: none; 으로 안 보이게 해둔 후 가로 크기가 769px보다 작아졌을 경우 보였던 메뉴는 안 보이게 하고 햄버거 버튼을 보이게 하며 .active를 추가한 부분에서 display: flex;로 자바스크립트로 토글시켜주었다.

저 부분을 토글해주어서 메뉴가 보이고 숨겨지고 하게 되었다.

하지만, '펼쳐진' 상태에서 메뉴를 클릭해도 펼쳐져 있었기 때문에 햄버거 버튼을 다시 눌러주어 '닫아'줘야 했다.

그래서 2주 차 때 펼쳐진 상태에서 메뉴를 클릭해서 페이지를 이동하게 되면 메뉴창이 다시 접히게 해보았다.

JS

const checkBtn = document.querySelector(".checkBtn");
const menu = document.querySelector(".navbar__menu");
const icons = document.querySelector(".navbar__icons");
const menuAbout = document.querySelector(".menuAbout");
const menuFavorites = document.querySelector(".menuFavorites");
const menuPortfolio = document.querySelector(".menuPortfolio");
const goHome = document.querySelector(".homeLogo");
checkBtn.addEventListener("click", () => {
  menuToggle();
});
menuAbout.addEventListener("click", () => {
  menuToggle();
});
menuFavorites.addEventListener("click", () => {
  menuToggle();
});
menuPortfolio.addEventListener("click", () => {
  menuToggle();
});
function menuToggle() {
  checkBtn.classList.toggle("clicked");
  menu.classList.toggle("active");
  icons.classList.toggle("active");
}

위에 변수 선언한 부분을 보면 상당히 더러워 보이는데 처음에는 메뉴별로 클래스 이름을 menuLi로 통일해서 querySelectorAll을 사용하려고 했는데 잘 안되어서 그냥 클래스 이름을 모두 다르게 하고 한 줄씩 복붙했다.. 😅 그래도 나름 함수 선언해서 몇 줄이라도 줄여본 점..(일단 작동하니까..🙈)

다음은 제일 먼저 보이는 메인페이지에 대해 적어봐야겠다. 👋🏻