인프런 커뮤니티 질문&답변
작성한 질문수
내비게이션 배경색 위치
작성
·
273
1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>철길 마을</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="main-content">
<div class="left">
<header>
<div class="header-logo">
<a href="#none"><img src="images/header-logo.png" alt="header logo"></a>
</div>
<div class="navi">
<ul class="menu">
<li>
<a href="#none">철길 마을</a>
<div class="sub-menu">
<a href="#none">마을 소개</a>
<a href="#none">마을의 유래</a>
<a href="#none">볼거리</a>
<a href="#none">찾아오시는 길</a>
</div>
</li>
<li>
<a href="#none">주변 맛집</a>
<div class="sub-menu">
<a href="#none">빵집</a>
<a href="#none">간장게장</a>
<a href="#none">중국음식점</a>
<a href="#none">횟집</a>
</div>
</li>
<li>
<a href="#none">주변 여행지</a>
<div class="sub-menu">
<a href="#none">은파호수공원</a>
<a href="#none">초원사진관</a>
<a href="#none">월명공원</a>
<a href="#none">진포해양공원</a>
</div>
</li>
<li>
<a href="#none">도움마당</a>
<div class="sub-menu">
<a href="#none">교통정보</a>
<a href="#none">주변 주차장</a>
<a href="#none">자료실</a>
<a href="#none">자료마당</a>
</div>
</li>
</ul>
</div>
</header>
</div>
<div class="center">
<div class="items">
<div class="shortcut">
<img class="shortcut-image" src="images/shortcut-01.png" alt="shortcut image">
<div class="shortcut-content">
<h3>얼리버드 선착순 할인 이벤트</h3>
<p>
12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br>
12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br>
기간: 2022년 12월 18일~ 12월 25일
</p>
</div>
<a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a>
</div>
<div class="news">
<div class="tab-inner">
<div class="btn">
<span>공지사항</span>
</div>
<div class="tab1">
<a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a>
<a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a>
<a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a>
<a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a>
<a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a>
</div>
</div>
</div>
<div class="gallery">
<div class="tab-inner">
<div class="btn">
<span>갤러리</span>
</div>
<div class="tab2">
<a href="#none"><img src="images/gallery-01.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a>
<a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a>
</div>
</div>
</div>
<div class="banner">
<a href="#none"><img src="images/banner-01.png" alt="banner1"></a>
<a href="#none"><img src="images/banner-02.png" alt="banner2"></a>
<a href="#none"><img src="images/banner-03.png" alt="banner3"></a>
<a href="#none"><img src="images/banner-04.png" alt="banner4"></a>
</div>
</div>
</div>
<div class="right">
<div class="slide">
<div class="slide-image">
<div class="slide-image-inner">
<a href="#none"><img src="images/slide-e-01.jpg" alt="slide1"></a>
<a href="#none"><img src="images/slide-e-02.jpg" alt="slide2"></a>
<a href="#none"><img src="images/slide-e-03.jpg" alt="slide3"></a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-logo">
<a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a>
</div>
<div class="footer-content">
<div class="footer-link">
<a href="#none">기업소개 제휴 및 입점 문의</a>
<a href="#none">이용약관</a>
<a href="#none">개인정보처리방침</a>
<a href="#none">이메일무단수집거부</a>
<a href="#none">사이트맵</a>
<a href="#none">인재채용</a>
</div>
<div class="copyright">
상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장
사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스
</div>
</div>
<div class="family-site">
<select>
<option value="">패밀리 사이트</option>
<option value="">코딩웍스 커뮤니티</option>
<option value="">코딩웍스 쇼핑몰</option>
<option value="">코딩웍스 재단</option>
</select>
</div>
</footer>
</div>
<div class="modal">
<div class="modal-content">
<h2>스트리밍 서버 이전으로 서비스 장애</h2>
<p>
스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br>
<br>
주요 작업 내용은 아래와 같습니다.<br>
1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br>
2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br>
3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br>
<br>
위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br>
서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다.<br> 정상 운영되도록 최선을 다하겠습니다. 감사합니다.
</p>
<a class="close-modal" href="#none">닫기</a>
</div>
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>
@charset "UTF-8";
body {
margin: 0;
background-color: #fff;
color: #333;
font-size: 15px;
}
a {
color: #333;
text-decoration: none;
}
.container {}
.main-content {
display: flex;
}
.main-content > div {
/* border: 1px solid black; */
/* height: 800px; */
}
.left {
width: 200px;
background-color: rgb(201, 163, 124);
}
.center {
width: 400px;
background-color: ivory;
}
.right {
flex: 1;
}
header {
position: relative;
z-index: 10;
}
header > div {
/* border: 1px solid red; */
}
.header-logo {
height: 100px;
display: flex;
align-items: center;
}
.navi {
height: 400px;
}
/* Navigation */
.menu {
list-style: none;
padding: 0;
width: 90%;
margin: auto;
margin-top: 10px;
}
.menu li {
text-align: center;
position: relative;
}
.menu li > a {
border: 1px solid #000;
display: block;
padding: 5px;
transition: 0.1s;
background-color: beige;
}
.menu li:hover > a {
background-color: lightskyblue;
color: #fff;
}
.sub-menu {
border: 1px solid #000;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 120px;
display: none;
}
.sub-menu a {
display: block;
padding: 5px;
transition: 0.1s;
background-color: lightskyblue;
}
.sub-menu a:hover {
background-color: navy;
color: #fff;
}
.items {}
.items > div {
/* border: 1px solid blue; */
}
.shortcut {
height: 150px;
display: flex;
align-items: center;
box-sizing: border-box;
font-size: 12px;
padding: 5px;
gap: 10px;
}
.shortcut .shortcut-image {
height: 50%;
}
.news {
height: 250px;
}
.gallery {
height: 250px;
}
/* news & gallery */
.tab-inner {
width: 95%;
margin: auto;
margin-top: 25px;
}
.btn {}
.btn span {
border: 1px solid #000;
display: inline-block;
width: 100px;
text-align: center;
padding: 5px;
border-radius: 5px 5px 0 0;
border-bottom: none;
margin-bottom: -1px;
background-color: lightskyblue;
}
.tab1 {
border: 1px solid #000;
height: 170px;
box-sizing: border-box;
padding: 10px 15px;
}
.tab1 a {
display: block;
padding: 5px;
border-bottom: 1px solid #000;
overflow: hidden;
}
.tab1 a:last-child {
border-bottom: none;
}
.tab1 a em {
display: block;
float: left;
font-style: normal;
width: 75%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tab1 a b {
float: right;
font-weight: normal;
}
.tab2 {
border: 1px solid #000;
height: 170px;
text-align: center;
box-sizing: border-box;
padding-top: 17px;
}
.tab2 a {
display: inline-block;
text-align: center;
}
.tab2 a img {
height: 115px;
border-radius: 10px;
}
.tab2 a span {
display: block;
}
.banner {
/* height: 150px; */
display: flex;
align-items: center;
}
.banner a img {
width: 98%;
}
.slide {}
.slide > div {
/* border: 1px solid green; */
}
.slide-image {
height: calc(100vh - 120px);
overflow: hidden;
position: relative;
}
.slide-image-inner {
font-size: 0;
height: inherit;
width: 300%;
position: absolute;
top: 0;
left: 0;
animation: slide 10s linear infinite;
}
.slide-image-inner a {
height: inherit;
display: inline-block;
width: calc(100% / 3);
}
.slide-image-inner a img {
height: inherit;
width: 100%;
object-fit: cover;
}
@keyframes slide {
0% {
left: 0;
}
30% {
left: 0;
}
35% {
left: -100%;
}
65% {
left: -100%;
}
70% {
left: -200%;
}
95% {
left: -200%;
}
100% {
left: 0;
}
}
footer {
display: flex;
height: 120px;
align-items: center;
background-color: rgb(211, 211, 211, 0.3);
}
footer > div {
/* border: 1px solid red; */
}
.footer-logo {
width: 200px;
}
.footer-content {
flex: 1;
}
.footer-content div {
/* border: 1px solid red; */
/* height: 60px; */
padding: 10px 20px;
}
.footer-link {}
.footer-link a {
color: blue;
}
.footer-link a::after {
content: '|';
margin-left: 5px;
}
.footer-link a:last-child::after {
display: none;
}
.footer-link a:hover {
text-decoration: underline;
}
.copyright {}
.family-site {
width: 230px;
text-align: center;
}
.family-site select {
padding: 5px;
border-radius: 3px;
}
/* modal */
.modal {
background-color: #00000077;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.modal-content {
background-color: #fff;
width: 470px;
padding: 30px;
border-radius: 10px;
box-shadow: inset 0 0 10px #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-content h2 {
text-align: center;
}
.close-modal {
float: right;
border: 1px solid #000;
padding: 5px 10px;
}
/* Navigation */
$('.menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
$(this).children('.sub-menu').stop().slideUp()
})
/* modal */
$('.open-modal').click(function(){
$('.modal').fadeIn()
})
$('.close-modal').click(function(){
$('.modal').fadeOut()
}).menu li 에 background-color를 넣어야 하나요?
.menu li > a 에 background-color를 넣어야 하나요?
.sub-menu 에 background-color를 넣어야 하나요?
.sub-menu a 에 background-color를 넣어야 하나요?
그리고 최종점검 부탁드립니다.
