Responsive Web (반응형 웹)

https://www.youtube.com/watch?v=X91jsJyZofw&t=271s

이분꺼 따라해보는데 확실히 현업자라 가르쳐 주시는 게 뭔가 최신트렌드 느낌(?)

암튼 잘 가르치심.

 

간단히 배운거 적어보면,

 

HTML

- 빠르게 작성하는 단축키

(li>a)*5 

탭을 누르면

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

이렇게 일일이 치지 않아도 빠르게 작성할 수 있다!

 

 

 

- 로고: https://fontawesome.com/

Font Awesome

난 로고가 지금 내 웹페이지에서 안보이긴 한데 폰트문제인가...

 

- 폰트: https://fonts.google.com/?preview.text=Almost%20before%20we%20new%20it,%20we%20had%20left%20the%20ground.&preview.text_type=custom

구글폰트는 이미 많은 분들이 사용함.

 

 

 

 

CSS

웹페이지 크기가 달라질 때 화면을 좀 더 편안하게 보이게 하는 게 목적

 

==> media query이용

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

이렇게 하면 가로 길이 768px이하에서 보이는 웹페이지를 설정할 수 있다.

 

- hovering

마우스를 메뉴에 갖다 대면 색깔이 바뀌게 한다.

.navbar_menu li:hover {

    background-color: var(--accent-color);

    border-radius: 4px;

}

 

 

JavaScript

 

    <script src="main.js" defer></script>

먼저 html에 쓸 JavaScript파일 넣자

defer은 html이 다 parsing 되고 JavaScript 실행한다고 한다.

async는 html이 parsing 도중에 JavaScript가 다 다운로드 되면 바로 실행한다고 한다.

 

script 태그 부터 다운로드하는 async보다 속도는 좀 느리다고는 한다.

defer는 여러 개 js파일 실행할 때 주로 사용한다.

 

 

- 동작

나는 햄버거 바(三)를 만들어서 붙였는데 

햄버거를 눌렀을 때 메뉴창과 로고가 보이거나, 감추기 동작하려함.

 

 

 

document.querySelector('.navbar_toggleBtn')

자세한 건 모르지만 CSS의 선택자를 고른다고 한다. 괄호 안에 CSS 선택자 넣으면 된다.

 

toggleBtn.addEventListener('click', ()=>{

    menu.classList.toggle('active');

    icons.classList.toggle('active');

});

 

toggleBtn을 click을 하면 menu랑 icon이 toggle(보이면 -> 안보임 / 안보일 때 -> 보이게)된다

arrow function은 향후에 배우기로하자.

 

 

 

- 768px 보다 작을 때

 

default는 로고와 menu창 안보이게

 

- 우측 상단 버튼 누르면

메뉴, 로고 등장

 

 

- 전체화면

 

양이 생각보다 많긴 했는데, 암튼 재미있었다.

잘 배우면 원하는 거 잘 만들 수 있을거 같다는 느낌이 든달까.