[HTML+CSS] 반응형 헤더 제작

엘리님의 영상을 참고해서 간단한 반응형 헤더를 제작해보았다.

 

참고영상

웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube

 

---

무언가를 만들어서 게시글로 작성해보는 것은 처음인데 앞으로 일관성 있게 작성하기 위해서 글 안에 담는 내용을 통일시킬 생각이다.

 

글 안에 들어가는 내용은 1. 무엇을 만들었는가, 2. 구현 과정 중 무엇이 어려웠고 어떻게 해결할 수 있었는가, 3. 느낀점 이 3가지가 될 것 같다. 글을 처음 작성하는 거라 앞으로 어떻게 작성할지 더 알아보고 생각 해봐야겠다.

---

1. 결과물

 

일단 이 반응형 헤더를 구현하기 전에 내가 알고 있는 지식이 터무니 없이 부족했다. 알고 있는 건 html,css에 대한 얕은 지식, html을 작성하는 방법, css를 작성하는 방법, 그리고 flex box를 이용해서 아이템들을 배치하는 방법 정도였다. 이를 가지고 일단 뭐든 만들어보고 싶어서 유능한 개발자 분의 소스와 설명까지 있는 이 반응형 헤더를 선택했다.

 

 

기본 화면은 이렇게 상단에 사이트 로고, 메뉴, 아이콘이 표시되고 화면을 줄이다가 일정 크기가 되면 오른쪽에 bar 아이콘이 나타난다. 버튼을 클릭하면 메뉴가 아래로 나타나는 반응형 헤더이다.

layout1

 

layout2

 

토글 클릭시

 

예전에 html, css를 배울 때는 html을 다 작성하지 않고 일부분만 작성한 후에 css작업을 하고 다시 html작성을 하는 식으로 했었는데 html을 다 작성한 후에 css를 작성하는 것이 효율적인 것 같아서 이번에는 그렇게 했다.

 

---

2. 구현 과정에서 어려웠던 점 및 해결

 

1. 반응형으로 만드는 방법

• 이것도 모바일 우선이냐 데스크탑 우선이냐에 따라 달라지는 것 같다. 모바일 우선이면 @media (min-width: 값), 데스크탑 우선이면 @media (max-width: 값)으로 적어준다. 근데 이게 당연한 게 모바일 기준으로 반응형을 만들려면 처음엔 작았다가 커질 때 배치가 달라지는 것이기 때문에 지정해준 최소너비를 기준으로 그보다 작은 수치에서는 변함이 없다가 최소값을 넘어가는 순간 반응이 일어나야 되고, 반대로 데스크탑의 경우에는 커지다가 작아질 때 배치의 변경이 일어나기 때문에 최대값을 지정해서 그 최대값을 전후로 배치의 변화가 있으면 된다. 
• @media (max or min -width: 값)을 적었다면 해당 annotation을 {}로 묶어주고 이 안에다가 배치의 변화를 주면 된다.

 

2. css를 작성하기 전에 값들을 변수에 저장해서 사용하는 것

• :root{}안에다가 --padding:10px; background-color: #d79462 이런 식으로 자주 사용될 값들을 적어준다.
• 사용 방법은 var(변수명)이다.

 

3. class명 이용 방법

• 클래스 명을 아래의 item과 같이 공백을 이용해서 나타낼 수 있는데 이때 item1,2,3를 모두 선택하고 싶다면 .item만 작성해도 된다! 
• <div class="container"> <li class="item item1"></li> <li class="item item2"></li> <li class="item item3"></li> </div>​

 

4. item사이즈

• item이 화면의 크기에 따라 작아지고 커지게 하고 싶다면 item들의 부모의 사이즈를 100%로 해주면 된다.

 

5. click이벤트가 발생했을 때 내가 원하는 화면으로 바꾸는 방법 -> 더 공부하기

 

1. element1.onclick = function(){...}

2. element1.addEventListener('click', function() {...} );

 

이렇게 2가지 방법으로 click이벤트가 발생했을 때 내가 지정한 함수의 내용이 실행되도록 할 수 있는 것 같다. 

여기서는 토글을 클릭했을 때 레이아웃이 변경되어야 하고 다시 클릭했을 때 이전 레이아웃으로 돌아오는 식으로 동작해야 하기 때문에 element1.onclick에 전달되어야 하는 함수 안에 element2.classList.toggle('active');를 작성했다. 

 

css파일에도 변경되어야 하는 element2를 선택해서 element2.active{...}와 같이 작성해주어야 한다.

class

---

3. 느낀 점(앞으로 공부해야 될 것)

1. 우선 아직 정적 웹 페이지든 반응형 웹 페이지든 만들어 본 게 거의 없다보니 내가 작성하는 소스가 맞는 건지, 제대로 작성은 한 건지 아직 잘 모르겠다. 기본적으로 어떻게든 만들 수는 있을 것 같은데 소스가 비효율적일 것 같다.

2. 변수명을 작성하는 방법(ex. --padding-right)이 완전 낯설다...

3. js를 이용해서 이벤트를 처리하는 방법을 공부해서 다른 이벤트들도 많이 다뤄봐야 할 것 같다.

 

4. 구현을 다 하고 글을 작성하려고 하니까 내가 뭘 힘들어했는지, 추가로 어떤 걸 공부해야 했는지 등이 기억이 잘 안 난다. 앞으로 구현을 하면서 틈틈히 어려웠던 것들을 적어놔야겠다.

 

 

전체 소스: https://github.com/liMoHa/front-study/tree/main/responsiveHeader