[국비지원] 8일차 - 반응형 헤더 만들기

 

오늘은 css와 자바스크립트를 이용해 슬라이더를 만드는 법과 슬라이드 버튼을 만드는 것을 진행했다.

 

추가로 반응형 웹사이트의 동작 원리가 궁금해 드림코딩님의 반응형 헤더 만들기 영상을 보고 따라해봤는데,

새로 배운 내용들은 다음과 같다.

 

반응형 헤더 만들기

 

@media (max-width: 800px) {
  .클래스명 {
    실행문
  }
}

 

간단하게 미디어 쿼리를 이용하여 화면 크기가 조절되었을 때 달라지는 모습을 설정할 수 있다.

 

학원에서 배우면서 어떻게 하면 레이아웃과 태그를 잘 배치할 수 있을까 궁금했는데

실무자의 시연을 보면서 justify-content와 align-items를 잘 활용하는 것이 중요하다는 것을 알게 되었다.

 

justify-content과 align-items은 FLEXBOX FROGGY 에서 게임을 하면서 연습해 볼 수 있다.

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

script src의 async, defer 속성

 

async와 defer 모두 DOM의 랜더 과정을 방해하지 않고 script 파일을 동시에 읽어오는 방식이다.

 

async은 script 다운로드가 끝나자마자 script를 실행하지만

defer는 모든 DOM이 로드된 후에야 script를 실행한다는 점에서 다르다.