◼︎ 오늘 학습한 내용
6. 미디어쿼리
1) 미디어쿼리 실습
- 메뉴버튼 만들기
미디어쿼리를 이용해서 pc버전에서 가로로 정렬되어 있는 메뉴버튼을 모바일버전에서 세로정렬로 만들수 있다.
- 덴마크 쇼핑몰 특정 영역 만들기
왼쪽의 pc버전에서는 스크롤을 내려도 상단바가 고정되어있는 반면, 오른쪽의 모바일버전에서는 스크롤을 내리면 상단바가 같이 위로 올라가게끔 미디어쿼리로 처리해줄 수 있다.
- 에이전시 특정 영역 만들기
pc버전과 태블릿버전, 모바일버전까지 총 세 개의 디자인을 만들었다. 미디어쿼리 영역을 두 개 만들면 간단하게 해결! pc버전에서는 3*2 배열로, 태블릿 버전에서는 2*3 배열로, 모바일버전에서는 1개씩 쭉 세로배열을 해 주었다.
* pc버전과 모바일버전의 디자인을 따로 만드는 방법 세 가지:
1) 하나의 style.css 파일 안에 pc버전과 모바일버전을 한꺼번에 입력하는 방법
2) style.css / mobile.css 등으로 pc버전과 모바일버전의 css파일을 구분하여 만들고, 모바일버전에는 미디어쿼리 코드(@media)만 입력한 후 html에 두개 다 link하는 방법
3) 아래와 같이 헤드에 스타일 코드를 입력하여 모바일버전의 스타일을 변경하는 방법
<head>
<style media="(min-width: 300px) and (max-width: 700px)">
body {
background-color: red;
}
</style>
</head>◼︎ 어려웠던 점 & 해결못한 것들
강의 내용대로 따라하기만 해서 해결하지 못한 부분은 없다. 하지만 강의 그대로 따라하는 것이 아닌, 문제를 던져주고 혼자 해보세요~ 하면 과연 내가 할 수 있을지는 모르겠음...ㅎ◼︎ 해결방법
강사님의 코드를 보고 따라하는 것이 아니더라도 문제를 스스로 해결할 수 있도록 다른 사이트를 스스로 따라 만들어보는 연습이 필요할 것 같다.◼︎ 소감
갈수록 생각할 부분도 많고 어려워지는 것이 느껴진다. 뒤쳐지지 않게 잘 따라가기 위해서는 연습이 많이 필요할 것 같다.