# 2. 반응형 프로젝트

Projects

# 목차

1. psd to fig
- 1.1. 1.1 제공된 psd를 fig로 변환한다
2. fig to psd
3. 웹사이트 구조작성 139p
- 3.1. 프로젝트폴더구성 139p
  - 3.1.1. 폴더구조
- 3.2. 기본구조 작업
  - 3.2.1. 메인페이지
    - 3.2.1.1. index.html index
  - 3.2.2. 서브페이지
    - 3.2.2.1. introduce.html introduce.html
    - 3.2.2.2. gallery.html gallery.html
    - 3.2.2.3. board.html board.html
- 3.3. 기본스타일 작업 교재 143p
  - 3.3.1. reset.css reset.css
- 3.4. 미디어쿼리 작성하기 145p
  - 3.4.1.index.html
  - 3.4.2. subpages
4. 메인페이지 제작
- 4.1. 메인페이지 구조 150p
- 4.2. 완성
  - 4.2.1. 인포메이션
  - 4.2.2. 헤더
  - 4.2.3. 슬라이더
  - 4.2.4. 최근글
  - 4.2.5. 인기글
  - 4.2.6. 갤러리
  - 4.2.7. 인기검색어
  - 4.2.8. 배너
  - 4.2.9. sns
- 4.3. 메인페이지 반응형 css 작업 161p
- 4.4. 완성
  - 4.4.1. 인포메이션
    - 4.4.1.1. 모바일
    - 4.4.1.2. PC
  - 4.4.2. 헤더 164p
    - 4.4.2.1. 모바일
    - 4.4.2.2. 태블릿 169p
    - 4.4.2.3. PC 172p
  - 4.4.3. 슬라이더 173p
    - 4.4.3.1. 모바일
    - 4.4.3.2. 태블릿 169p
    - 4.4.3.3. PC 172p
  - 4.4.4. 최근 글 영역, 인기 글 영역 176p
    - 4.4.4.1. 모바일
    - 4.4.4.2. 태블릿 169p
    - 4.4.4.3. PC 172p
  - 4.4.5. 갤러리 180p
    - 4.4.5.1. 모바일
    - 4.4.5.2. 태블릿 169p
    - 4.4.5.3. PC 172p
  - 4.4.6. 인기검색어~푸터 184p
    - 4.4.6.1. 모바일
    - 4.4.6.2. 태블릿 169p
    - 4.4.6.3. PC 172p

# 1. psd to fig

# 1.1. 1.1 제공된 psd를 fig로 변환한다

# 2. fig to psd

# 3. 웹사이트 구조작성 139p

figma 시안 링크

# 3.1. 프로젝트폴더구성 139p

# 3.1.1. 폴더구조

프로젝트 폴더를 만들고 폴더의 구조를 생성한후 리소스 폴더를 복붙한다.

리소스 폴더 경로

/02-둘째마당/5장/완성/반응형 웹 기본구성 폴더/images,js,webfont

# 3.2. 기본구조 작업

# 3.2.1. 메인페이지

# 3.2.1.1. index.html index

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<title>FLAT DESIGN</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="" />
		<link rel="shortcut icon" href="images/favicon/favicon.ico" />
		<link rel="apple-touch-icon-precomposed" href="images/favicon/flat-design-touch.png" />
		<script src="js/jquery.min.js"></script>
		<style></style>
	</head>
	<body>
		<div id="wrap"></div>
	</body>
</html>

# 3.2.2. 서브페이지

# 3.2.2.1. introduce.html introduce.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<title>FLAT DESIGN - 플랫 디자인이란?</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="" />
		<link rel="shortcut icon" href="images/favicon/favicon.ico" />
		<link rel="apple-touch-icon-precomposed" href="images/favicon/flat-design-touch.png" />
		<script src="js/jquery.min.js"></script>
		<style></style>
	</head>
	<body>
		<div id="wrap"></div>
	</body>
</html>

# 3.2.2.2. gallery.html gallery.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<title>FLAT DESIGN - 갤러리</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="" />
		<link rel="shortcut icon" href="images/favicon/favicon.ico" />
		<link rel="apple-touch-icon-precomposed" href="images/favicon/flat-design-touch.png" />
		<script src="js/jquery.min.js"></script>
		<style></style>
	</head>
	<body>
		<div id="wrap"></div>
	</body>
</html>

# 3.2.2.3. board.html board.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<title>FLAT DESIGN - 문의사항</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="" />
		<link rel="shortcut icon" href="images/favicon/favicon.ico" />
		<link rel="apple-touch-icon-precomposed" href="images/favicon/flat-design-touch.png" />
		<script src="js/jquery.min.js"></script>
		<style></style>
	</head>
	<body>
		<div id="wrap"></div>
	</body>
</html>

# 3.3. 기본스타일 작업 교재 143p

https://meyerweb.com/eric/tools/css/reset/

reset.css 를 받아서 적용후 커스터마이징 한다.

# 3.3.1. reset.css reset.css

/* CSS 초기화 */

body {
	font-family: NanumGothic, 나눔고딕, 'Nanum Gothic', '맑은 고딕', HelveticaNeue, DroidSans, Sans-serif, Helvetica;
	background: url(../images/s_images/body_bg.png);
	line-height: 1;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	text-decoration: none;
	vertical-align: baseline;
	color: #fff;
	background: transparent;
}

img {
	vertical-align: top;
}

input {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
	vertical-align: top;
	appearance: none;
	border: 1px solid #e65d5d;
	color: #e65d5d;
	border-radius: 0;
	font-family: NanumGothic, 나눔고딕, 'Nanum Gothic', '맑은 고딕', HelveticaNeue, DroidSans, Sans-serif, Helvetica;
}

input::-moz-input-placeholder {
	color: #e65d5d;
}

input::-webkit-input-placeholder {
	color: #e65d5d;
}

/* 웹폰트 CSS */
@font-face {
	font-family: 'Nanum Gothic';
	src: url(webfont/NanumGothic.eot);
}
@font-face {
	font-family: 'Nanum Gothic';
	src: url(webfont/NanumGothic.woff);
}

# 3.4. 미디어쿼리 작성하기 145p

# 3.4.1.index.html

/* 모바일용 CSS */
/* 기본 CSS */
#wrap {
	display: flex;
	flex-flow: column nowrap; /* 모바일에서  레이아웃은 세로, 한줄로 설정*/
	width: 80%;
	margin: 0 auto;
	max-width: 1200px;
}

#wrap section {
	box-sizing: border-box;
}

/* 태블릿용 CSS */
@media all and (min-width: 768px) {
	/* 기본 CSS */
	#wrap {
		flex-flow: row wrap; /* 태블릿에서  레이아웃은 가로, 여러줄로 설정*/
	}
}

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 기본 CSS */
	#wrap {
		position: relative;
		width: 90%;
	}
}

# 3.4.2. subpages

/* 모바일용 CSS */
/* 기본 CSS */
#wrap {
	display: flex;
	flex-flow: column nowrap; /* 모바일에서  레이아웃은 세로, 한줄로 설정*/
	width: 80%;
	margin: 0 auto;
	max-width: 1200px;
}

#wrap section {
	box-sizing: border-box;
}

/* 태블릿용 CSS */
@media all and (min-width: 768px) {
}

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 기본 CSS */
	#wrap {
		position: relative;
		width: 90%;
	}
}

# 4. 메인페이지 제작

# 4.1. 메인페이지 구조 150p

# 4.2. 완성

# 4.2.1. 인포메이션

<!-- section.info_section>ul.info_list>(li>a>img)*4 -->
<section class="info_section">
	<ul class="info_list">
		<li>
			<a href="index.html"><img src="images/s_images/info_icon_01.png" alt="" /></a>
		</li>
		<li>
			<a href=""><img src="images/s_images/info_icon_02.png" alt="" /></a>
		</li>
		<li>
			<a href=""><img src="images/s_images/info_icon_03.png" alt="" /></a>
		</li>
		<li>
			<a href=""><img src="images/s_images/info_icon_04.png" alt="" /></a>
		</li>
	</ul>
</section>

# 4.2.2. 헤더

<!-- header.header>(h1.logo>a)+(nav.nav>ul.gnb>(li>a+span.sub_menu_toggle_btn)*4)+span.menu_toggle_btn -->
<header class="header">
	<h1 class="logo">
		<a href="index.html">flat<br />design</a>
	</h1>
	<nav class="nav">
		<ul class="gnb">
			<li><a href="index.html">홈</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li>
			<li><a href="introudce.html">플랫 디자인이란?</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li>
			<li><a href="gallery.html">갤러리</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li>
			<li><a href="board.html">문의사항</a><span class="sub_menu_toggle_btn">하위 메뉴 토글 버튼</span></li>
		</ul>
	</nav>
	<span class="menu_toggle_btn">전체 메뉴 토글 버튼</span>
</header>

# 4.2.3. 슬라이더

<!-- section.slider_section>span.prev_btn+span.next_btn -->
<section class="slider_section"><span class="prev_btn">이전 버튼</span><span class="next_btn">다음 버튼</span></section>

# 4.2.4. 최근글

<!-- section.latest_post_section>h2.title+ul.latest_post_list>(li>a)*5 -->
<section class="latest_post_section">
	<h2 class="title">최근 글</h2>
	<ul class="latest_post_list">
		<li><a href="">안녕하세요 홈페이지가 오픈...</a></li>
		<li><a href="">홈페이지 리뉴얼...</a></li>
		<li><a href="">flat design은...</a></li>
		<li><a href="">blog에서 다양한 정보를...</a></li>
		<li><a href="">저는 누굴까요?...</a></li>
	</ul>
</section>

# 4.2.5. 인기글

<!-- section.popular_post_section>h2.title+ul.popular_post_list>(li>a)*5 -->
<section class="popular_post_section">
	<h2 class="title">인기 글</h2>
	<ul class="popular_post_list">
		<li><a href="">안녕하세요 홈페이지가 오픈...</a></li>
		<li><a href="">홈페이지 리뉴얼...</a></li>
		<li><a href="">flat design은...</a></li>
		<li><a href="">blog에서 다양한 정보를...</a></li>
		<li><a href="">저는 누굴까요?...</a></li>
	</ul>
</section>

# 4.2.6. 갤러리

<!-- section.gallery_section>+ul.gallery_list>(li>a>(figure>img+figcaption))*2  -->
<section class="gallery_section">
	<ul class="gallery_list">
		<li>
			<a href="#">
				<figure>
					<img src="images/p_images/gallery_01.jpg" alt="" />
					<figcaption>디자인 트렌트 플랫</figcaption>
				</figure>
			</a>
		</li>
		<li>
			<a href="#">
				<figure>
					<img src="images/p_images/gallery_02.jpg" alt="" />
					<figcaption>원색이 포인트 플랫</figcaption>
				</figure>
			</a>
		</li>
	</ul>
</section>

# 4.2.7. 인기검색어

<!-- section.rankup_section>h2.title+ul.rankup_list>(li>a)*10 -->
<section class="rankup_section">
	<h2 class="title">인기 검색어</h2>
	<ul class="rankup_list">
		<li><a href="">반응형 웹</a></li>
		<li><a href="">미디어 쿼리</a></li>
		<li><a href="">뷰포트</a></li>
		<li><a href="">CSS 트릭스</a></li>
		<li><a href="">W3C</a></li>
		<li><a href="">루크 W</a></li>
		<li><a href="">CSS 젠 가든</a></li>
		<li><a href="">클리어 보스</a></li>
		<li><a href="">XE</a></li>
		<li><a href="">워드프레스</a></li>
	</ul>
</section>

# 4.2.8. 배너

<!-- section.banner_section>(.banner_box_01>a>img)+(.banner_box_02>ul.banner_list>(li>a>img)*3)  -->
<section class="banner_section">
	<div class="banner_box_01">
		<a href=""><img src="images/s_images/w3c_logo.png" alt="" /></a>
	</div>
	<div class="banner_box_02">
		<ul class="banner_list">
			<li>
				<a href=""><img src="images/s_images/js_logo.png" alt="" /></a>
			</li>
			<li>
				<a href=""><img src="images/s_images/html_logo.png" alt="" /></a>
			</li>
			<li>
				<a href=""><img src="images/s_images/css_logo.png" alt="" /></a>
			</li>
		</ul>
	</div>
</section>

# 4.2.9. sns

<!-- section.social_section>+ul.social_list>(li>a>img)*3  -->
<section class="social_section">
	<ul class="social_list">
		<li>
			<a href=""><img src="images/s_images/social_icon_01.png" alt="" /></a>
		</li>
		<li>
			<a href=""><img src="images/s_images/social_icon_02.png" alt="" /></a>
		</li>
		<li>
			<a href=""><img src="images/s_images/social_icon_03.png" alt="" /></a>
		</li>
	</ul>
</section>

# 4.3. 메인페이지 반응형 css 작업 161p

# 4.4. 완성

break-point	device	제목3	제목4
360~767	Mobile	---	---
768~959	Tablet	---	---
960~	Desktop	---	---

교재는 인라인 방식으로 작성했으나 link로 변경하여 진행한다.

<link rel="stylesheet" href="./css/default.css">

# 4.4.1. 인포메이션

# 4.4.1.1. 모바일

/* 모바일용 CSS */
/* 기본 CSS */
...
/* 인포메이션 영역 CSS */
.info_section {
	order: 1; /* 모바일화면에서 제일 우선 배치 */
	width: 100%;
	background: #2ecc71;
	border-bottom: 1px solid #39d67c;
}

.info_list {
	display: flex; /* info_list 플렉서블 박스로 */
}

.info_list li {
	width: 25%;
	text-align: center;
}

.info_list li a {
	display: block;
	padding: 15px 0; /* 폴백 162p 현재는 필요없음 */
	padding: 0.938rem 0;
}

# 4.4.1.2. PC

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 인포메이션 영역 CSS */
	.info_section {
		order: 0; /* pc에서 인포메이션은 상단우측 배치 이므로 order 의 값을 초기화 한다. */
		position: absolute; /* 인포메이션의 위치를 position으로 설정한다. */
		/* top: 30px; */
		top: 1.875rem;
		/* right: 30px; */
		right: 1.875rem;
		z-index: 30;
		width: auto;
		border-bottom: 0;
	}

	.info_list li {
		/* pc에서는 모바일과 레이아웃이 달라지므로 속성 수정*/
		width: auto;
		margin-left: 15px;
		margin-left: 0.625rem;
	}

	.info_list li a {
		padding: 0; /* 패딩값 삭제 */
	}
}

# 4.4.2. 헤더 164p

# 4.4.2.1. 모바일

/* 모바일용 CSS */
/* 헤더 영역 CSS */
.header {
	display: flex;
	order: 2; /* 모바일에서 두번째 배치 */
	flex-direction: column; /* 세로배치 */
	position: relative; /* 모바일의 토글버튼 구현을 위해 기준으로 지정함 */
	width: 100%;
}

.logo {
	order: 1; /* 헤더영역 내 최상단 위치 */
	width: 100%;
	padding: 1.875rem 0;
	font-size: 1.188rem;
	line-height: 1.313rem;
	text-align: center;
	text-transform: uppercase;
	background: #2ecc71;
	text-shadow: 0px 1px 1px #25ab5e;
}

.nav {
	order: 2; /* 두번째 위치 */
	width: 100%;
}

.gnb li {
	display: flex;
	background: #2c3e50;
	/* 부모가 flex면 인라인요소는 블럭레벨로 작동 */
}

.gnb li a {
	width: 80%;
	padding: 1.25rem 0;
	font-size: 0.938rem;
	text-indent: 1.25rem;
	font-weight: bold;
	text-transform: uppercase;
}

.gnb li span {
	/* 접근성,seo */
	width: 20%;
	text-indent: -9999px;
	background: url(../images/s_images/sub_menu_toggle_btn.png) center center no-repeat;
	cursor: pointer;
}

.menu_toggle_btn {
	display: block;
	width: 1.875rem;
	height: 1.875rem;
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	text-indent: -9999px;
	background: url(../images/s_images/menu_toggle_btn.png) no-repeat;
	cursor: pointer;
}

# 4.4.2.2. 태블릿 169p

/* 태블릿용 CSS */
@media all and (min-width: 768px) {
	/* 기본 CSS */
	#wrap {
		flex-flow: row wrap;
	}

	/* 헤더 영역 CSS */
	.header {
		flex-direction: row;
	}

	.logo {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 15.625%; /* 120px ÷ 768px */
		padding: 0;
	}

	.logo a {
		display: block;
		padding: 50px 0;
		padding: 3.125rem 0;
	}

	.nav {
		position: relative;
		min-height: 80px;
		min-height: 5rem;
		background: #2ecc71;
	}

	.gnb {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 20;
		width: 40.10416666666667%;
		/* 959크기에서 확인하면 308px임. 아래 이미지 참조-> 308px ÷ 768px */
	}

	.menu_toggle_btn {
		top: 50%;
		right: 30px;
		right: 1.875rem;
		z-index: 20;
		margin-top: -0.938rem;
	}
}

# 4.4.2.3. PC 172p

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 헤더 영역 CSS */
	.header {
		order: 1;
		justify-content: flex-end;
		position: static;
	}

	.logo {
		width: 12.5%; /* 120px ÷ 960px */
	}

	.nav {
		display: flex;
		align-items: center;
		position: static;
		width: 87.5%; /* 840px ÷ 960px */
	}

	.gnb {
		display: flex !important;
		flex-direction: row;
		position: static;
		width: 100%;
		text-shadow: 0px 1px 1px #25ab5e;
	}

	.gnb li {
		display: block;
		margin-left: 5.20833333333333%; /* 50px ÷ 840px */
		background: none;
	}

	.gnb li a {
		width: auto;
		padding: 0;
		text-indent: 0;
	}

	.gnb li span {
		display: none;
	}

	.menu_toggle_btn {
		display: none;
	}
}

# 4.4.3. 슬라이더 173p

# 4.4.3.1. 모바일

/* 모바일용 CSS */
/* 슬라이더 영역 CSS */
.slider_section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	order: 3;
	width: 100%;
	height: 300px;
	height: 18.75rem;
	background: url(../images/p_images/slider_01.jpg) center center no-repeat;
}

.slider_section span {
	width: 34px;
	width: 2.125rem;
	height: 39px;
	height: 2.438rem;
	text-indent: -9999px;
	background: url(../images/s_images/slider_arrow.png) no-repeat;
	cursor: pointer;
}

span.prev_btn {
	margin-left: -10px;
	margin-left: -0.625rem;
	background-position: 0 0;
}

span.next_btn {
	margin-right: -10px;
	margin-right: -0.625rem;
	background-position: -34px 0;
}

# 4.4.3.2. 태블릿 169p

/* 태블릿용 CSS */
@media all and (min-width: 768px) {
	/* 슬라이더 영역 CSS */
	.slider_section {
		order: 2;
		width: 50%; /* 480px ÷ 960px */
	}
}

# 4.4.3.3. PC 172p

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 슬라이더 영역 CSS */
	.slider_section {
		order: 2;
		width: 50%; /* 480px ÷ 960px */
	}
}

# 4.4.4. 최근 글 영역, 인기 글 영역 176p

# 4.4.4.1. 모바일

/* 모바일용 CSS */
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section {
	order: 4;
	background: #ffc40f;
	text-shadow: 0px 1px 1px #b98e0b;
}

.popular_post_section {
	order: 5;
	background: #a660c2;
	text-shadow: 0px 1px 1px #714185;
}

.latest_post_section,
.popular_post_section {
	padding: 40px 12.5%;
	padding: 2.5rem 12.5%; /* 40px ÷ 320px */
}

.title {
	margin-bottom: 30px;
	margin-bottom: 1.875rem;
	font-size: 1.188em;
	font-size: 1.188rem;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

.latest_post_list li,
.popular_post_list li {
	margin-top: 15px;
	margin-top: 0.938rem;
	padding-left: 14px;
	padding-left: 0.875rem;
	font-weight: bold;
	text-transform: uppercase;
	background: url(../images/s_images/post_circle_icon.png) left center no-repeat;
}

.latest_post_list li:first-child,
.popular_post_list li:first-child {
	margin-top: 0;
}

# 4.4.4.2. 태블릿 169p

/* 태블릿용 CSS */
@media all and (min-width: 768px) {
	/* 최근 글 영역, 인기 글 영역 CSS */
	.latest_post_section {
		order: 5;
	}

	.popular_post_section {
		order: 6;
	}

	.latest_post_section,
	.popular_post_section {
		width: 41.666666666666666666666666666667%; /* 320px ÷ 768px */
		padding-left: 5.208333333333333333333333333333%;
		padding-right: 5.208333333333333333333333333333%; /* 40px ÷ 768px */
	}
}

# 4.4.4.3. PC 172p

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 최근 글 영역, 인기 글 영역 CSS */
	.latest_post_section,
	.popular_post_section {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30%; /* 288px ÷ 960px */
		padding-left: 0;
		padding-right: 0;
	}
}

# 4.4.5. 갤러리 180p

# 4.4.5.1. 모바일

/* 모바일용 CSS */

/* 갤러리 영역 CSS */
.gallery_section {
	order: 6;
	padding: 50px 12.5%;
	padding: 3.125rem 12.5%; /* 40px ÷ 320px */
	text-align: center;
	background: #e65d5d;
	text-shadow: 0px 1px 1px #c43434;
}

.gallery_section img {
	width: 100%;
	max-width: 100%;
	border-radius: 3px;
	box-shadow: 0px 1px 1px #c43434;
}

.gallery_list li:nth-child(2) {
	margin-top: 30px;
	margin-top: 1.875rem;
}

.gallery_list li figcaption {
	margin-top: 20px;
	margin-top: 1.25rem;
	font-size: 1.188em;
	font-size: 1.188rem;
	text-transform: uppercase;
	font-weight: bold;
}

# 4.4.5.2. 태블릿 169p

/* 태블릿용 CSS */
@media all and (min-width: 768px) {
	/* 갤러리 영역 CSS */
	.gallery_section {
		order: 8;
		width: 71.354166666666666666666666666667%; /* 548px ÷ 768px */
		padding-left: 5.208333333333333333333333333333%;
		padding-right: 5.208333333333333333333333333333%; /* 40px ÷ 768px */
	}

	.gallery_list {
		display: flex;
	}

	.gallery_list li {
		width: 47.008547008547008547008547008547%; /* 220px ÷ 468px */
	}

	.gallery_list li:nth-child(2) {
		margin-left: 5.982905982905982905982905982906%; /* 28px ÷ 468px */
		margin-top: 0;
	}

# 4.4.5.3. PC 172p

/* PC용 CSS */
@media all and (min-width: 960px) {
/* 갤러리 영역 CSS */
	.gallery_section {
		order: 3;
		width: 27.08333333333333%; /* 260px ÷ 960px */
	}

	.gallery_list {
		display: block;
	}

	.gallery_list li {
		width: auto;
	}

	.gallery_list li:nth-child(2) {
		margin-top: 30px;
		margin-top: 1.875rem;
		margin-left: 0;
	}

# 4.4.6. 인기검색어~푸터 184p

# 4.4.6.1. 모바일

/* 모바일용 CSS */
/* 인기 검색어 영역 CSS */
.rankup_section {
	order: 7;
	padding: 40px 12.5%;
	padding: 2.5rem 12.5%; /* 40px ÷ 320px */
	background: #219af7;
	text-shadow: 0px 1px 1px #1974ba;
}

.rankup_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.rankup_list li {
	width: 47.916666666666666666666666666667%; /* 115px ÷ 240px */
	margin-top: 15px;
	margin-top: 0.938rem;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}

.rankup_list li:first-child,
.rankup_list li:nth-child(2) {
	margin-top: 0;
}

.rankup_list li a {
	display: block;
	padding: 10px 0;
	padding: 0.625rem 0;
	border: 1px solid #fff;
	border-radius: 5px;
}

/* 배너 영역 CSS */
.banner_section {
	order: 8;
}

.banner_box_01 {
	background: #e6567a;
}

.banner_box_01 a {
	display: block;
	padding: 30px 0;
	padding: 1.875rem 0;
	text-align: center;
}

.banner_box_02 {
	background: #c44968;
}

.banner_list {
	display: flex;
	justify-content: space-between;
	padding: 30px 12.5%;
	padding: 1.875rem 12.5%; /* 40px ÷ 320px */
}

/* 소셜 네트워크 영역 CSS */
.social_section {
	order: 9;
	padding: 24px 12.5%;
	padding: 1.5rem 12.5%; /* 40px ÷ 320px */
	background: #fff;
}

.social_list {
	display: flex;
	justify-content: space-between;
}

/* 푸터 영역 CSS */
.footer {
	order: 10;
	width: 100%;
	background: #474747;
}

.footer p {
	padding: 20px;
	padding: 1.25rem;
	font-size: 0.813em;
	font-size: 0.813rem;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
	text-shadow: 0px 1px 1px #191919;
}

# 4.4.6.2. 태블릿 169p

/* 태블릿용 CSS */
@media all and (min-width: 768px) {
	/* 인기 검색어 영역 CSS */
	.rankup_section {
		order: 4;
		width: 40.10416666666667%; /* 308px ÷ 768px */
		padding-left: 5.20833333333333%;
		padding-right: 5.20833333333333%; /* 40px ÷ 768px */
	}

	/* 배너 영역 CSS */
	.banner_section {
		display: flex;
		order: 9;
		flex-direction: column;
		width: 28.645833333333333333333333333333%; /* 220px ÷ 768px */
	}

	.banner_section div {
		flex: 1 1 0;
	}

	.banner_box_01 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner_box_01 a {
		display: inline;
		padding: 0;
	}

	.banner_box_02 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner_list {
		padding: 0;
		justify-content: flex-start;
	}

	.banner_list li:nth-child(2) {
		margin: 0 14px;
		margin: 0 0.875rem;
	}

	/* 소셜 네트워크 영역 CSS */
	.social_section {
		display: flex;
		order: 7;
		justify-content: center;
		align-items: center;
		width: 16.66666666666667%; /* 128px ÷ 768px */
		padding: 0;
	}

	.social_list {
		flex-direction: column;
		justify-content: flex-start;
	}

	.social_list li:nth-child(2) {
		margin: 24px 0;
		margin: 1.5rem 0;
	}

	/* 푸터 영역 CSS */
	.footer p {
		padding: 40px 0;
		padding: 2.5rem 0;
	}
}

# 4.4.6.3. PC 172p

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 인기 검색어 영역 CSS */
	.rankup_section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 22.91666666666667%; /* 220px ÷ 960px */
		padding: 0;
	}

	.rankup_list {
		display: block;
	}

	.rankup_list li {
		width: auto;
		text-align: left;
		counter-increment: rankup-counter;
	}

	.rankup_list li:nth-child(2) {
		margin-top: 15px;
		margin-top: 0.938rem;
	}

	.rankup_list li:before {
		padding-right: 6px;
		padding-right: 0.375rem;
		text-transform: uppercase;
		font-weight: bold;
		color: #fff;
		text-shadow: 0px 1px 1px #428e9e;
		content: counter(rankup-counter) '.';
	}

	.rankup_list li a {
		display: inline;
		padding: 0;
		border: 0;
	}

	/* 배너 영역 CSS */
	.banner_section {
		order: 7;
		width: 22.91666666666667%; /* 220px ÷ 960px */
	}

	/* 소셜 네트워크 영역 CSS */
	.social_section {
		order: 8;
		width: 17.08333333333333%; /* 164px ÷ 960px */
	}

	/* 푸터 영역 CSS */
	.footer {
		order: 9;
	}

	.footer p {
		padding-left: 3.125%; /* 30px ÷ 960px */
		text-align: left;
	}
}