히바리 쿄야 와 함께 하는 Developer Cafe
[3일차] DO IT 반응형 웹 만들기/p 201 ~ p 245 / 서브페이지 만들기 본문
<!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" href="css/reset.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<link rel="stylesheet" type="text/css" href="css/tablet.css">
<link rel="stylesheet" type="text/css" href="css/pc.css">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="images/icon/flat-design-touch.png">
<script src="js/jquery.min.js" type="text/javasctipt">
</script>
<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>
<!-- //info_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="introduce.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>
<!-- //header -->
<section class="slider_section">
<span class="prev_btn">이전 버튼</span>
<span class="next_btn">다음 버튼</span>
</section>
<!-- //slider_section -->
<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>
<!-- //latest_post_section -->
<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>
<!-- //popular_post_section -->
<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>
<!-- //gallery_section -->
<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>
<!-- //rankup_section -->
<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>
<!-- //banner_section -->
<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>
<!-- //social_section -->
<footer class="footer">
<p>copyright©2021.flat design blog all rights reserved.</p>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
index.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="css/gallery.css">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="images/icon/flat-design-touch.png">
<script src="js/jquery.min.js"></script>
<script src="js/flat.min.js"></script>
</head>
<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© 2014.flat design blog all rights reserved.</p>
</footer>
</div>
</body>
</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="css/board.css">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="images/icon/flat-design-touch.png">
<script src="js/jquery.min.js"></script>
<script src="js/flat.min.js"></script>
</head>
<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="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© 2014.flat design blog all rights reserved.</p>
</footer>
</div>
</body>
</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="css/introduce.css">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="images/icon/flat-design-touch.png">
<script src="js/jquery.min.js"></script>
<script src="js/flat.min.js"></script>
</head>
<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="introudce.html">플랫 디자인이란?</a></li>
</ul>
</section>
<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>
<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>
<footer class="footer">
<p>copyright© 2014.flat design blog all rights reserved.</p>
</footer>
</div>
</body>
</html>introduce.html
/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}
/* 인포메이션 영역 CSS */
.info_section{
order:0;
position:absolute;
top:30px;
top:1.875rem;
right:30px;
right:1.875rem;
z-index:30;
width:auto;
border-bottom:0;
}
.info_list li{
width:auto;
margin-left:15px;
margin-left:0.625rem;
}
.info_list li a{
padding:0;
}
/* 헤더 영역 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;
}
/* 슬라이더 영역 CSS */
.slider_section{
order:2;
width:50%;
/* 480px ÷ 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;
}
/* 갤러리 영역 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;
}
/* 인기 검색어 영역 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;
}
}
pc.css
/* 태블릿용 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:5.000rem;
background:#2ecc71;
}
.gnb{
position:absolute;
top:100%;
right:0;
z-index:20;
width:40.10416666666667%;
/* 308px ÷ 768px */
}
.menu_toggle_btn{
top:50%;
right:30px;
right:1.875rem;
z-index:20;
margin-top:-15px;
margin-top:-0.938rem;
}
/* 슬라이더 영역 CSS */
.slider_section{
width:59.89583333333333%;
/* 460px ÷ 768px */
height:auto;
}
.slider_section span{
position:relative;
z-index:10;
}
/* 최근 글 영역, 인기 글 영역 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 */
}
/* 갤러리 영역 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;
}
/* 인기 검색어 영역 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.500rem 0;
}
/* 푸터 영역 CSS */
.footer p{
padding:40px 0;
padding:2.500rem 0;
}
}
tablet.css
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}
#wrap section{
box-sizing:border-box;
}
/* 인포메이션 영역 CSS */
.info_section{
order:1;
width:100%;
background:#2ecc71;
border-bottom:1px solid #39d67c;
}
.info_list{
display:flex;
}
.info_list li{
width:25%;
text-align:center;
}
.info_list li a{
display:block;
padding:15px 0;
padding:0.938rem 0;
}
/* 헤더 영역 CSS */
.header{
display:flex;
order:2;
flex-direction:column;
position:relative;
width:100%;
}
.logo{
order:1;
width:100%;
padding:30px 0;
padding:1.875rem 0;
font-size:1.188em;
font-size:1.188rem;
line-height:21px;
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;
}
.gnb li a{
width:80%;
padding:20px 0;
padding:1.250rem 0;
font-size:0.938em;
font-size:0.938rem;
text-indent:20px;
text-indent:1.250rem;
font-weight:bold;
text-transform:uppercase;
}
.gnb li span{
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:30px;
width:1.875rem;
height:30px;
height:1.875rem;
position:absolute;
top:10px;
top:0.625rem;
right:10px;
right:0.625rem;
text-indent:-9999px;
background:url(../images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer;
}
/* 슬라이더 영역 CSS */
.slider_section{
display:flex;
justify-content:space-between;
align-items:center;
order:3;
width:100%;
height:300px;
height:18.750rem;
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;
}
/* 최근 글 영역, 인기 글 영역 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.500rem 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;
}
/* 갤러리 영역 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.250rem;
font-size:1.188em;
font-size:1.188rem;
text-transform:uppercase;
font-weight:bold;
}
/* 인기 검색어 영역 CSS */
.rankup_section{
order:7;
padding:40px 12.5%;
padding:2.500rem 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.500rem 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.250rem;
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;
}mobile.css
@charset utf-8;
/* CSS 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
code, del, dfn, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: NamumGodic,나눔고딕,'Namum Godic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
background:url(images/s_images/body_bg.png);
line-height:1;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul, li{
list-style:none;
}
a {
margin:0;
padding:0;
font-size:100%;
text-decoration: none;
vertical-align: baseline;
color: #fff;
background: transparent;
}
img {
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
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)
}
reset.css
@charset "utf-8";
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}
#wrap section{
box-sizing:border-box;
}
/* 인포메이션 영역 CSS */
.info_section{
order:1;
width:100%;
background:#2ecc71;
border-bottom:1px solid #39d67c;
}
.info_list{
display:flex;
}
.info_list li{
width:25%;
text-align:center;
}
.info_list li a{
display:block;
padding:15px 0;
padding:0.938rem 0;
}
/* 헤더 영역 CSS */
.header{
display:flex;
order:2;
flex-direction:column;
position:relative;
width:100%;
}
.logo{
order:1;
width:100%;
padding:30px 0;
padding:1.875rem 0;
font-size:1.188em;
font-size:1.188rem;
line-height:21px;
line-height:1.313rem;
text-align:center;
text-transform:uppercase;
background:#2ecc71;
text-shadow:0px 1px 1px #25ab5e;
}
.nav{
order:2;
width:100%;
}
.gnb{
display:none;
}
.gnb li{
display:flex;
background:#2c3e50;
}
.gnb li a{
width:80%;
padding:20px 0;
padding:1.250rem 0;
font-size:0.938em;
font-size:0.938rem;
text-indent:20px;
text-indent:1.250rem;
font-weight:bold;
text-transform:uppercase;
}
.gnb li span{
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:30px;
width:1.875rem;
height:30px;
height:1.875rem;
position:absolute;
top:10px;
top:0.625rem;
right:10px;
right:0.625rem;
text-indent:-9999px;
background:url(../images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer;
}
/* 서브 헤더 영역 CSS */
.sub_header_section{
order:3;
padding:48px 0;
padding:3.000rem 0;
text-align:center;
background:#219af7;
}
.sub_header_section h2{
margin-bottom:12px;
margin-bottom:0.750rem;
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.250rem;
background:#fff;
}
.gallery_list img{
width:100%;
max-width:100%;
border-radius:5px;
transition:all 0.4s;
-webkit-filter:grayscale(1);
filter:grayscale(1);
}
.gallery_list img:hover{
-webkit-filter:grayscale(0);
filter:grayscale(0);
}
.gallery_list li{
margin-top:20px;
margin-top:1.250rem;
}
.gallery_list li:first-child{
margin-top:0;
}
.content_row_2{
display:flex;
justify-content:space-between;
margin:30px 0 40px 0;
margin:1.875rem 0 2.500rem 0;
}
.search_window{
width:118px;
width:7.375rem;
height:28px;
height:1.750rem;
font-size:0.688em;
font-size:0.688rem;
line-height:28px;
line-height:1.750rem;
text-indent:10px;
text-indent:0.625rem;
}
.search_select_box{
display:none;
}
.write_box a{
display:block;
width:70px;
width:4.375rem;
height:30px;
height:1.875rem;
font-size:0.813em;
font-size:0.813rem;
line-height:30px;
line-height:1.875rem;
text-align:center;
background:#e65d5d;
color:#fff;
}
.content_row_3{
display:flex;
justify-content:center;
}
.content_row_3 span{
width:28px;
width:1.750rem;
height:28px;
height:1.750rem;
text-indent:-9999px;
}
.content_row_3 span.list_prev_btn{
margin-right:10px;
margin-right:0.625rem;
background:#2ecc71 url(../images/s_images/list_prev_btn.png) center center no-repeat;
}
.content_row_3 span.list_next_btn{
margin-left:10px;
margin-left:0.625rem;
background:#2ecc71 url(../images/s_images/list_next_btn.png) center center no-repeat;
}
.content_row_3 a{
width:26px;
width:1.625rem;
font-size:0.813em;
font-size:0.813rem;
line-height:26px;
line-height:1.625rem;
text-align:center;
border:1px solid #219af7;
color:#219af7;
transition:all 0.2s;
}
.content_row_3 a:nth-of-type(2){
margin:0 6px;
margin:0 0.375rem;
}
.content_row_3 a:hover{
color:#fff;
background:#219af7;
}
/* 푸터 영역 CSS */
.footer{
order:5;
width:100%;
background:#474747;
}
.footer p{
padding:20px;
padding:1.250rem;
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;
}
/* 태블릿용 CSS */
@media all and (min-width:768px){
/* 헤더 영역 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:5.000rem;
background:#2ecc71;
}
.gnb{
position:absolute;
top:100%;
right:0;
z-index:20;
width:40.10416666666667%;
/* 308px ÷ 768px */
}
.menu_toggle_btn{
top:50%;
right:30px;
right:1.875rem;
z-index:20;
margin-top:-15px;
margin-top:-0.938rem;
}
/* 콘텐츠 영역 CSS */
.content_section{
padding:40px;
padding:2.500rem;
}
.gallery_list{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.gallery_list li{
width:48.54651162790698%;
/* 334px ÷ 688px */
}
.gallery_list li:nth-child(2){
margin-top:0;
}
.search_select_box{
display:inline-block;
position:relative;
}
.search_select_box span{
display:inline-block;
width:80px;
width:5.000rem;
height:30px;
height:1.875rem;
font-size:0.813em;
font-size:0.813rem;
line-height:28px;
line-height:1.750rem;
text-align:center;
color:#fff;
background:#e65d5d;
cursor:pointer;
}
.search_select_list{
display:none;
position:absolute;
top:105%;
left:0;
width:100%;
}
.search_select_list li{
padding:6px 0;
padding:0.375rem 0;
font-size:0.750em;
font-size:0.750rem;
text-indent:10px;
text-indent:0.625rem;
color:#fff;
background:#e65d5d;
cursor:pointer;
}
.search_select_box:hover .search_select_list{
display:block;
}
/* 푸터 영역 CSS */
.footer p{
padding:40px 0;
padding:2.500rem 0;
}
}
/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}
/* 인포메이션 영역 CSS */
.info_section{
order:0;
position:absolute;
top:30px;
top:1.875rem;
right:30px;
right:1.875rem;
z-index:30;
width:auto;
border-bottom:0;
}
.info_list li{
width:auto;
margin-left:15px;
margin-left:0.625rem;
}
.info_list li a{
padding:0;
}
/* 헤더 영역 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;
}
/* 서브 헤더 영역 CSS */
.sub_header_section{
order:2;
}
/* 콘텐츠 영역 CSS */
.content_section{
order:3;
padding:60px;
padding:3.750rem;
}
.gallery_list li{
width:23.92857142857143%;
/* 201px ÷ 840px */
margin-top:12px;
margin-top:0.750rem;
}
.gallery_list li:nth-child(3), .gallery_list li:nth-child(4){
margin-top:0;
}
/* 푸터 영역 CSS */
.footer{
order:4;
}
.footer p{
padding-left:3.125%;
/* 30px ÷ 960px */
text-align:left;
}
}gallery.css
@charset "utf-8";
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}
#wrap section{
box-sizing:border-box;
}
/* 인포메이션 영역 CSS */
.info_section{
order:1;
width:100%;
background:#2ecc71;
border-bottom:1px solid #39d67c;
}
.info_list{
display:flex;
}
.info_list li{
width:25%;
text-align:center;
}
.info_list li a{
display:block;
padding:15px 0;
padding:0.938rem 0;
}
/* 헤더 영역 CSS */
.header{
display:flex;
order:2;
flex-direction:column;
position:relative;
width:100%;
}
.logo{
order:1;
width:100%;
padding:30px 0;
padding:1.875rem 0;
font-size:1.188em;
font-size:1.188rem;
line-height:21px;
line-height:1.313rem;
text-align:center;
text-transform:uppercase;
background:#2ecc71;
text-shadow:0px 1px 1px #25ab5e;
}
.nav{
order:2;
width:100%;
}
.gnb{
display:none;
}
.gnb li{
display:flex;
background:#2c3e50;
}
.gnb li a{
width:80%;
padding:20px 0;
padding:1.250rem 0;
font-size:0.938em;
font-size:0.938rem;
text-indent:20px;
text-indent:1.250rem;
font-weight:bold;
text-transform:uppercase;
}
.gnb li span{
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:30px;
width:1.875rem;
height:30px;
height:1.875rem;
position:absolute;
top:10px;
top:0.625rem;
right:10px;
right:0.625rem;
text-indent:-9999px;
background:url(../images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer;
}
/* 서브 헤더 영역 CSS */
.sub_header_section{
order:3;
padding:48px 0;
padding:3.000rem 0;
text-align:center;
background:#219af7;
}
.sub_header_section h2{
margin-bottom:12px;
margin-bottom:0.750rem;
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.250rem;
background:#fff;
}
.board_table{
width:100%;
}
.board_table caption{
position:absolute;
top:-9999px;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
visibility:hidden;
}
.board_table thead, .board_table tbody{
font-size:0.813em;
font-size:0.813rem;
text-align:center;
font-weight:bold;
}
.board_table thead{
color:#fff;
background:#2c3e50;
}
.board_table tbody, .board_table tbody a{
color:#333;
}
.board_table tbody tr:nth-child(odd){
background:#f6f6f6;
}
.board_table thead tr th{
padding:18px 0;
padding:1.125rem 0;
}
.board_table tbody tr td{
padding:22px 0;
padding:1.375rem 0;
}
.board_table thead tr th:first-child, .board_table thead tr th:nth-child(3), .board_table thead tr th:nth-child(4),
.board_table tbody tr td:first-child, .board_table tbody tr td:nth-child(3), .board_table tbody tr td:nth-child(4){
display:none;
}
.content_row_2{
display:flex;
justify-content:space-between;
margin:30px 0 40px 0;
margin:1.875rem 0 2.500rem 0;
}
.search_window{
width:118px;
width:7.375rem;
height:28px;
height:1.750rem;
font-size:0.688em;
font-size:0.688rem;
line-height:28px;
line-height:1.750rem;
text-indent:10px;
text-indent:0.625rem;
}
.search_select_box{
display:none;
}
.write_box a{
display:block;
width:70px;
width:4.375rem;
height:30px;
height:1.875rem;
font-size:0.813em;
font-size:0.813rem;
line-height:30px;
line-height:1.875rem;
text-align:center;
background:#e65d5d;
color:#fff;
}
.content_row_3{
display:flex;
justify-content:center;
}
.content_row_3 span{
width:28px;
width:1.750rem;
height:28px;
height:1.750rem;
text-indent:-9999px;
}
.content_row_3 span.list_prev_btn{
margin-right:10px;
margin-right:0.625rem;
background:#2ecc71 url(../images/s_images/list_prev_btn.png) center center no-repeat;
}
.content_row_3 span.list_next_btn{
margin-left:10px;
margin-left:0.625rem;
background:#2ecc71 url(../images/s_images/list_next_btn.png) center center no-repeat;
}
.content_row_3 a{
width:26px;
width:1.625rem;
font-size:0.813em;
font-size:0.813rem;
line-height:26px;
line-height:1.625rem;
text-align:center;
border:1px solid #219af7;
color:#219af7;
transition:all 0.2s;
}
.content_row_3 a:nth-of-type(2){
margin:0 6px;
margin:0 0.375rem;
}
.content_row_3 a:hover{
color:#fff;
background:#219af7;
}
/* 푸터 영역 CSS */
.footer{
order:5;
width:100%;
background:#474747;
}
.footer p{
padding:20px;
padding:1.250rem;
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;
}
/* 태블릿용 CSS */
@media all and (min-width:768px){
/* 헤더 영역 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:5.000rem;
background:#2ecc71;
}
.gnb{
position:absolute;
top:100%;
right:0;
z-index:20;
width:40.10416666666667%;
/* 308px ÷ 768px */
}
.menu_toggle_btn{
top:50%;
right:30px;
right:1.875rem;
z-index:20;
margin-top:-15px;
margin-top:-0.938rem;
}
/* 콘텐츠 영역 CSS */
.content_section{
padding:40px;
padding:2.500rem;
}
.board_table thead tr th:first-child, .board_table thead tr th:nth-child(3), .board_table thead tr th:nth-child(4),
.board_table tbody tr td:first-child, .board_table tbody tr td:nth-child(3), .board_table tbody tr td:nth-child(4){
display:table-cell;
}
.board_table thead tr th:first-child{
width:10%;
}
.board_table thead tr th:nth-child(2){
width:65%;
}
.board_table thead tr th:nth-child(3){
width:15%;
}
.board_table thead tr th:nth-child(4){
width:10%;
}
.board_table tbody tr td:nth-child(2){
text-align:left;
}
.search_select_box{
display:inline-block;
position:relative;
}
.search_select_box span{
display:inline-block;
width:80px;
width:5.000rem;
height:30px;
height:1.875rem;
font-size:0.813em;
font-size:0.813rem;
line-height:28px;
line-height:1.750rem;
text-align:center;
color:#fff;
background:#e65d5d;
cursor:pointer;
}
.search_select_list{
display:none;
position:absolute;
top:105%;
left:0;
width:100%;
}
.search_select_list li{
padding:6px 0;
padding:0.375rem 0;
font-size:0.750em;
font-size:0.750rem;
text-indent:10px;
text-indent:0.625rem;
color:#fff;
background:#e65d5d;
cursor:pointer;
}
.search_select_box:hover .search_select_list{
display:block;
}
/* 푸터 영역 CSS */
.footer p{
padding:40px 0;
padding:2.500rem 0;
}
}
/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}
/* 인포메이션 영역 CSS */
.info_section{
order:0;
position:absolute;
top:30px;
top:1.875rem;
right:30px;
right:1.875rem;
z-index:30;
width:auto;
border-bottom:0;
}
.info_list li{
width:auto;
margin-left:15px;
margin-left:0.625rem;
}
.info_list li a{
padding:0;
}
/* 헤더 영역 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;
}
/* 서브 헤더 영역 CSS */
.sub_header_section{
order:2;
}
/* 콘텐츠 영역 CSS */
.content_section{
order:3;
padding:60px;
padding:3.750rem;
}
/* 푸터 영역 CSS */
.footer{
order:4;
}
.footer p{
padding-left:3.125%;
/* 30px ÷ 960px */
text-align:left;
}
}board.css
@charset "utf-8";
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}
#wrap section{
box-sizing:border-box;
}
/* 인포메이션 영역 CSS */
.info_section{
order:1;
width:100%;
background:#2ecc71;
border-bottom:1px solid #39d67c;
}
.info_list{
display:flex;
}
.info_list li{
width:25%;
text-align:center;
}
.info_list li a{
display:block;
padding:15px 0;
padding:0.938rem 0;
}
/* 헤더 영역 CSS */
.header{
display:flex;
order:2;
flex-direction:column;
position:relative;
width:100%;
}
.logo{
order:1;
width:100%;
padding:30px 0;
padding:1.875rem 0;
font-size:1.188em;
font-size:1.188rem;
line-height:21px;
line-height:1.313rem;
text-align:center;
text-transform:uppercase;
background:#2ecc71;
text-shadow:0px 1px 1px #25ab5e;
}
.nav{
order:2;
width:100%;
}
.gnb{
display:none;
}
.gnb li{
display:flex;
background:#2c3e50;
}
.gnb li a{
width:80%;
padding:20px 0;
padding:1.250rem 0;
font-size:0.938em;
font-size:0.938rem;
text-indent:20px;
text-indent:1.250rem;
font-weight:bold;
text-transform:uppercase;
}
.gnb li span{
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:30px;
width:1.875rem;
height:30px;
height:1.875rem;
position:absolute;
top:10px;
top:0.625rem;
right:10px;
right:0.625rem;
text-indent:-9999px;
background:url(../images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer;
}
/* 서브 헤더 영역 CSS */
.sub_header_section{
order:3;
padding:48px 0;
padding:3.000rem 0;
text-align:center;
background:#219af7;
}
.sub_header_section h2{
margin-bottom:12px;
margin-bottom:0.750rem;
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.250rem;
background:#fff;
}
.content_section > div{
margin-top:60px;
margin-top:3.750rem;
}
.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.500rem;
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.250rem;
padding-bottom:8px;
padding-bottom:0.500rem;
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;
}
/* 푸터 영역 CSS */
.footer{
order:5;
width:100%;
background:#474747;
}
.footer p{
padding:20px;
padding:1.250rem;
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;
}
/* 태블릿용 CSS */
@media all and (min-width:768px){
/* 헤더 영역 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:5.000rem;
background:#2ecc71;
}
.gnb{
position:absolute;
top:100%;
right:0;
z-index:20;
width:40.10416666666667%;
/* 308px ÷ 768px */
}
.menu_toggle_btn{
top:50%;
right:30px;
right:1.875rem;
z-index:20;
margin-top:-15px;
margin-top:-0.938rem;
}
/* 콘텐츠 영역 CSS */
.content_section{
padding:40px;
padding:2.500rem;
}
.content_section > div{
margin-top:120px;
margin-top:7.500rem;
}
/* 푸터 영역 CSS */
.footer p{
padding:40px 0;
padding:2.500rem 0;
}
}
/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}
/* 인포메이션 영역 CSS */
.info_section{
order:0;
position:absolute;
top:30px;
top:1.875rem;
right:30px;
right:1.875rem;
z-index:30;
width:auto;
border-bottom:0;
}
.info_list li{
width:auto;
margin-left:15px;
margin-left:0.625rem;
}
.info_list li a{
padding:0;
}
/* 헤더 영역 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;
}
/* 서브 헤더 영역 CSS */
.sub_header_section{
order:2;
}
/* 콘텐츠 영역 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;
}
/* 푸터 영역 CSS */
.footer{
order:4;
}
.footer p{
padding-left:3.125%;
/* 30px ÷ 960px */
text-align:left;
}
}introduce.css
jQuery(function($){
$(".menu_toggle_btn").click(function(){
$('.gnb').stop().slideToggle('fast');
});
});flat.min.js
'Resposive Web' 카테고리의 다른 글
| [4일차] DO IT 반응형 웹 만들기/p247 ~ p336/09 반응형 웹 사이트 준비 작업하기 (0) | 2021.02.16 |
|---|---|
| [2일차] DO IT 반응형 웹 만들기/p96 ~ 200/플렉서블 박스, 실전 반응형 웹 싸이트 만들기 (0) | 2021.02.06 |
| [1일차] DO IT 반응형 웹 만들기/p16 ~p95/ 반응형 웹이란? 가변 그리드, 미디어 쿼리 (0) | 2021.02.05 |
'Resposive Web' Related Articles
more
Comments