네비게이션바의 정보 클릭시 콘텐츠 바꾸기(단 네비게이션 바는 변하지 않음.)
자바스크립트 파일 , css 파일은 외부파일로 경로 명시로 연결
네비게이션 바(고정)
[header.jsp]
<%@page import="java.util.Optional"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%
request.setCharacterEncoding("UTF-8");
Optional<String> opt = Optional.ofNullable(request.getParameter("title"));
String title = opt.orElse("환영합니다");
String contextPath = request.getContextPath();
%>
<title><%=title%></title>
<script src="<%=contextPath%>/resource/js/lib/jquery-3.7.1.min.js"></script>
<script src="<%=contextPath%>/resource/js/header.js?dt=<%=System.currentTimeMillis()%>"></script>
<link rel="stylesheet" href="<%=contextPath%>/resource/css/header.css?dt=<%=System.currentTimeMillis()%>">
<link rel="stylesheet" href="<%=contextPath%>/resource/css/main.css?dt=<%=System.currentTimeMillis()%>">
<link rel="stylesheet" href="<%=contextPath%>/resource/css/footer.css?dt=<%=System.currentTimeMillis()%>">
</head>
<body>
<nav class="gnb">
<div class="logo"></div>
<ul>
<li><a href="main1.jsp">정치</a></li>
<li><a href="main2.jsp">경제</a></li>
<li><a href="main3.jsp">사회</a></li>
</ul>
</nav>컨테츠(변화)
[main1.jsp]
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:include page="header.jsp">
<jsp:param value="정치" name="title"/>
</jsp:include>
<div class="main">
<h1>정치</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque massa id sapien auctor sollicitudin. Nam eu massa tempor, facilisis urna nec, feugiat ante. Maecenas ut felis dictum, hendrerit turpis feugiat, sodales justo. Nam posuere neque pulvinar dui faucibus vulputate. Nulla nec blandit augue. Aenean imperdiet dui fringilla ex sollicitudin, eu viverra eros malesuada. Nullam suscipit lacus in consectetur tempus.
Pellentesque congue nisi ac orci varius, ut lacinia augue dapibus. Quisque faucibus nibh non arcu commodo, id mattis augue consectetur. Sed nec leo sit amet justo imperdiet fermentum. Donec in lorem magna. Sed varius ex vel feugiat lobortis. Phasellus nec aliquam magna. Quisque id ultricies nibh. Duis fringilla, leo non posuere venenatis, lacus enim euismod ex, vel suscipit felis ante id augue.
Donec vehicula nisi id velit aliquam malesuada. Cras eget massa at lectus hendrerit mollis. Cras vehicula ipsum at quam laoreet maximus. Aliquam enim dui, fringilla quis lacinia a, dictum sed enim. In ullamcorper, tellus vel imperdiet pulvinar, ex felis tincidunt elit, vel gravida nibh est ac nunc. Curabitur vel eros vitae quam tristique scelerisque. Cras convallis malesuada felis eu vehicula.
Vivamus sed porta elit. Integer porttitor neque et odio mattis, at viverra mauris congue. Etiam vehicula sit amet nibh eget porta. Quisque rhoncus neque ac nulla consectetur pharetra. Nunc mollis sagittis ipsum in finibus. Donec sit amet lorem quis nisl faucibus ornare. Donec et cursus nulla. Donec neque justo, tristique a pellentesque vel, vehicula a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu sem, hendrerit sed ligula eu, venenatis molestie purus. Sed eget diam lacus. Phasellus vehicula massa non erat fringilla malesuada.
Maecenas porttitor lobortis blandit. Morbi metus massa, tincidunt vel magna vel, auctor tincidunt lectus. Praesent venenatis maximus massa egestas pharetra. Nulla vehicula nisi a orci aliquam consequat. Ut a iaculis ante. Morbi varius vel lorem nec interdum. Praesent neque dolor, consequat in vehicula et, lacinia sed nisi. Phasellus id malesuada nisl, ut volutpat est. Proin enim sapien, varius ornare metus id, euismod sodales orci. Donec fermentum lectus et nunc dignissim, non consequat tortor vehicula.
Quisque lobortis aliquam diam pretium placerat. Phasellus varius nisi vel consectetur lobortis. Aenean nec nunc non quam blandit fermentum sed in erat. Etiam eget luctus nisl, et aliquam libero. Praesent nisi leo, elementum quis lacinia pharetra, ultricies et elit. Suspendisse posuere diam eget purus rutrum, ac vestibulum mi egestas. Maecenas id ex arcu. Proin ornare, massa sed vestibulum fringilla, lectus justo hendrerit ipsum, in tempus tortor tellus ac augue. Sed tempus dignissim pretium. Donec lorem velit, ultrices sagittis mi ac, efficitur placerat ligula. Donec scelerisque quam sed tempor sollicitudin. Donec pulvinar nulla vel malesuada facilisis.
Sed scelerisque mauris in rutrum pellentesque. Duis vel ornare sem, quis malesuada quam. Aliquam erat volutpat. Donec eget enim eu massa sodales porta. Ut id finibus ex. Suspendisse sagittis, ligula eget finibus lacinia, mauris neque rhoncus justo, vitae blandit urna mi sed arcu. Cras venenatis velit id leo maximus, nec efficitur magna dapibus. Aenean iaculis ante in diam auctor, eu viverra magna dapibus. Nunc non elit tincidunt, tincidunt ex a, iaculis tellus. In hac habitasse platea dictumst. Maecenas maximus, magna eget finibus suscipit, mi mauris pellentesque quam, quis vehicula arcu urna id eros. Vestibulum volutpat, ex placerat dapibus mollis, ipsum eros egestas ante, ultrices fringilla nulla nulla at lacus. Cras a nisi venenatis purus auctor tempor nec vel enim.
Mauris interdum ornare ex eu pulvinar. Proin lectus dolor, rhoncus non convallis vitae, tristique faucibus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi non sollicitudin risus, tempor laoreet lorem. In a ligula lorem. Ut sit amet finibus nisi, eu elementum elit. Quisque malesuada justo sed vulputate ullamcorper. Aenean ultricies velit non quam molestie, in viverra arcu porttitor. Ut nunc elit, rutrum id elementum sit amet, rutrum sed tortor. Maecenas tincidunt hendrerit urna quis bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce consequat scelerisque tellus, sit amet imperdiet eros finibus vitae.
Maecenas odio ipsum, consectetur in leo a, ornare rhoncus est. Nunc pulvinar commodo arcu non ullamcorper. Aenean imperdiet magna arcu, sit amet tincidunt lorem convallis nec. Nunc facilisis ipsum eget nibh pulvinar, ut hendrerit tortor facilisis. Curabitur in eros et eros placerat tincidunt. Suspendisse id massa eget ex ullamcorper bibendum eget vel odio. Nulla pellentesque imperdiet vulputate. Phasellus pellentesque, odio eu mattis facilisis, est nibh pellentesque orci, at consectetur velit velit ac ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse elementum quis metus quis varius. Duis eu nisi sed elit convallis auctor.
Aliquam non libero orci. Nullam ut interdum nisl. Ut ultricies sed nisl quis feugiat. Etiam ut neque faucibus, lacinia neque semper, rhoncus est. Nullam purus dolor, condimentum ut odio sit amet, aliquet accumsan dui. Nulla efficitur orci eu neque placerat, egestas accumsan sapien pharetra. Aliquam sit amet magna ullamcorper, viverra erat quis, rutrum quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius ac libero ut pretium. Sed consequat lacus in turpis tincidunt semper. Fusce vulputate, velit eu interdum hendrerit, lacus nulla consequat dolor, et tincidunt ex nulla id dui. Mauris massa nisl, convallis in ligula ut, convallis venenatis sem. Praesent id dolor ut orci auctor tincidunt. Fusce quis posuere sem, eu egestas nunc. Duis eget commodo velit.
</div>
</div>
<%@ include file="footer.jsp" %>[main2.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:include page="header.jsp">
<jsp:param value="경제" name="title"/>
</jsp:include>
<div class="main">
<h1>경제</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque massa id sapien auctor sollicitudin. Nam eu massa tempor, facilisis urna nec, feugiat ante. Maecenas ut felis dictum, hendrerit turpis feugiat, sodales justo. Nam posuere neque pulvinar dui faucibus vulputate. Nulla nec blandit augue. Aenean imperdiet dui fringilla ex sollicitudin, eu viverra eros malesuada. Nullam suscipit lacus in consectetur tempus.
Pellentesque congue nisi ac orci varius, ut lacinia augue dapibus. Quisque faucibus nibh non arcu commodo, id mattis augue consectetur. Sed nec leo sit amet justo imperdiet fermentum. Donec in lorem magna. Sed varius ex vel feugiat lobortis. Phasellus nec aliquam magna. Quisque id ultricies nibh. Duis fringilla, leo non posuere venenatis, lacus enim euismod ex, vel suscipit felis ante id augue.
Donec vehicula nisi id velit aliquam malesuada. Cras eget massa at lectus hendrerit mollis. Cras vehicula ipsum at quam laoreet maximus. Aliquam enim dui, fringilla quis lacinia a, dictum sed enim. In ullamcorper, tellus vel imperdiet pulvinar, ex felis tincidunt elit, vel gravida nibh est ac nunc. Curabitur vel eros vitae quam tristique scelerisque. Cras convallis malesuada felis eu vehicula.
Vivamus sed porta elit. Integer porttitor neque et odio mattis, at viverra mauris congue. Etiam vehicula sit amet nibh eget porta. Quisque rhoncus neque ac nulla consectetur pharetra. Nunc mollis sagittis ipsum in finibus. Donec sit amet lorem quis nisl faucibus ornare. Donec et cursus nulla. Donec neque justo, tristique a pellentesque vel, vehicula a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu sem, hendrerit sed ligula eu, venenatis molestie purus. Sed eget diam lacus. Phasellus vehicula massa non erat fringilla malesuada.
Maecenas porttitor lobortis blandit. Morbi metus massa, tincidunt vel magna vel, auctor tincidunt lectus. Praesent venenatis maximus massa egestas pharetra. Nulla vehicula nisi a orci aliquam consequat. Ut a iaculis ante. Morbi varius vel lorem nec interdum. Praesent neque dolor, consequat in vehicula et, lacinia sed nisi. Phasellus id malesuada nisl, ut volutpat est. Proin enim sapien, varius ornare metus id, euismod sodales orci. Donec fermentum lectus et nunc dignissim, non consequat tortor vehicula.
Quisque lobortis aliquam diam pretium placerat. Phasellus varius nisi vel consectetur lobortis. Aenean nec nunc non quam blandit fermentum sed in erat. Etiam eget luctus nisl, et aliquam libero. Praesent nisi leo, elementum quis lacinia pharetra, ultricies et elit. Suspendisse posuere diam eget purus rutrum, ac vestibulum mi egestas. Maecenas id ex arcu. Proin ornare, massa sed vestibulum fringilla, lectus justo hendrerit ipsum, in tempus tortor tellus ac augue. Sed tempus dignissim pretium. Donec lorem velit, ultrices sagittis mi ac, efficitur placerat ligula. Donec scelerisque quam sed tempor sollicitudin. Donec pulvinar nulla vel malesuada facilisis.
Sed scelerisque mauris in rutrum pellentesque. Duis vel ornare sem, quis malesuada quam. Aliquam erat volutpat. Donec eget enim eu massa sodales porta. Ut id finibus ex. Suspendisse sagittis, ligula eget finibus lacinia, mauris neque rhoncus justo, vitae blandit urna mi sed arcu. Cras venenatis velit id leo maximus, nec efficitur magna dapibus. Aenean iaculis ante in diam auctor, eu viverra magna dapibus. Nunc non elit tincidunt, tincidunt ex a, iaculis tellus. In hac habitasse platea dictumst. Maecenas maximus, magna eget finibus suscipit, mi mauris pellentesque quam, quis vehicula arcu urna id eros. Vestibulum volutpat, ex placerat dapibus mollis, ipsum eros egestas ante, ultrices fringilla nulla nulla at lacus. Cras a nisi venenatis purus auctor tempor nec vel enim.
Mauris interdum ornare ex eu pulvinar. Proin lectus dolor, rhoncus non convallis vitae, tristique faucibus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi non sollicitudin risus, tempor laoreet lorem. In a ligula lorem. Ut sit amet finibus nisi, eu elementum elit. Quisque malesuada justo sed vulputate ullamcorper. Aenean ultricies velit non quam molestie, in viverra arcu porttitor. Ut nunc elit, rutrum id elementum sit amet, rutrum sed tortor. Maecenas tincidunt hendrerit urna quis bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce consequat scelerisque tellus, sit amet imperdiet eros finibus vitae.
Maecenas odio ipsum, consectetur in leo a, ornare rhoncus est. Nunc pulvinar commodo arcu non ullamcorper. Aenean imperdiet magna arcu, sit amet tincidunt lorem convallis nec. Nunc facilisis ipsum eget nibh pulvinar, ut hendrerit tortor facilisis. Curabitur in eros et eros placerat tincidunt. Suspendisse id massa eget ex ullamcorper bibendum eget vel odio. Nulla pellentesque imperdiet vulputate. Phasellus pellentesque, odio eu mattis facilisis, est nibh pellentesque orci, at consectetur velit velit ac ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse elementum quis metus quis varius. Duis eu nisi sed elit convallis auctor.
Aliquam non libero orci. Nullam ut interdum nisl. Ut ultricies sed nisl quis feugiat. Etiam ut neque faucibus, lacinia neque semper, rhoncus est. Nullam purus dolor, condimentum ut odio sit amet, aliquet accumsan dui. Nulla efficitur orci eu neque placerat, egestas accumsan sapien pharetra. Aliquam sit amet magna ullamcorper, viverra erat quis, rutrum quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius ac libero ut pretium. Sed consequat lacus in turpis tincidunt semper. Fusce vulputate, velit eu interdum hendrerit, lacus nulla consequat dolor, et tincidunt ex nulla id dui. Mauris massa nisl, convallis in ligula ut, convallis venenatis sem. Praesent id dolor ut orci auctor tincidunt. Fusce quis posuere sem, eu egestas nunc. Duis eget commodo velit.
</div>
</div>
<%@ include file="footer.jsp" %>[main3.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:include page="header.jsp">
<jsp:param value="사회" name="title"/>
</jsp:include>
<div class="main">
<h1>사회</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque massa id sapien auctor sollicitudin. Nam eu massa tempor, facilisis urna nec, feugiat ante. Maecenas ut felis dictum, hendrerit turpis feugiat, sodales justo. Nam posuere neque pulvinar dui faucibus vulputate. Nulla nec blandit augue. Aenean imperdiet dui fringilla ex sollicitudin, eu viverra eros malesuada. Nullam suscipit lacus in consectetur tempus.
Pellentesque congue nisi ac orci varius, ut lacinia augue dapibus. Quisque faucibus nibh non arcu commodo, id mattis augue consectetur. Sed nec leo sit amet justo imperdiet fermentum. Donec in lorem magna. Sed varius ex vel feugiat lobortis. Phasellus nec aliquam magna. Quisque id ultricies nibh. Duis fringilla, leo non posuere venenatis, lacus enim euismod ex, vel suscipit felis ante id augue.
Donec vehicula nisi id velit aliquam malesuada. Cras eget massa at lectus hendrerit mollis. Cras vehicula ipsum at quam laoreet maximus. Aliquam enim dui, fringilla quis lacinia a, dictum sed enim. In ullamcorper, tellus vel imperdiet pulvinar, ex felis tincidunt elit, vel gravida nibh est ac nunc. Curabitur vel eros vitae quam tristique scelerisque. Cras convallis malesuada felis eu vehicula.
Vivamus sed porta elit. Integer porttitor neque et odio mattis, at viverra mauris congue. Etiam vehicula sit amet nibh eget porta. Quisque rhoncus neque ac nulla consectetur pharetra. Nunc mollis sagittis ipsum in finibus. Donec sit amet lorem quis nisl faucibus ornare. Donec et cursus nulla. Donec neque justo, tristique a pellentesque vel, vehicula a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu sem, hendrerit sed ligula eu, venenatis molestie purus. Sed eget diam lacus. Phasellus vehicula massa non erat fringilla malesuada.
Maecenas porttitor lobortis blandit. Morbi metus massa, tincidunt vel magna vel, auctor tincidunt lectus. Praesent venenatis maximus massa egestas pharetra. Nulla vehicula nisi a orci aliquam consequat. Ut a iaculis ante. Morbi varius vel lorem nec interdum. Praesent neque dolor, consequat in vehicula et, lacinia sed nisi. Phasellus id malesuada nisl, ut volutpat est. Proin enim sapien, varius ornare metus id, euismod sodales orci. Donec fermentum lectus et nunc dignissim, non consequat tortor vehicula.
Quisque lobortis aliquam diam pretium placerat. Phasellus varius nisi vel consectetur lobortis. Aenean nec nunc non quam blandit fermentum sed in erat. Etiam eget luctus nisl, et aliquam libero. Praesent nisi leo, elementum quis lacinia pharetra, ultricies et elit. Suspendisse posuere diam eget purus rutrum, ac vestibulum mi egestas. Maecenas id ex arcu. Proin ornare, massa sed vestibulum fringilla, lectus justo hendrerit ipsum, in tempus tortor tellus ac augue. Sed tempus dignissim pretium. Donec lorem velit, ultrices sagittis mi ac, efficitur placerat ligula. Donec scelerisque quam sed tempor sollicitudin. Donec pulvinar nulla vel malesuada facilisis.
Sed scelerisque mauris in rutrum pellentesque. Duis vel ornare sem, quis malesuada quam. Aliquam erat volutpat. Donec eget enim eu massa sodales porta. Ut id finibus ex. Suspendisse sagittis, ligula eget finibus lacinia, mauris neque rhoncus justo, vitae blandit urna mi sed arcu. Cras venenatis velit id leo maximus, nec efficitur magna dapibus. Aenean iaculis ante in diam auctor, eu viverra magna dapibus. Nunc non elit tincidunt, tincidunt ex a, iaculis tellus. In hac habitasse platea dictumst. Maecenas maximus, magna eget finibus suscipit, mi mauris pellentesque quam, quis vehicula arcu urna id eros. Vestibulum volutpat, ex placerat dapibus mollis, ipsum eros egestas ante, ultrices fringilla nulla nulla at lacus. Cras a nisi venenatis purus auctor tempor nec vel enim.
Mauris interdum ornare ex eu pulvinar. Proin lectus dolor, rhoncus non convallis vitae, tristique faucibus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi non sollicitudin risus, tempor laoreet lorem. In a ligula lorem. Ut sit amet finibus nisi, eu elementum elit. Quisque malesuada justo sed vulputate ullamcorper. Aenean ultricies velit non quam molestie, in viverra arcu porttitor. Ut nunc elit, rutrum id elementum sit amet, rutrum sed tortor. Maecenas tincidunt hendrerit urna quis bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce consequat scelerisque tellus, sit amet imperdiet eros finibus vitae.
Maecenas odio ipsum, consectetur in leo a, ornare rhoncus est. Nunc pulvinar commodo arcu non ullamcorper. Aenean imperdiet magna arcu, sit amet tincidunt lorem convallis nec. Nunc facilisis ipsum eget nibh pulvinar, ut hendrerit tortor facilisis. Curabitur in eros et eros placerat tincidunt. Suspendisse id massa eget ex ullamcorper bibendum eget vel odio. Nulla pellentesque imperdiet vulputate. Phasellus pellentesque, odio eu mattis facilisis, est nibh pellentesque orci, at consectetur velit velit ac ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse elementum quis metus quis varius. Duis eu nisi sed elit convallis auctor.
Aliquam non libero orci. Nullam ut interdum nisl. Ut ultricies sed nisl quis feugiat. Etiam ut neque faucibus, lacinia neque semper, rhoncus est. Nullam purus dolor, condimentum ut odio sit amet, aliquet accumsan dui. Nulla efficitur orci eu neque placerat, egestas accumsan sapien pharetra. Aliquam sit amet magna ullamcorper, viverra erat quis, rutrum quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean varius ac libero ut pretium. Sed consequat lacus in turpis tincidunt semper. Fusce vulputate, velit eu interdum hendrerit, lacus nulla consequat dolor, et tincidunt ex nulla id dui. Mauris massa nisl, convallis in ligula ut, convallis venenatis sem. Praesent id dolor ut orci auctor tincidunt. Fusce quis posuere sem, eu egestas nunc. Duis eget commodo velit.
</div>
</div>
<%@ include file="footer.jsp" %>footer
[footer.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="footer">
<div>
Copyright NAVER
</div>
</div>
</body>
</html>css,js 외부파일
[header.js]
/**
* 본문을 모두 읽은 뒤 JavaScript를 수행할 수 있도록 load 이벤트 처리한다.
* 방법1. window.onload = function(){}
* 방법2. $(document).ready(function(){})
* 방법3. $(function(){})
*/
$(function(){
$('.gnb a').mouseover(function(){
$(this).css('background-color', 'silver');
})
$('.gnb a').mouseout(function(){
$(this).css('background-color', '');
})
var img = new Image();
$(img).attr('src', getContextPath() + '/resource/images/naver.png');
$(img).css('width', '150px');
$('.logo').html(img);
})
// 컨텍스트패스를 반환하는 함수
function getContextPath(){
// location.href === http://localhost:8080/jsp/ex03_layout/main1.jsp
// location.host === localhost:8080
var begin = location.href.indexOf(location.host) + location.host.length;
var end = location.href.indexOf('/', begin + 1);
return location.href.substring(begin, end);
}[main.css]
@charset "UTF-8";
.main {
width: 1200px;
margin: 0 auto;
}
.main h1 {
text-align: center;
}[header.css]
@charset "UTF-8";
body, nav, ul, li {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.gnb {
padding-top: 50px;
border-bottom: 1px solid gray;
}
.gnb .logo {
text-align: center;
padding: 10px 0;
}
.gnb ul {
list-style-type: none;
display: flex;
justify-content: center;
}
.gnb li {
width: 100px;
height: 50px;
}
.gnb a {
display: block;
width: 100%;
height: 100%;
color: gray;
text-align: center;
line-height: 50px;
}
.gnb a:hover {
color: crimson;
}[footer.css]
@charset "UTF-8";
.footer {
margin-top: 20px;
padding: 30px 0;
border-top: 1px solid gray;
text-align: center;
}
졸려요