드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 번외. 반응형 헤더 만들기 위해 필요한 요소들, 프로젝트 할 때 필수 사이트 모음

 

대략적으로 JS가 어떻게 쓰이는지 확인해보고싶어서

드림코딩 엘리님의 프로젝트를 따라해보았다.

 

나중에 헤더만들 때 유용하게 쓰려고 기록해두려고 한다 !

---

1. 사이트 정리

먼저, 이 프로젝트를 할 때 필요한 사이트들을 정리해보도록 하겠다.

​

1. Font Awesome

https://fontawesome.com/

Font Awesome

사용법은 start for free를 눌러 메일을 통해 인증을 하자.

​

인증을 완료하면

<script src="https://kit.fontawesome.com/자신의 코드.js" crossorigin="anonymous"></script>

 

자신의 코드가 포함되어 있는 코드를 얻을 수 있다.

​

html head에 추가만 해주면 사용가능!

​

상단의 i태그 부분을 클릭하면 자동으로 저장이되고,

html 바디부분에서 자유롭게 사용할 수 잇다.

좌측 보면 크기 조정 설명도 되어있어 css에서 자유롭게 변경 가능

​

​

​

2. 구글 폰트

Google Fonts

들어가서 다음과 같이 원하는 폰트를 고르면 오른쪽과 같이 링크가 뜬다.

​

참고로 위 영상에서는 source sans pro를 이용했다.

​

이 링크를 header에 복붙하고,

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

 

body{
    margin:0;
    font-family: 'Source Sans Pro';
}

이런 식으로 font-family를 이용하여 사용한다.

 

 

3. JS 코드

// html 안에 있는 class 노드 중에 이 클래스 이름을 가진 아이를 찾아서 변수에 연결해준다.
const toggleBtn = document.querySelector('.navbar__toogleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icorns');

// 실행할 때 active가 없다면 실행 있다면 빼줄거임
toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
    icons.classList.toggle('active');
});

1. document. querySelector

: html 안에 있는 class 중에 ' '안에 있는 이름과 같은 이름을 가진 클래스를 찾아서 요소들을 변수에 저장해준다.

​

2. addEventListener

: 어떤 이벤트가 전달될 때 이런 행동을 실시해라.

위의 코드는 토글 버튼이 클릭되면 이 함수를 리턴하라는 뜻이다.

​

arrow function(=>)는 아래의 사이트에 정리해둠

https://m.blog.naver.com/tksgk2598/222239763701

[JS,자바스크립트,node.js]DAY4: 함수의 모든 것, Arrow Function, 매우 중요한 지식!

블로그에 업로드하고 주소 연결하도록 하겠다.

​

3. classList.toggle('active')

: 지정된 클래스의 요소들을 전달받았을 때 액티브 상태이면 액티브 상태를 해제시킨 후 메뉴들을 숨기고

액티브 상태가 아니면 메뉴들을 액티브 시켜서 보여줘라

​

대략적으로 css 안에 media 부분을 살펴보자.

 

@media screen and (max-width: 768px){
    .navbar{

        flex-direction:column;
        align-items: flex-start;
        padding:8px 12px;
    }

    /* 햄버거 버튼을 눌렀을 때만 나오게 하기 위해서 display를 none 처리한다. */
    .navbar__menu{
        display: none;
        flex-direction: column;

        /* 너비가 100%가아니면 center로 안온다. */
        align-items: center;
        width: 100%;
        
    }
    .navbar__menu li{
        /* 너비가 넓어졌을 때 allign은 자동적으로 왼쪽 정렬된다. */
        width: 100%;
        text-align: center;
    }

    /* 햄버거 버튼을 눌렀을 때만 나오게 하기 위해서 display를 none 처리한다. */
    .navbar__icorns{
        display: none;
        width:100%;
        justify-content: center;
    }

    /* display none을 블록처리하여 보이게 한다. */
    .navbar__toogleBtn{
        display: block;
    }

    .navbar__menu.active,
    .navbar__icorns.active{
        display: flex;
    }
}

아이콘과 메뉴는 기본적으로 diplay: none 처리를 함으로써 숨겼다.

​

하지만 아래처럼 .active가 된다면 flex로 display를 보인다.

 

.navbar__icorns.active{
        display: flex;
 }

toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
    icons.classList.toggle('active');
});

 

 

4. 전체적인 모습 정리

1) width가 768px 이상일 경우

​

2) 미만일 경우

​

​

5. 개인적인 끄적임

1. :root의 사용

/* root를 이용하면 색을 통일가능
안쓰면 각자 백그라운드를 다르게 설정하고 똑같이 설정하고 싶을 때 하나씩 다 바꿔야하는 번거로움이 있음
하지만 root를 사용하면 var(--text-color)만 써주면 색깔적용가능
한 곳에서만 지정하면 모든 색을 바꿀 수 있음*/
:root{
    --text-color:#f0f4f5;
    --background-color:#263343;
    --accent-color: #d49466;
}

루트를 사용하면 여러 곳에 분포되어있는 색상을 일일히 바꿔 줄 필요없이

루트의 색상을 바꿔주면 여러 곳에 적용됨.

​

예시) 변수처럼 사용

a{
    text-decoration: none;
    color:var(--text-color);
}

 

2. display

display:block; 
display:flex;

 

block은 기본적으로 설정되어 있음.

flex는 자동으로 왼쪽 정렬됨

​

정리가 잘 되어 있는 블로그!

https://blog.naver.com/thdwlsgus0/222230413053

css flex 정리

 

3. position

​

static : 기본으로 설정되어 있음, 한 줄로 나열

​

relative : 원래 있던 위치 기준으로 움직임

​

absolute : 윈도우 상 기준임, 안에 있는 컨텐츠에 영향 받지 않음

​

fixed : 웹 브라우저 기준으로 움직임

​

sticky : 스크롤을 내려도 움직이지 않음

 

---

오늘의 풀 코딩은 여기에 업로드 해두었다.

https://github.com/SahhaShin/DreamCoding-Ellie-project

GitHub - SahhaShin/DreamCoding-Ellie-project: 드림코딩 엘리 개발자님의 강의를 들으며 따라 만들어보기

 

오늘도 많이 배워가는 하루!

​