대략적으로 JS가 어떻게 쓰이는지 확인해보고싶어서
드림코딩 엘리님의 프로젝트를 따라해보았다.
나중에 헤더만들 때 유용하게 쓰려고 기록해두려고 한다 !
1. 사이트 정리
먼저, 이 프로젝트를 할 때 필요한 사이트들을 정리해보도록 하겠다.
1. Font Awesome
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
사용법은 start for free를 눌러 메일을 통해 인증을 하자.
인증을 완료하면
<script src="https://kit.fontawesome.com/자신의 코드.js" crossorigin="anonymous"></script>
자신의 코드가 포함되어 있는 코드를 얻을 수 있다.
html head에 추가만 해주면 사용가능!
상단의 i태그 부분을 클릭하면 자동으로 저장이되고,
html 바디부분에서 자유롭게 사용할 수 잇다.
좌측 보면 크기 조정 설명도 되어있어 css에서 자유롭게 변경 가능
2. 구글 폰트
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
들어가서 다음과 같이 원하는 폰트를 고르면 오른쪽과 같이 링크가 뜬다.
참고로 위 영상에서는 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, 매우 중요한 지식!
오늘은 필수 지식! 에로우 펑션에 대해 알아보는 시간을 가졌다! Function declaration 1. 하나의 함수는 ...
blog.naver.com
블로그에 업로드하고 주소 연결하도록 하겠다.
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 정리
안녕하세요! 새콤하고달콤입니다. 오늘은 css의 flex를 정리하였습니다. 1. Flexbox 뷰포트나 요소의 크기...
blog.naver.com
3. position
static : 기본으로 설정되어 있음, 한 줄로 나열
relative : 원래 있던 위치 기준으로 움직임
absolute : 윈도우 상 기준임, 안에 있는 컨텐츠에 영향 받지 않음
fixed : 웹 브라우저 기준으로 움직임
sticky : 스크롤을 내려도 움직이지 않음
오늘의 풀 코딩은 여기에 업로드 해두었다.
https://github.com/SahhaShin/DreamCoding-Ellie-project
GitHub - SahhaShin/DreamCoding-Ellie-project: 드림코딩 엘리 개발자님의 강의를 들으며 따라 만들어보기
드림코딩 엘리 개발자님의 강의를 들으며 따라 만들어보기. Contribute to SahhaShin/DreamCoding-Ellie-project development by creating an account on GitHub.
github.com
오늘도 많이 배워가는 하루!
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
this는 호출될 때 결정된다 (0) | 2024.01.23 |
---|---|
함수와 함수의 호출, 고차함수 (0) | 2024.01.23 |
드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 4. 반복문, operator (0) | 2021.11.07 |
드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 3. 전역변수 VS 지역변수 (0) | 2021.11.05 |
드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 2. async vs defer (0) | 2021.11.05 |