[무작정 포트폴리오] 2. 반응형 헤더 제작

ICT 인턴십 면접 기간이라 잠시 멈췄던 포트폴리오 사이트를 다시 만들기 시작했다. 인턴십 관련 이야기는 ICT 인턴십 시리즈에서 볼 수 있다.

기술 스택 변경

헤더 제작 및 반응형 적용

컨텐츠 설명

궁금증

🙏 기술 스택 변경

이전 글 [무작정 포트폴리오] 1. 기획 에서는 Vue를 사용하려고 했었다.
어느정도 html, css, javaScript에 대해서 익혔다고 생각했기에 프레임워크를 사용해보고 싶었고 React와 Vue를 고민하다 기존 Templates을 유지하며 개발할 수 있는 Vue를 선택하여 공부해왔기 때문이었다.

꽤 시간을 들여 Vue를 공부해놓고 기술을 변경하는 이유는 아래와 같다.

현업에선 React가 아직 훨씬 많이 사용한다.

면접 준비 과정에서 javaScript 뿐만 아니라 html, css 의 전반적인 이해도가 부족함을 느꼈다.

그런 이유에서 우선 프레임워크에 대한 선택은 잠시 미뤄두고 조금은 원론적인 코드로 만들어보려고 한다. 그리고 추후 하나의 프레임워크를 선택해서 만들어 보고 프레임워크가 얼마나 편리한지도 몸소 느껴보려고 한다.

🖐 헤더 제작 및 반응형 적용

반응형 헤더는 반응형 웹사이트를 만들기 위한 초석이다. 반응형 웹사이트란 현재 열린 브라우져의 크기에 따라 컨텐츠의 배치 등을 다르게 하여 효과적으로 보여주는 것을 말한다.

우선 아래와 같이 헤더를 제작하였다.

일반 태그가 아닌 Semantic 태그인 nav태그를 이용하여 헤더의 기본을 구성하였고, 그 안에 필요한 요소들을 배치하였다.

<body>
  <nav class="navBar">
    <div class="navBar__home">
          <i class="fa-solid fa-book"></i>
          <a href="">Home</a>
    </div>

    <ul class="navBar__menu">
      <li><a href=""></a>About Me</li>
      <li><a href=""></a>Skills</li>
      <li><a href=""></a>Projects</li>
      <li><a href=""></a>RoadMap</li>
      <li><a href=""></a>History</li>
    </ul>

    <ul class="navBar__contact">
      <li><i class="fa-solid fa-envelope"></i></li>
      <li><i class="fa-brands fa-github"></i></li>      
      <li><i class="fa-solid fa-blog"></i></li> 
    </ul>
  </nav>

그리고 해당 컨텐츠들을 display: flex를 이용하여 배치하였다.

브라우져 창의 크기에 따라 컨텐츠 배치를 다르게 하기 위해 이번에는 css 파일에서 @media 쿼리를 이용하여 작업을 하였다.

@media screen and (max-width: 768px){
    .navBar{
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 24px;
    }

    .navBar__menu{
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navBar__menu li{
        width: 100%;
        text-align: center;
    }

    .navBar__contact{
        display: none;
        justify-content: center;
        width: 100%;
    }
}

그 이후 메뉴바 하나를 넣어 작은 화면에서는 헤더의 컨텐츠를 선택적으로 볼 수 있게 하는 작업으로 마무리 하였다.

더 자세한 코드는 깃허브 링크에서 확인할 수 있다.

👏 컨텐츠 설명

글자 폰트 : 구글 폰트 Akaya Telivigala

아이콘 : https://fontawesome.com/

홈 : 눌렀을 때, 홈 화면으로 돌아오는 기능을 할 것이다.
about me : 나에 대한 소개 등이 들어갈 것이다.
Skills : 사용 가능한 개발 언어, 프레임워크, 협업 툴 등을 정리할 것이다.
Projects : 진행했던 프로젝트의 깃헙 주소와 블로그 시리즈 링크 등을 포함 할 것이다.
RoadMap : 지난글의 커스텀 기능에서 말했던 로드맵 현황을 보여줄 것이다.
History : 이미 기간이 지난 로드맵에 등록했던 것들의 상태를 볼 수 있는 페이지이다.

🎨 궁금증

이전에 자바스크립트를 이용해서 브라우져의 너비에 따라 배경색을 바꾸는 작업을 진행해본 적 있다. 그런데 이번에 공부하면서 @media 쿼리를 이용하여 css 스타일링을 진행하였는데 과연 이것들의 퍼포먼스적 차이는 있는지, 또 있다면 어떠한 수준인지 궁금해서 직접 테스트하고 기록해보려고 한다.

Author And Source

이 문제에 관하여([무작정 포트폴리오] 2. 반응형 헤더 제작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@choi-ju12g/무작정-포트폴리오-2.-반응형-헤더-제작