쇼핑몰에 [반응형 웹] 적용하기
PC, Mobile 페이지를 별도로 관리하지 않고
하나의 쇼핑몰로 관리하고, 하나의 쇼핑몰로 볼 수 있는 반응형 웹.
쇼핑몰에 반응형웹을 적용하는 방법에 대해서 알려드리겠습니다.
1. 모바일 쇼핑몰 사용안함 설정
PC, Mobile이 한 페이지에서 보여져야 하므로
모바일 쇼핑몰을 사용안함으로 설정합니다.
1) 쇼핑몰 어드민 관리자 > 모바일쇼핑몰 > 모바일 환경설정에 들어갑니다.
2) 모바일 쇼필몰 사용설정을 "사용안함"에 체크하고 저장합니다.
2. viewport 메타 태그 추가
1) 스마트디자인 편집창 > 전체화면보기 > 공통 레이아웃 (layout.html), 메인 레이아웃 (main.html) 을 엽니다.
2) <head></head>사이에 아래와 같이 코드를 추가해줍니다.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 레이아웃</title>
</head>
3. CSS파일에 미디어쿼리 적용
이제 자유롭게 CSS를 작성합니다.
아래의 화면은 예시화면입니다. 디자인에 맞게 분기점과 CSS를 작성합니다.
@media all and (max-width: 767px) { / * 767px까지 해당 css가 적용됩니다. * /
Mobile용 CSS 입력.
}
@media all and (min-width: 768px) { / * 768px부터 해당 css가 적용됩니다. * /
Tablet & PC용 CSS 입력.
}
▶ Tip. 모바일 사이트에 반응형웹 적용하는 법
