오늘은 지난 시간에 배운 내용을 바탕으로 미디어쿼리 실습을 해보았다. 먼저 pc버전에서는 x축, 모바일 버전에서는 y축으로 정렬되는 메뉴 버튼을 만들어 보았다. html에서 ul태그 안쪽에 클래스를 짓고 a태그로 메뉴명을 적는다. 그 다음 ul태그와 a태그, li태그의 속성 값을 입력해 준다. li태그를 x축으로 변경시키기 위해 flexbox.help사이트를 참고하여 space-between과 각각의 박스에 y축 정렬을 center로 설정하고 미디어 메뉴에 디스플레이:플렉스;를 삽입해 x축 정렬로 바꿔주고 동일한 공백을 갖게 설정, 그리고 세 개의 박스의 y축을 동일한 라인에 맞추기 위해 align-items: center;를 입력한다.
이렇게 pc버전의 레이아웃을 적용하고 마찬가지로 모바일 버전도 적용하였다. 기존의 row를 column으로 바꾸고 마진 바텀값을 설정해 주었다. 여기서 모바일일때에 width값이 여전히 700px이므로 width값을 메뉴버튼의 크기와 동일하게 변경해 준다. 그리고 align-item은 flex-start로 바꾸어준다. 그러면 li태그를 감싼 공간의 크기도 모바일로 변경되며 바뀌게 된다.
다음으로 덴마크 쇼핑몰의 특정 섹션의 레이아웃을 적용해 보았다. 사이트의 브라우저 폭을 줄였을 때 내비게이션이 pc버전에서는 1줄로, 모바일에서는 2줄로 변하는데, 이 기능을 만들어보았다. 또한 스크롤을 내려보면 pc버전에는 상단 메뉴 버튼이 화면에 고정되어 있는데, 모바일 버전에서는 상단 메뉴 버튼이 위로 올라가버린다. pc버전에 고정되어 있는 것은 position:fixed;를 사용함을 의미한다. 모바일 버전에서는 해당 기능을 해제했다는 의미이다.
h1태그에서 상단 위쪽에 높이 값이 리사이즈 되지 않고 width 값만 절반이 된다. 따라서 width 값을 50%로, 높이는 80px로 설정했다. 그리고 오른쪽 메뉴 버튼을 만들면서 정확하게 3등분을 하지 못하니 33.3333%로 입력을 했다. 각각의 메뉴는 nth-child로 표시했다. 입력하면 y축 정렬이 되어있으므로 디스플레이:플렉스;로 x축 정렬을 한다. 또한 디스플레이:플렉스;로 x축 정렬된 li 태그를 만들었다. 거기에 더해 로고를 감싼 영역을 x축으로 바꾸기 위해 인트로 영역에 display를 flex로 적용한다. 그러면 브라우저 사이트를 줄이면 자연스럽게 리사이징 된다.
그다음 메인 태그를 만들어 상단 영역이 고정된 pc버전으로 세팅을 해준다. 메인태그는 익스플로러에서 지원되지 않으므로 role속성을 꼭 추가한다. 위쪽을 헤더영역, 아래쪽이 메인이 되게끔 세팅한다. 헤더와 메인은 둘 블럭 성격으로 y축 정렬이 된다. 상단 영역 고정을 위해 인트로 영역에 포지션 픽스드를 사용하면 된다. 그러면 스크롤을 내렸을 때 상단 영역이 고정되어 있음을 확인할 수 있다.
다음으로 모바일 버전 형태로 작업을 해보았다. 모바일 버전에 인트로 높이 값은 80이 아닌 160을 설정한다. 그리고 각 h1과 네비 태그에 width 값이 50%으로 설정된 것을 100%로 바꿔주고 플렉스에 정렬 방향을 column으로 입력했다. 그러면 브라우저 폭을 줄였을 때 두 줄로 바뀌게 된다. 덴마크 쇼핑몰 모바일 버전에서는 상단 영역이 위로 딸려 올라가야 하므로 인트로 영역에 기본 상태인 포지션 스태틱을 입력한다. 여기서 생기는 공백은 메인 태그의 패딩 탑을 0으로 적어 없앴다.
다음으로 부트스트랩 에이전시 사이트에 포트폴리오 파트 컨텐츠를 pc버전과 모바일 버전으로 제작해보았다. 브라우저 크기에 따라 3x2, 2x3 1x6으로 나타나므로 최소 분기점을 추가적으로 2개 더 작성하였다. html에서 div태그로 컬럼 서랍 하나를 만들어 이미지를 지정하고 이와 같은 이미지 6개를 만들었다.
먼저 컨테이너 안에 디스플레이를 플렉스로, 안에있는 width값이 감싼 영역보다 큰 경우 자동으로 줄바꿈이 되게끔 flex-wrap을 wrap으로 설정한다. 그리고 각각의 영역은 동일한 공백을 적용시켰다. 그리고 컬럼 안에 width값을 명시해 준다. 컬럼을 355px로 지정하면 컨테이너의 width값인 1140픽셀보다 커질 때 네 번째 컬럼에 대해서는 줄바꿈 현상이 일어나게 된다. 그리고 이미지의 사이즈 또한 컬럼 영역에 꽉 차게 width를 100%로 지정한다. 그리고 컬럼간의 위아래 간격과 외부 디자인을 적용했다. 아래쪽 세개의 박스에는 마진 바텀을 적용하지 않기 위해 가상선택자를 이용하는데
위쪽에 컬럼:nth-child;로 작성한다. 중간에 이미지 인포와 img사이에 미세한 공백은 버티컬얼라인:미들;을 적용해서 제거한다.
그리고 미디어쿼리로 특정 단계에서 2x3, 1x6으로 변형되는 기능을 만들었다. 첫 번째 미디어쿼리에서 컬럼을 감싸고 있는 1140픽셀이라는 공간을 조정한다. 그 후 브라우저 폭을 줄였을 때, 2x3으로 정렬은 되나 공백이 어그러진것을 확인할 수 있다. 이는 미디어쿼리 바깥쪽에서 만든 4,5,6번째에서 대한 마진 바텀값을 0을 적용시켜서 그러한데 공백이 어그러진 부분에 마진 바텀값을 적용시키면 된다.
두 번째 미디어 쿼리에서 브라우저 폭을 더 줄였을 때 한 줄로 바뀌게끔 만들어 보았다. 컨테이너를 width 100%로 입력하여 브라우저를 줄였을 때 바뀌게끔 작업을 한다. 이 상태에서 칼럼 값을 width:100%;로 또한 지정해 준다. 그럼 풀 사이즈로 한 줄에 맞춰 정렬이 된다. 이때도 마찬가지로 4,5,6번째에 대한 공백이 없다. 네 번째와 다섯 번째에 대한 동일한 공백을 만들어줘야 하므로 다시 nth-child를 복붙해와서 4번째와 5번째에 10픽셀로 마진 바텀을 적용시켰다. 좌우 측에 사이트와 동일하게 공백을 넣도록 박스 사이징과 패딩 값을 적용했다.
마지막으로 미디어 쿼리를 적용하는 방식 3가지에 대해 알아보았다. 첫 번째는 스타일 css 안에 pc버전과 모바일 버전을 한꺼번에 입력하여 작업하는 방법이고 두 번째는 pc버전은 스타일, css 모바일 버전은 mobile.css로 따로 지정해서 모바일 css에는 미디어 쿼리만 타이핑해서 pc와 모바일을 분리하는 방식이다. 마지막 세 번째로 스타일이라는 태그를 사용해서 태그 안쪽에 미디어라는 속성을 넣고 민위드와 맥스 위드를 넣어 모바일 버전에 대응하는 방식이 있다.
