간단한 요약
모바일 크기에서 메뉴 버튼들의 y축 정렬
디바이스 크기에 따른 nav 메뉴들의 줄 변화
배운 내용
1. main
main태그는 익스플로러에서 지원하지 않는 태그이므로, <main role="main"></main>과 같이 사용해야 함
2. img 태그 관련
img태그 사용 시 생기는 공백은 vertical-align: middle로 지우기
3. 미디어쿼리 만드는 방식
3-1. @media~~ 직접 제작
@media (min-width: xxxpx) and (max-width: xxxpx) {}로 직접 제작하는 방식
3-2. 모바일 css를 별도로 제작
mobile.css 정도의 파일을 별도 제작하여, html에 link로 붙이는 방식
어려운 내용
배운 내용을 토대로 조금 더 실습에 가까운 연습을 하여 크게 어려운 부분은 없었다.
소감
미디어쿼리를 배우고 실습했으니, 후에 내가 만들었거나 만들 간단한 페이지에 모두 적용해보는 연습을 해야겠다.
나의 코드
진행한 나의 코드는 github에 업로드하였다.
