반응형 헤더 만들기

# Header

우선 헤더를 제작할 때에 나의 경우 내 깃허브 블로그를 많이 참고하였다.<br>
따라서 규격화된 사이즈가 아닐 수도 있으니 css사항에 다른 곳들도 좀 더 찾아보는 것이 좋을 것 같다.

## 반응형 기본 코드
반응형으로 사이트를 만들 때에 많이 쓰는 기본적인 코드의 틀은 다음과 같다.
```htm
@media screen and (max-width: 600px)
```
으로 max-width에는 최대 넓이가 들어가기 때문에 나와 같이 코딩할 경우 0-600px의 화면까지는 저 아래에 작성한 css요소의 설정이 들어가고 그보다 클 경우 기본으로 세팅한 내용이 들어간다고 생각하면 된다.<br>
참고로 반응형 웹의 경우 크기가 상대적으로 변경되기 때문에 요소들을 설정할 때에 절대적인 크기인 px보다는 다른 단위를 사용하는 것이 좋다.
## 크기 설정의 종류
절대적인 크기인 px는 아마 대부분의 사람들이 이미 잘 알고 있을 것 같고, 반응형에서 사용하기 좋은 크기에는 `%, rem, em`가 있다.
### 요소에 대한 상대적 크기
- %<br>
`%`는 부모 요소가 기준이다.<br>
예를 들어 li클래스의 상위요소가 div클래스라면 li 요소의 %크기는 부모인 div에 의해서 결정된다.<br>
- rem<br>
`rem`역시 요소에 대한 상대적 크기인데, 얘는 루트 요소가 기준이다.<br>
여기에서 루트 요소랑 html태그 내의 내용이다.<br>
예를 들어 html의 font-size가 16px고 div클래스의 font-size를 2rem으로 하게되면 div의 폰트 크기는 32px가 된다.
### 현재 요소가 기준
- em<br>
`em`의 경우 현재 요소의 글꼴 크기가 기준점이 된다.<br>
주로 텍스트의 크기와 관계도니 무언가를 만들 때에 em을 사용한다고 생각하면 된다.
# 헤더 기본 완성물
작은 화면에서는 더보기처럼 만들어서 더보기를 누르면 목록이 뜨도록 제작하였다.
지금은 저 상태에서 글씨만 검은색으로 바꾼 상태이다.
pc의 기본화면에서는 이렇게 뜬다.
## 헤더의 js파일
더보기 부분을 어떻게 만들었는지에 대해 혹시나 궁금해하는 분들이 있을까봐 js파일을 첨부한다.
```javascript
document.addEventListener('DOMContentLoaded', function() {
    const toggelBtn = document.querySelector('.navbar_toggleBtn');
    const menu_list = document.querySelector('.nav_bar_list');
    if (toggelBtn != null) {
        toggelBtn.addEventListener('click', () => {
            menu_list.classList.toggle('active');
        });
    } else {
        console.log("왜 btn이 null이지");
    }
});
```
나의 경우 상속된 페이지들이 있기 때문에 onload함수 사용시 다른 페이지에서 로딩과 연결해야하는 내용이 생길시 연결이 불가능할까봐 `DOMContentLoaded`를 사용하였다.<br>
또한 맨 처음에는 onclikc을 쓰려 하였으나, 여러개의 이벤트가 등록될 수도 있어서 저런 방식으로 코드를 작성하게되었다.
# footer
원래는 게시물이 다 완성되면 footer가 맨 아래에 오게 되는데, 나의 경우 현재 바디를 아직 작성하지 않아서 footer가 헤더의 바로 아래에 붙어있는 것을 확인 할 수 있다.<br>
이렇게 footer을 붙여 놓기 위해서는 여러가지 방법이 있는데, 나는 아직 바디의 내용물을 어떻게 할지 정하지를 못한 상태여서 혹시나 body가 짧아져도 하단 고정이 가능하도록 디자인을 하였다.
## footer의 고정법
- transform과 postion사용하기<br>
이번에 내가 작성한 코드 방식이다.<br>
나의 경우 응답하는 페이지가 유동적으로 변할 확률이 크다고 판단되어서 position은 fix가 아닌 relative로 설정하였다.<br>
position의 경우 y축을 -100%~0%사이로 설정할 수 있는데 나의 경우 0%로 설정하여 윗 화면을 절대 가리지 않도록 세팅하였다.
### code
```css
#wrapper{
    border-top: 1px solid;
    min-height: 100%;
    padding-bottom:135px;

}
.instagramBtn{
    color:#007bff;
    left:10%
}
.footer_div{
    height: 135px;
  position : relative;
  transform : translateY(0%);
  background: #d0e8ff;

}
.footer_icon a{
    margin: 10px;
}
```
css코드는 다음과 같고 html은 상속을 하여, 역할별로 파일을 나누어주었다.
```html
{% extends "header.html"%}

{% block footer_content %}
<div class="footer_div">
  <div class="footer_icon">
  <a href="내 인스타 주소" targhet="_blank" class="instagram_Btn"><i class="fa-brands fa-square-instagram"></i>괭시니 인스타그램</i></a>
  <a href="https://park-yina.github.io/"><i class="fa-brands fa-square-git"></i>TechBlog</a>
  <a href="나의 이메일 주소"><i class="fa-solid fa-envelope" aria-hidden="true"></i>E-mail</a>
</div>
  </div>
{% endblock %}
```