# 3. 서브페이지제작

Projects

# 목차

1. 구조작업
- 1.1. 기본구조
- 1.2. introudce - 1.2.0.1. introudce
- 1.3. gallery 204p - 1.3.0.1. gallery
- 1.4. board 207p - 1.4.0.1. board
2. 스타일작업
- 2.1. 기본스타일 - 2.1.0.1. 모바일 p211 - 2.1.0.2. 태블릿 p212 - 2.1.0.3. PC p213
- 2.2. introduce 214p
  - 2.2.1. 모바일
  - 2.2.2. 태블릿
  - 2.2.3. PC

# 1. 구조작업

# 1.1. 기본구조

아래의 이미지처럼 메인 페이지와 서브페이지는 표시된 부분만 달라지므로 동일한 부분은 복사하여 사용한다

⭐ 다른 부분만 코딩

template.html

<body>
	<div id="wrap">
		<section class="info_section">...</section>
		<header class="header">...</header>
		<!-- (section.sub_header_section>h2+ul.bradcrum_list>(li>a)*2)+(section.content_section>) -->
		<section class="sub_header_section">
			<h2>현재 페이지의 섹션 타이틀</h2>
			<ul class="bradcrum_list">
				<li><a href="index.html">메인</a></li>
				<li><a href="현재 페이지경로">현재 페이지 섹션 타이틀</a></li>
			</ul>
		</section>
		<section class="content_section"></section>
		<footer class="footer">
			<p>copyright&copy; 2014.flat design blog all rights reserved.</p>
		</footer>
	</div>
</body>

# 1.2. introudce

# 1.2.0.1. introudce

template 를 다른이름으로 저장
introudce.html
content_section 영역내에 코드 작성

introudce.html

<section class="content_section">
	<div class="content_row_1">
		<img src="images/s_images/introduce_01.png" alt="" />
		<h3>플랫 디자인</h3>
		<p>플랫 디자인은 평평함을 추구합니다. 플랫 디자인의 시초는 정확히 언제부터인지 알 수 없지만, 오래 전부터 전해져온 디자인 흐름인것은 분명합니다. 물론 플랫 디자인을 대세의 흐름에 서게 한 장본인은 있습니다. 바로 마이크로소프트의 윈도우8 UI입니다.마이크로소프트는 윈도우8에서 파격적인 플랫 UI를 발표하면서 플랫 디자인을 대중적인 디자인 흐름으로 만든 장본인입니다. 이에 따라 애플의 ios7에서도 플랫 디자인을 채택하면서 플랫 디자인의 자리가 굳건해지고 있습니다.</p>
	</div>
	<div class="content_row_2">
		<article>
			<img src="images/s_images/introduce_02.png" alt="" />
			<h4>텍스트를 이용하는 방법</h4>
			<p>텍스트를 이용하여 플랫 디자인을 하는 방법을 소개합니다. 텍스트를 사용하여 플랫 디자인을 할 때는 우선적으로 폰트의 선택이 중요합니다. 디자인에 따라 폰트의 선과 두께를 고려하여 폰트를 선택해야 합니다. 적절한 폰트 선택과 텍스트의 크기 조절로만으로도 효과적으로 메세지를 전달 할 수 있으며, 플랫 디자인을 돋보이게 할 수 있습니다.</p>
		</article>
		aee
		<article>
			<img src="images/s_images/introduce_03.png" alt="" />
			<h4>그림을 이용하는 방법</h4>
			<p>그림을 이용하여 플랫 디자인을 하는 방법을 소개합니다. 그림을 사용하여 플랫 디자인을 할 때는 배경을 이미지로 설정 하는 것이 좋습니다. 전체 배경으로 설정된 이미지는 플랫 디자인을 더욱 돋보이게 해주며 프로모션, 원 페이지 사이트등과 같은 곳에서 사용하면 극대화 된 효과를 볼 수 있습니다.</p>
		</article>
		<article>
			<img src="images/s_images/introduce_04.png" alt="" />
			<h4>아이콘을 이용하는 방법</h4>
			<p>아이콘을 이용하여 플랫 디자인을 하는 방법을 소개합니다. 아이콘을 사용하여 플랫 디자인을 할 때는 아이콘의 선정이 중요합니다. 디자인에 따라 굵은 선이 필요한 아이콘이 있을수도 있고, 얇은 선이 필요한 아이콘이 필요 할 수 도 있습니다. 이를 잘 선택하는 것이 아이콘을 이용하여 플랫 디자인을 하는 최선의 방법입니다.</p>
		</article>
	</div>
	<div class="content_row_3">
		<h4>플랫 디자인의 미래</h4>
		<div class="para">
			<p>플랫 디자인의 미래는 누구도 알 수 없지만, 감히 말하자면 플랫 디자인은 다른 디자인 흐름보다 오래 갈 것이라는 겁니다. 이제는 스큐어 모피즘 디자인 개념을 벗어나 확장성이 뛰어나고 심플하고 직관적인 플랫 디자인을 사용자 또한 선호 할 것입니다.</p>
			<p>Flat design of the future is unknown, but no one dare to say Flat design that will take longer than other design flow. Now that's out of the concept of cure fur minimalist design scalable Flat design, simple and intuitive user you will also like.</p>
		</div>
	</div>
</section>

# 1.3. gallery 204p

# 1.3.0.1. gallery

template 를 다른이름으로 저장
introudce.html
content_section 영역내에 코드 작성

gallery.html

<body>
	<div id="wrap">
		<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>
		<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>
		<section class="sub_header_section">
			<h2>갤러리</h2>
			<ul class="breadcrum_list">
				<li><a href="index.html">홈 /</a></li>
				<li><a href="gallery.html">갤러리</a></li>
			</ul>
		</section>
		<section class="content_section">
			<div class="content_row_1">
				<ul class="gallery_list">
					<li>
						<a href=""><img src="images/p_images/sub_gallery_01.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_02.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_03.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_04.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_05.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_06.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_07.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_08.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_09.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_10.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_11.jpg" alt="" /></a>
					</li>
					<li>
						<a href=""><img src="images/p_images/sub_gallery_12.jpg" alt="" /></a>
					</li>
				</ul>
			</div>
			<div class="content_row_2">
				<div class="search_box">
					<form action="#" method="get">
						<input type="search" name="gallery_search_window" class="search_window" placeholder="검색어" />
						<div class="search_select_box">
							<span>검색 대상</span>
							<ul class="search_select_list">
								<li>제목</li>
								<li>내용</li>
								<li>제목+내용</li>
								<li>댓글</li>
								<li>이름</li>
								<li>닉네임</li>
								<li>아이디</li>
								<li>태그</li>
							</ul>
						</div>
					</form>
				</div>
				<div class="write_box">
					<a href="#">글 쓰기</a>
				</div>
			</div>
			<div class="content_row_3">
				<span class="list_prev_btn">갤러리 이전 버튼</span>
				<a href="#">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
				<span class="list_next_btn">갤러리 다음 버튼</span>
			</div>
		</section>
		<footer class="footer">
			<p>copyright&copy; 2014.flat design blog all rights reserved.</p>
		</footer>
	</div>
</body>

# 1.4. board 207p

# 1.4.0.1. board

board.html

<div id="wrap">
	<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>
	<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>
	<section class="sub_header_section">
		<h2>문의사항</h2>
		<ul class="breadcrum_list">
			<li><a href="index.html">홈 /</a></li>
			<li><a href="board.html">문의사항</a></li>
		</ul>
	</section>
	<section class="content_section">
		<div class="content_row_1">
			<table class="board_table">
				<caption>
					문의사항 게시판
				</caption>
				<thead>
					<tr>
						<th>번호</th>
						<th>제목</th>
						<th>글쓴이</th>
						<th>조회수</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>5</td>
						<td><a href="">저는 누굴까요?</a></td>
						<td>FLAT DESIGN</td>
						<td>22</td>
					</tr>
					<tr>
						<td>4</td>
						<td><a href="">BLOG에서 다양한 정보를 만나보세요</a></td>
						<td>FLAT DESIGN</td>
						<td>32</td>
					</tr>
					<tr>
						<td>3</td>
						<td><a href="">FLAT DESIGN은 원색을 강조합니다.</a></td>
						<td>FLAT DESIGN</td>
						<td>67</td>
					</tr>
					<tr>
						<td>2</td>
						<td><a href="">홈페이지 리뉴얼 소식</a></td>
						<td>FLAT DESIGN</td>
						<td>96</td>
					</tr>
					<tr>
						<td>1</td>
						<td><a href="">안녕하세요 홈페이지가 오픈 되었습니다.</a></td>
						<td>FLAT DESIGN</td>
						<td>123</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="content_row_2">
			<div class="search_box">
				<form action="#" method="get">
					<input type="search" name="gallery_search_window" class="search_window" placeholder="검색어" />
					<div class="search_select_box">
						<span>검색 대상</span>
						<ul class="search_select_list">
							<li>제목</li>
							<li>내용</li>
							<li>제목+내용</li>
							<li>댓글</li>
							<li>이름</li>
							<li>닉네임</li>
							<li>아이디</li>
							<li>태그</li>
						</ul>
					</div>
				</form>
			</div>
			<div class="write_box">
				<a href="#">글 쓰기</a>
			</div>
		</div>
		<div class="content_row_3">
			<span class="list_prev_btn">문의사항 이전 버튼</span>
			<a href="#">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<span class="list_next_btn">문의사항 다음 버튼</span>
		</div>
	</section>
	<footer class="footer">
		<p>copyright&copy; 2014.flat design blog all rights reserved.</p>
	</footer>
</div>

# 2. 스타일작업

# 2.1. 기본스타일

⚡ default.css 의 공통 부분을 잘라내어 common.css 로 저장한다. 그후 서브 페이지에서 링크한다 template.css

# 2.1.0.1. 모바일 p211

template.css

/* 서브 헤더 영역 CSS */
.sub_header_section {
	order: 3;
	padding: 48px 0;
	padding: 3rem 0;
	text-align: center;
	background: #219af7;
}

.sub_header_section h2 {
	margin-bottom: 12px;
	margin-bottom: 0.75rem;
	font-size: 1.313em;
	font-size: 1.313rem;
	color: #fff;
}

.breadcrum_list li {
	display: inline;
	font-size: 0.813em;
	font-size: 0.813rem;
	font-weight: bold;
}

/* 콘텐츠 영역 CSS */
.content_section {
	order: 4;
	padding: 20px;
	padding: 1.25rem;
	background: #fff;
}

# 2.1.0.2. 태블릿 p212

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

	/* 콘텐츠 영역 CSS */
	.content_section {
		padding: 40px;
		padding: 2.5rem;
	}

# 2.1.0.3. PC p213

/* PC용 CSS */
@media all and (min-width: 960px) {
	/* 기본 CSS */

	/* 서브 헤더 영역 CSS */
	.sub_header_section {
		order: 2;
	}

	/* 콘텐츠 영역 CSS */
	.content_section {
		order: 3;
		padding: 60px;
		padding: 3.75rem;
	}
}

# 2.2. introduce 214p

2.1.과정의 css를 다른이름으로 저장-> introduce.css

# 2.2.1. 모바일

introduce.css

/* 콘텐츠 영역 CSS */
.content_section {
	order: 4;
	padding: 20px;
	padding: 1.25rem;
	background: #fff;
}

.content_section > div {
	margin-top: 60px;
	margin-top: 3.75rem;
}

.content_section > div:first-child {
	margin-top: 0;
}

.content_row_1 {
	text-align: center;
}

.content_row_1 img {
	max-width: 100%;
}

.content_row_1 h3 {
	margin: 26px 0 14px 0;
	margin: 1.625rem 0 0.875rem 0;
	font-size: 1.626em;
	font-size: 1.626rem;
	color: #333;
}

.content_row_1 p {
	font-size: 0.938em;
	font-size: 0.938rem;
	line-height: 26px;
	line-height: 1.625rem;
	color: #444;
}

.content_row_2 > article {
	margin-top: 40px;
	margin-top: 2.5rem;
	text-align: center;
}

.content_row_2 > article:first-child {
	margin-top: 0;
}

.content_row_2 img {
	max-width: 100%;
}

.content_row_2 h4 {
	margin: 26px 0 14px 0;
	margin: 1.625rem 0 0.875rem 0;
	font-size: 1.188em;
	font-size: 1.188rem;
	color: #333;
}

.content_row_2 p {
	font-size: 0.813em;
	font-size: 0.813rem;
	line-height: 21px;
	line-height: 1.313rem;
	color: #444;
}

.content_row_3 h4 {
	margin-bottom: 20px;
	margin-bottom: 1.25rem;
	padding-bottom: 8px;
	padding-bottom: 0.5rem;
	font-size: 1.188em;
	font-size: 1.188rem;
	border-bottom: 3px solid #2ecc71;
	color: #333;
}

.para p:first-child {
	margin-bottom: 30px;
	margin-bottom: 1.875rem;
}

.para p {
	font-size: 0.813em;
	font-size: 0.813rem;
	line-height: 21px;
	line-height: 1.313rem;
	color: #444;
}

# 2.2.2. 태블릿

/* 콘텐츠 영역 CSS */
.content_section{
padding:40px;
padding:2.500rem;
}

.content_section > div{
margin-top:120px;
margin-top:7.500rem;
}

# 2.2.3. PC

/* 콘텐츠 영역 CSS */
.content_section{
order:3;
padding:60px;
padding:3.750rem;
}

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

.content_row_2 article{
width:30%;
/* 252px ÷ 840px */
margin:0;
}

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

.para p{
width:47.61904761904762%;
/* 400px ÷ 840px */
margin:0;
}

introduce 완성