반응형웹 만들기

개요

반응형 스킨을 제작 했다면 홈페이지의 50%는 이미 완성 되었다고 해도 무방합니다. (필자의 개인적인 생각입니다. ^^)

이제 실제 메인을 만들어 보도록 하겠습니다.
원래 홈페이지 메인은 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]에서 제작해야 하지만 이미 작업 한 소스가 있으므로, 임시로 "추가페이지" 를 활용해서 제작해 보도록 하겠습니다.

ps. "프리랜서" 회원으로 인증받으시려는 분께서는 기존에 있는 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]을 수정 하지마세요.

왜냐하면 {$shop_base[shop_name]}에서 일반 홈페이지, 모바일웹 을 확인 후 "프리랜서"회원으로 등록 해드리는데 반응형 웹을 만드시면서 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]을 수정하게 되면 확인 할 수가 없기 때문 입니다.

페이지 만들기

[디자인관리 > 고급 디자인 관리 > 추가 페이지 관리]으로 가셔서 아래와 같이 페이지를 생성 합니다.

<div class="spot dot">{GROUP_top_img}</div>
<br>
<div class="main_board dot">
	<div class="notice">{GROUP_notice}</div>
	<div class="free">{GROUP_free}</div>
	<div class="sms">{GROUP_sms}</div>
</div>
<br>
<div class="photo dot">{GROUP_photo}</div>
<br>
<div class="main_form dot">{GROUP_myreg_form}</div>
<br>



스킨은 "반응형 웹 메인스킨"을 선택 후 저장 합니다.

생성한 추가 페이지를 실제 홈페이지 상에서 접속 해보시기 바랍니다.
http://uany06.anybuild.co.kr/page/rp_main

어떤가요? 정말 그럴싸한 반응형 웹이 되었습니다. ^^

- PC웹 (브라우저 가로 사이즈가 768px 이상일때)


- 모바일웹 ( 브라우저 가로 사이즈가 768px이하 일때)


모바일 웹이 되면 모든 컨텐츠가 알아서 위치를 이동 합니다.
스킨 부분은 이전에 다 설명드렸구요.
메인 부분에서 변경되는 부분을 체크 해보면 크게 "메인 슬라이드 이미지"가 자동으로 작아지는점과 "공지사항", "자유게시판", "SMS문의"가 자동으로 세로로 변경된다는점 입니다.
"메인 슬라이드 이미지"는 컨텐츠 자체가 가로 100%로 제작 되었기 때문에 따로 손댈 필요가 없습니다.

ps.l{$shop_base[shop_name]}에서 제공되는 대부분의 프로그램은 가로 100%로 되어 있으므로 반응형 웹 제작시 용이하게 설계되어 있습니다.

페이지 소스

[소스1] "공지사항", "자유게시판", "SMS문의"의 소스를 확인해보도록 하겠습니다.

<div class="main_board dot">
	<section class="notice">{GROUP_notice}</section>
	<section class="free">{GROUP_free}</section>
	<section class="sms">{GROUP_sms}</section>
</div>


[소스2] pr_main_mobile.css에서 "공지사항", "자유게시판", "SMS문의" 출력을 관여하는 소스는 아래와 같습니다.

.container .main_board {overflow: hidden;}
.container .main_board section {margin-top: 10px;}


[소스3] pr_main_pc.css에서 "공지사항", "자유게시판", "SMS문의" 출력을 관여하는 소스는 아래와 같습니다.

.container .main_board section {float: left; margin: 0 1%;}
.container .main_board section.notice {width: 38%;}
.container .main_board section.free {width: 38%;}
.container .main_board section.sms {width: 18%; padding-top: 15px;}


위 소스를 살펴보시면 section 태그의 width값을 잘 보셔야 합니다.
브라우저 가로사이즈가 768px 이하인경우 (pr_main_mobile.css)에서는 가로 사이즈가 없기 때문에 가로사이즈가 100%로 적용되며,
브라우저 가로사이즈가 768px 이상인경우 (pr_main_pc.css)에서 section.notice { width: 38%; }에 의해서 가로사이즈가 지정 되도록 되어 있습니다.
다른 컨텐츠 역시 모두 이런 방식으로 구성되어 있기 때문에 따로 설명드릴 필요는 없을 것 같아 생략 하도록 하겠습니다.

어떤가요? 쉽죠? ^^;;; 이전 "반응형 웹 메인 스킨"제작 방식과 다를게 전혀 없습니다.
반응형 웹은 이렇듯 모든 컨텐츠가 "미디어 쿼리"의 조건(브라우져 가로 사이즈)에 따라 결정되므로 우리는 CSS 파일을 얼마나 정리를 잘 하느냐가 매우 중요 합니다.

여러분은 우선 처음부터 반응형 웹을 맞춤형으로 제작 하지마시고 {$shop_base[shop_name]}에서 제공되는 반응형웹 템플릿을 활용해서 수정해 나가는 방향으로 제작하시기 바랍니다.
조금 익숙해지고 난뒤 맞춤 제작으로 넘어가는것이 좋을것 같습니다.

반응형 웹 절대 어렵지 않으니 용기 내서 도전해보시구요.
안되면 {$shop_base[shop_name]}가 끝~~~까지 도와드리므로 희망 잃지 마시고 계속 도전하세요 ^^

이렇게 해서 반응형 웹 만들기 강의를 마치도록 하겠습니다.


정말~ 수고하셨습니다.

top