0531 개발일지

학습한 내용

미디어쿼리 실습

• 반응형 메뉴
  
  PC 버전에서는 가로로, 모바일 버전에서는 세로로 정렬되는 반응형 메뉴

• 덴마크 쇼핑몰
  
  PC 버전에서는 한 줄 상단 고정, 모바일 버전에서는 두 줄로 스크롤에 따라 움직이는 상단 메뉴
  

• 부트스트랩 에이전시
  
  Width 값에 따라 3x2, 2x3, 1x6 정렬로 바뀌는 콘텐츠

• 미디어쿼리를 적용하는 방법 세가지

1. css 파일에 @media 작성
2. 모바일 버전용 css 파일을 별도로 만들어 모바일 레이아웃을 작성
3. html 파일에서 style 태그를 사용해서 media 속성값을 지정한 후 style 지정

   <style media="(min-width: 300px) and (max-width: 700px)">
     body {
       background-color: red;
     }
   </style>

   위와 같은 형태로 입력.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

여러가지 반응형 사이트 실습을 작성하는 과정이 어렵지는 않았지만 조금 헷갈린다.

해결방법 작성

헷갈리지 않도록 복습해야겠다.

학습 소감

미디어쿼리 사용 시 막연하게 이렇게 하면 되지 않을까? 생각하는 부분이 맞기도 하고 틀리기도 해서 조금 더 레이아웃에 대한 전반적인 이해가 필요하다고 느낀다. 이전 강의도 자주 복습하고 강의영상을 보지 않고 이번에 실습한 사이트들을 작성해보는 것도 좋을 것 같다.