반응형웹 만들기

개요

반응형 홈페이지를 만들기 위해서는 우선 기본적으로 코딩방식이 웹표준 코딩으로 되어 있어야 제작이 용이하기 때문에 기존 메인 페이지를 웹표준 코딩으로 변경 해야합니다.
여러분은 강의 시간 관계상 아래 소스를 그대로 복사해서 스킨 등록 하시기 바랍니다.


ps. 만약 표준 코딩을 전혀 모르신다면 포기 하지마시고 우선 아래 강좌대로 그대로 따라 하면서 반응형에 대한 원리를 이해하시는게 좋습니다.
사실 웹표준 코딩이 html 기본에서 벗어나는 언어가 아니라 일반 html (테이블코딩)에서 CSS (스타일시트)에 좀더 많이 의존 하는방식 이라고 보시면서 다가가시는게 편할 것 같네요.

반응형 스킨제작

우선 [디자인관리 > 고급 디자인 관리 > 스킨 관리]으로 이동 후 아래와 같이 소스를 붙여 넣습니다.

<load target="/img_up/shop_pds/uany06/src_css/pr_main_mobile.css">
<load target="/img_up/shop_pds/uany06/src_css/pr_main_pc.css" media="only all and (min-width:768px)">

<div class="main">
	<!-- 상단 디자인 출력 부분 -->
	<header class="header dot">
		<h1>{$easy_design[logo]}</h1>
		<div class="menu">
			<nav class="topNavigation">
				<p>
					<a href="#">홈</a> |
					<!--@if(!$_SESSION[mem_id])-->
						<a href="#">로그인</a> | <a href="#">회원가입</a>
					<!--@else-->
						<a href="#">로그아웃</a> | <a href="#">회원정보수정</a>
					<!--@end-->|
					<!--@if($mobile_conn_yn)-->
						<load target="/js/kakao.link.js" />
						<!--@if(strpos($_SERVER[PHP_SELF],'shop_goods/goods_view.htm'))-->
							<a href="javascript:;" onclick="kakao_url_link('{$shop_name}','http://{$_SERVER[HTTP_HOST]}/goods/{$idx}','{$goods_name}')"> 카카오톡</a>
						<!--@else-->
							<a href="javascript:;" onclick="kakao_url_link('{$shop_name}')"> 카카오톡</a>
						<!--@end-->
					<!--@else-->
						<a href="javascript:;" onclick="alert('스마트기기에서만 사용 가능합니다.')"> 카카오톡</a>
					<!--@end-->|
					<!--@if($mobile_conn_yn)-->
						<load target="/js/kakao.link.js" />
						<!--@if(strpos($_SERVER[PHP_SELF],'shop_goods/goods_view.htm'))-->
							<a href="javascript:;" onclick="kakaostory_link('{$shop_name}','http://{$_SERVER[HTTP_HOST]}/goods/{$idx}','{$goods_name}.','내용 입니다.','http://{$_SERVER[HTTP_HOST]}{$goods_view_img_url}')">카카오스토리</a>
						<!--@else-->
						<a href="javascript:;" onclick="kakaostory_link('{$shop_name}')">카카오스토리</a>
						<!--@end-->
					<!--@else-->
						<a href="javascript:;" onclick="alert('스마트기기에서만 사용 가능합니다.')">카카오스토리</a>
					<!--@end-->|
					<a href="javascript:sendFaceBook('{$shop_name}')">페이스북</a>|
					<a href="javascript:sendTwitter('{$shop_name}')">트위터</a>
				</p>
			</nav>
			{GROUP_nav_h}
		</div>
	</header>
	<br>

	<!-- BODY 본문 디자인 출력 부분 -->
	<div class="container">{BODY_CONTENT}</div>
	<br>

	<!-- 광고 배너 -->
	<div class="banner_img dot">{GROUP_bottom_img}</div>
	<br>

	<!-- 하단 디자인 출력 부분 -->
	<footer class="footer dot">
		<p class="b_logo">{$easy_design[logo_b]}</p>
		<p class="info">
			<a href="#">개인정보 취급방침</a> |
			<a href="#">이용약관</a> |
			<a href="#">오시는길</a>
			<br>
			<br>
			<span cond="$shop_base[shop_name]">홈페이지명 : {$shop_base[shop_name]}</span>
			<span cond="$shop_base[company_name]">상호 : {$shop_base[company_name]}</span>
			<span cond="$shop_base[ceo_name]">대표 : {$shop_base[ceo_name]}</span>
			<span cond="$shop_base[regno]">사업자 번호 : {$shop_base[regno]}</span><br>
			<span cond="$shop_base[comregno]">통신판매신고번호 : {$shop_base[comregno]}</span>
			<span cond="$shop_base[help_email]">email : {$shop_base[help_email]}</span>
			<span cond="$shop_base[help_tel]">TEL : {$shop_base[help_tel]}</span>
			<br>
			<span cond="$shop_base[addr1]">주소 : {$shop_base[addr1]} {$shop_base[addr2]}</span>
			<br>
			총방문자수 : {$shop_base[count_total]} / 이달방문자수 : {$shop_base[count_month]} / 오늘 방문자수 : {$shop_base[count_today]}
		</p>
	</footer>
</div>

CSS 파일생성

우선 [디자인관리 > 고급 디자인 관리 > CSS 파일관리]으로 가서 pr_main_mobile.css 를 생성합니다.

/* Tag */
html, body {height: 100%;}
body {
	margin: 0; padding: 0;
	font: normal 16px sans-serif; color: #444;
	-webkit-text-size-adjust: none;
	-ms-interpolation-mode: bicubic;
}
body, h1, h2, h3, h4, h5, h6, p, div, li, dt, dd, input, textarea {
	font-family: 'Malgun Gothic', sans-serif;
}
img, video, audio, object, embed, iframe {
	max-width: 100%;
}
img {
	border: none;
	-ms-interpolation-mode: bicubic;
	-webkit-image-rendering: optimizeQuality;
}
table {border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0;}
form {margin: 0;}
a {color: blue;}

input[type=text], input[type=password], textarea {font-size: 13px;}

.dot {border: 1px dashed blue;}

.header h1 {text-align: center;}
.header .menu nav {text-align: center;}
.header .menu nav p {font-size: 13px;}
.header .menu .nav_pc {display: none;}
.header .nav_m {display: block;}

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

.footer {overflow: hidden;}
.footer p {font-size: 13px;}
.footer span {font-size: 13px;}
.footer .b_logo {display: none;}
.footer .info {width: 100%; text-align: center;}


[디자인관리 > 고급 디자인 관리 > CSS 파일관리]으로 가서 pr_main_pc.css를 생성합니다.

body {
	margin: 0;
	font-size: 12pt; font-family: dotum, dotumche, Dotum; text-decoration: none; color: #3f3f3f;
}
td {
	text-decoration: none;
	font-family: dotum, dotumche, tahoma;
	font-size: 9pt; color: #404040; letter-spacing: 0px;
}

.dot {border: 1px dashed blue;}
.header, .container, .banner_img, .footer {
	max-width: 980px; min-width: 720px; margin: 0 auto; padding: 0 10px;
}
.header {padding: 0; height: 100px; position: relative; z-index: 999;}
.header h1 {float: left; width: 20%; margin: 30px 0 0 3%;}
.header .menu {float: right; width: 75%;}
.header .menu nav {text-align: right;}
.header .menu .nav_pc {display: block;}
.header .nav_m {display: none;}

.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;}

.banner_img {padding: 0;}

.footer {padding: 0;}
.footer .b_logo {width: 25%; float: left; display: block;}
.footer .info {width: 75%; float: left; text-align: left;}



이렇게 CSS 파일을 2개 생성 하였습니다.
설명은 뒤에가서 하는 것으로 하구요. 생성한 CSS 파일을 "반응형 스킨" 적용 시켜 보도록 하겠습니다.

미디어 쿼리 적용

우리는 반응형 웹 개요에서 "미디어 쿼리"에 대해서 설명 드렸습니다. (기억 안나시면 다시 보고 오세요. 꼭~~ ^^)
[디자인관리 > 고급 디자인 관리 > 스킨 관리]으로 가셔서 "반응형 웹 메인 스킨" 소스 상단에 아래와 같이 붙여 넣으세요.

<load target="/img_up/shop_pds/uany06/src_css/pr_main_mobile.css">
<load target="/img_up/shop_pds/uany06/src_css/pr_main_pc.css" media="only all and (min-width:768px)">



주의! 필자는 계정 아이디가 uany06이기 때문에 CSS 파일 경로가 /img_up/shop_pds/uany06/src_css/pr_main_mobile.css 이렇게 되지만, 여러분의 각자 경로가 틀리므로 주의 하시기 바랍니다. 소스를 붙여 넣을때는 반드시 [디자인관리 > 고급 디자인 관리 > CSS 파일관리]에서 CSS 파일 경로를 확인 하시기 바랍니다.
위 소스를 유심히 보시면 일반 CSS 파일 불러오는 명령어와 동일한데 뒤쪽에 media="only all and (min-width:768px)" 이라는 속성이 추가 되었습니다.
이 속성의 의미는 브라우저의 가로 사이즈가 768px 이상인경우 pr_main_pc.css 파일을 적용 시켜라 라는 의미 입니다.
반면에 pr_main_mobile.css는 media속성이 없는데 이런 경우는 일반 홈페이지 처럼 기본 적용 됩니다.
이게 "미디어 쿼리" 입니다. ^^ 정말 간단하죠? ^^;;
우선 여기까지 만들었다면 실제 어떻게 구동 되는지 확인 해 보도록 하겠습니다.

[디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 아래와 "스킨코드"를 클릭하면 미리볼 수 있습니다.


* 브라우저의 가로 사이즈가 768px 이상일 때 화면 (일반 PC화면과 동일 합니다.)


* 브라우저의 가로 사이즈가 768px 이하일 때 화면 (보통 스마트 패드 및 스마트폰 화면이라 보시면 됩니다.)


자 어떤가요? 신기 한가요? ^^;
우선 결과물 화면을 보고 소스와 대조해 가면서 설명 드리도록 하겠습니다.
위 화면에서 가장 크게 바뀌는 부분이 상단 로고 위치가 이동된 것 을 확인할 수 있습니다.


[소스1] "반응형 웹 메인 스킨 "소스 중에 로고 출력 되는 소스가 아래와 같습니다.

<!-- ....(생략) -->
<header class="header dot">
	<h1>{$easy_design[logo]}</h1>
	<div class="menu">
	<nav class="topNavigation">
<!-- (생략).... -->


[소스2] pr_main_mobile.css에서 로고 출력을 관여하는 소스는 아래와 같습니다.

.header h1 {text-align: center;}


[소스3] pr_main_pc.css에서 로고 출력을 관여하는 소스는 아래와 같습니다.

.header h1 {float: left; width: 20%; margin: 30px 0 0 3%;}


{$easy_design[logo]} 이 부분인 실제 로고가 출력되는 부분인데 여기 CSS 위치가 .header h1 이렇게 됩니다.
우리는 CSS 파일 불러올 때 아래와 같이 파일을 불러 왔습니다.

<load target="/img_up/shop_pds/uany06/src_css/pr_main_mobile.css">
<load target="/img_up/shop_pds/uany06/src_css/pr_main_pc.css" media="only all and (min-width:768px)">
pr_main_mobile.css파일은 기본적으로 적용하고 브라우저 가로 사이즈가 768px 이상일 때 pr_main_pc.css파일을 적용 해라는 명령어 인데.
pr_main_mobile.css파일과 pr_main_pc.css파일에 모두 .header h1 을 관여 하고 있습니다.
이런경우 가로 사이즈가 768px 이상일때 .header h1 속성을 덮어 버리게 되므로 pr_main_mobile.css에 있던 속성이 무시 되고 pr_main_pc.css의 속성으로 적용 됩니다.
다시 설명 드리면 브라우저 가로 사이즈에 따라서 CSS 속성을 덮어 쓴다고 보시면 됩니다. (전문용어로 "오버라이딩" 이라고 합니다.)

대부분의 반응형 웹 페이지는 위와 같은 방식으로 제작되기 때문에 CSS 파일만 잘 관리 하시면 브라우저 가로 사이즈에 따라서 얼마든지 다양하게 연출 할 수 있을꺼라 봅니다.


top