IU

반응형 매거진 뷰 만들기 Part2 - 미디어쿼리

Part2 에서는 Part1에서 작업한 디자인이 다양한 디바이스에 대응할 수 있도록, 미디어쿼리를 추가하는 작업을 진행하여 보겠습니다.

2015/07/14

사용위젯 : -

예상 소요시간 : 20분

아이유에디터 프로젝트는 기본적으로 320px / 960px 의 미디어 쿼리를 갖습니다. 우측 상단에서 가로 W 사이즈 설정 팝업을 열어, 768px 을 입력한 후에 추가 [+] 버튼을 선택하여 입력한 미디어 쿼리 사이즈를 추가합니다.

STEP 01

우측 상단에서 가로 W 사이즈 선택 팝업을 열어, 방금 전에 추가한 768px 을 선택하면, 해당 미디어쿼리 사이즈로 캔버스가 변경됩니다.

STEP 02

캐러젤 위젯을 담고 있는 박스 위젯을 선택하여 가로 / 세로 사이즈를 100% / 645px 로 설정합니다. 우측의 박스들이 자동적으로 캐러젤 위젯 하단으로 넘어가게 됩니다.

STEP 03

아래로 넘어간 박스 3개를 선택하여 가로 / 세로 사이즈100% / 215px 로 입력하여 선택한 박스들의 크기를 동시에 바꾸어 줍니다.

STEP 04

이제 다시 우측 상단의 가로사이즈 선택 팝업을 열어 320 px 을 선택하여 캔버스 사이즈를 변경합니다.

STEP 05

STEP 03에서 100% / 645px 로 설정했던 박스를 선택하여, 320px 쿼리에서는 100% / 480px 로 입력하여 줍니다.

STEP 06

STEP 04에서 선택했던 박스들을 320px 쿼리에서는 위아래를 넓게 활용하기 위해 100% / 360px 로 입력합니다.

STEP 07

섹션센터박스삭제하고, 박스 위젯을 추가합니다. 포지션 Position 속성을 Relative / Left 로 변경하여 준 뒤, 너비와 높이를 각각 60%, 720px 로 설정하여 줍니다. 그리고 우측 영역에 박스 위젯을 하나 더 추가하여, 왼쪽 박스와 동일하게 포지션 속성을 변경하여 준 뒤 너비와 높이를 각각 40%, 240px 로 설정합니다. 마지막으로 섹션의 높이를 삭제하여 주면, 720px 만큼 조정이 됩니다.

이미지를 담고 있는 박스를 선택하여 가로 / 세로 사이즈를 100% / 215px 로, 텍스트를 담고 있는 박스를 100% / calc-height : 144px 로 입력하여 주고, 텍스트의 가로 사이즈도 90% 로 조정합니다. 나머지 박스도 동일하게 설정하여 줍니다.

STEP 08

수고하셨습니다! 이제 빌드를 실행하면, 브라우져의 크기에 따라 레이아웃이 변화하는 것을 보실 수 있습니다.

Part 3 에서는 Part 1 ~ 2에서 작업한 페이지를 헤로쿠 Heroku를 사용하여 업로드하는 방법을 알려드립니다.

STEP 09