1.HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<title>지호오피스</title>
<meta charset="UTF-8" />
<meta name="author" content="김대각" />
<meta name="keywords" content="반응형 웹,웹개발" />
<meta name="description" content="사무 자동화 지원 응용 소프트웨어 개발" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link href="css/common.css" rel = "stylesheet" />
<link href="css/index.css" rel = "stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
<header>
<div class="cen">
<h1>
<a href="index.html">
<img src = "images/header_logo_01.png" alt="지호오피스로고" />
</a>
</h1>
<nav id="lnb">
<ul>
<li class="main">
<a href="#">제품</a>
<ul class="sub">
<li><a href="#">지호오피스</a></li>
<li><a href="#">이지포토</a></li>
<li><a href="#">지호오피스 웹</a></li>
<li><a href="#">오피스 솔루션</a></li>
</ul>
</li>
<li class="main">
<a href="#">구매</a>
<ul class="sub">
<li><a href="#">지호오피스</a></li>
<li><a href="#">추천상품</a></li>
<li><a href="#">기타서비스</a></li>
<li><a href="#">온라인 견적서</a></li>
</ul>
</li>
<li class="main">
<a href="#">고객지원</a>
<ul class="sub">
<li><a href="#">고객지원 안내</a></li>
<li><a href="#">개발자 센터</a></li>
<li><a href="#">자주하는 질문</a></li>
<li><a href="#">다운로드</a></li>
</ul>
</li>
</ul>
</nav>
<nav id="gnb">
<a href="#">로그인</a>
<a href="#">회원가입</a>
<a href="#">주문/배송</a>
<a href="#">장바구니</a>
</nav>
</div>
</header>
<section>
<div id = "mainVisual">
<img class = "slide" src = "images/vis_img_01.jpg" alt = "슬라이더"/>
<img class = "slide" src = "images/vis_img_02.jpg" alt = "슬라이더"/>
<img class = "slide" src = "images/vis_img_03.jpg" alt = "슬라이더"/>
<img class = "slide" src = "images/vis_img_04.jpg" alt = "슬라이더"/>
<div id = "mvBar">
<div>
<a href="#">기능패치 업데이트 <span class="jaju">2022-06-16</span></a>
<a href="#">제품등록</a>
</div>
</div>
<button type="button" id="prev">이전</button>
<button type="button" id="next">이후</button>
</div>
<div id = "icons" class="cen">
<a href="#">
<img src ="images/icon_btn_01.jpg" alt = "다운로드센터" />
<div>다운로드센터</div>
</a>
<a href="#">
<img src ="images/icon_btn_02.jpg" alt = "제품구매" />
<div>제품구매</div>
</a>
<a href="#">
<img src ="images/icon_btn_03.jpg" alt = "자주하는 질문" />
<div>자주하는 질문</div>
</a>
<a href="#">
<img src ="images/icon_btn_04.jpg" alt = "보도자료" />
<div>보도자료</div>
</a>
<a href="#">
<img src ="images/icon_btn_05.jpg" alt = "이벤트참여" />
<div>이벤트참여</div>
</a>
</div>
<div id ="products" class="cen">
<div class="product">
<img class="pro_img" src="images/sub_vis_img_01.jpg" alt=""/>
<div class="pro_txt">
<div class="pro_big">지호넷피스 24</div>
<div class="pro_small">최신 오피스와 클라우드 스토리지까지 통합 클라우드 서비스</div>
<a href="#">자세히 알아보기></a>
</div>
</div>
<div class="product">
<img class="pro_img" src="images/sub_vis_img_02.jpg" alt=""/>
<div class="pro_txt">
<div class="pro_big">지호오피스 2018</div>
<div class="pro_small">스마트한 문서작성을 위한 오피스 프로그램</div>
<a href="#">자세히 알아보기></a>
</div>
</div>
<div class="product">
<img class="pro_img" src="images/sub_vis_img_03.jpg" alt=""/>
<div class="pro_txt">
<div class="pro_big">지호오피스 웹</div>
<div class="pro_small">지호오피스 신속하고 정확한 문서작성을 위한 웹 오피스</div>
<a href="#">자세히 알아보기></a>
</div>
</div>
<div class="product">
<img class="pro_img" src="images/sub_vis_img_04.jpg" alt=""/>
<div class="pro_txt">
<div class="pro_big">지호톡</div>
<div class="pro_small">외국인과 소통하기 위한 자동인식 음성번역 서비스</div>
<a href="#">자세히 알아보기></a>
</div>
</div>
<div class="product">
<img class="pro_img" src="images/sub_vis_img_05.jpg" alt=""/>
<div class="pro_txt">
<div class="pro_big">지호퍼블</div>
<div class="pro_small">나만의 전자책을 만들고 싶을때 독립적인 전자책 플랫폼</div>
<a href="#">자세히 알아보기></a>
</div>
</div>
<div class="product">
<img class="pro_img" src="images/sub_vis_img_06.jpg" alt=""/>
<div class="pro_txt">
<div class="pro_big">지호렉슬</div>
<div class="pro_small">편리한 학습환경에 필요한 디지털 학습 플랫폼</div>
<a href="#">자세히 알아보기></a>
</div>
</div>
<div class="product">
<img class="pro_img" src="images/sub_vis_img_07.jpg" alt=""/>
<div class="pro_txt">
<div class="pro_big">지호 말랑말랑카페</div>
<div class="pro_small">번역채팅과 다양한 사생활 보호서비스를 제공하는 메신저서비스</div>
<a href="#">자세히 알아보기></a>
</div>
</div>
</div>
<script>
$("#products").slick({
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 5000
});
</script>
<div id="board" class="cen">
<div>
<h3>
공지사항
<a class="float-right" href="#">+</a>
</h3>
<ul id="notice">
<li>
<a href="#">
<div class="notice_title">지호오피스 한글,한자변환 기능관련 안내</div>
<div class="notice_date">2022-06-16</div>
</a>
</li>
<li>
<a href="#">
<div class="notice_title">지호오피스 개인정보처리방침</div>
<div class="notice_date">2022-06-17</div>
</a>
</li>
<li>
<a href="#">
<div class="notice_title">지호오피스 멤버쉽 회원혜택</div>
<div class="notice_date">2022-06-21</div>
</a>
</li>
<li>
<a href="#">
<div class="notice_title">지호오피스 비즈니스 패키지 안내</div>
<div class="notice_date">2022-03-16</div>
</a>
</li>
</ul>
</div>
<div>
<h3>
SNS
<span class="float-right sns-btn">
<img class="sns-active" src="images/sns_btn_01.jpg" alt="facebook"/>
<img src="images/sns_btn_02.jpg" alt="instagram"/>
<img src="images/sns_btn_03.jpg" alt="youtube"/>
</span>
</h3>
<div id="sns-cont">
<div>페이스북 소개내용 안녕하세요 지호오피스 입니다 페이스북을 통해 이벤트에 참여해보세요!</div>
<div>인스타그램 소개내용</div>
<div>유튜브 소개내용</div>
</div>
</div>
<div>
<h3>이벤트</h3>
<a href="#">
<img src="images/event_banner_01.jpg" alt="event"/>
</a>
</div>
</div>
</section>
<footer>
<div class="cen">
<div id = "footerTxt">
<div id = "footerLink">
<a href="#">개인정보처리방침</a>
|
<a href="#">전자금융거래</a>
|
<a href="#">이용약관</a>
</div>
<div>
대전광역시 중구 중앙로 137번길 31 (선화동 32-5) | 고객지원 (평일 9시-18시) : 국내고객 042-252-5963<br/>
사업자등록번호 123-12-12345 | 통신판매신고번호 2018-충남대전-1234 | 대표자 : 김대각 <br/>
© 2022 JihoSoft Inc. All rights reserved.
</div>
</div>
<img id = "footerLogo" src = "images/footer_logo_01.png" alt="footerlogo"/>
</div>
</footer>
<script src="script/script.js"></script>
</body>
</html>
2.CSS
@charset "uft-8";
/* 문서에 최상단에 위치하게 할것 */
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
/* 패딩이나 마진을 키우더라도 박스크기가 커지는 걸 막을 수 있다 */
}
body
{
color: #333;
}
a
{
text-decoration: none;
color: #333;
}
table
{
border-collapse: collapse;
}
/* CSS reset */
nav ul
{
list-style-type: none;
}
.cen
{
width: 1000px;
margin: auto;
}
header
{
height: 80px;
background-color: white;
box-shadow: 0 2px 7px rgba(0,0,0,0.3);
z-index: 10000;
}
h1
{
float: left;
margin-top: 16px;
margin-right: 30px;
}
h3
{
font-size: 1.15em;
letter-spacing: -0.08em;
margin-bottom: 0.8em;
}
#mainVisual{
position: relative;
height: 500px;
overflow: hidden;
}
.slide{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: none;
}
.slide:first-of-type{
display: block;
}
#lnb
{
float: left;
}
.main
{
float: left;
}
.main:hover .sub
{
display: block;
}
.main>a
{
font-weight: bold;
font-size: 1.1em;
display: block;
height: 80px;
text-align: center;
line-height: 80px;
padding: 0 20px;
}
.main>a:hover
{
color: blueviolet;
}
.sub
{
display: none;
background-color: #555;
position: absolute;
width: 100%;
left: 0;
text-align: center;
z-index: 10000;
}
.sub li
{
display: inline;
}
.sub a
{
color: white;
font-weight: bold;
display: inline-block;
padding: 1em 1em;
}
.sub a:hover
{
color: #E08CFF;
}
#gnb
{
float: right;
margin-top: 30px;
}
#gnb a
{
color: #666;
font-size: 0.8em;
padding-left: 0.6em;
padding-right: 0.4em;
position: relative;
}
#gnb a::after
{
content: "";
display: block;
width: 1px;
height: 0.9em;
background-color: #666;
margin-right: -0.4em;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#gnb a:last-of-type::after
{
content: none;
}
.jaju{
color: #E02CFF;
}
.float-right{
float: right;
}
footer{
margin-top: 40px;
background-color: #f7f7f7;
border-top: 1px solid #eee;
overflow: auto;
padding-top: 30px;
padding-bottom: 65px;
}
#footerTxt{
float: left;
font-size: 0.9em;
color: #777;
}
#footerLink{
margin-bottom: 28px;
font-size: 0.9em;
}
#footerLogo{
float: right;
}
#mvBar
{
position: absolute;
background-color: rgba(0,0,0,0.1);
bottom: 0;
width: 100%;
padding-top: 12px;
padding-bottom: 12px;
}
#mvBar>div{
width: 500px;
margin: auto;
}
#mvBar a
{
display: block;
width: 250px;
height: 50px;
background-color: white;
text-align: center;
line-height: 50px;
font-size: 0.9em;
font-weight: bold;
color: #696969;
float: left;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
#mvBar a:first-of-type{
border-right: 1px solid #AAA;
border-radius: 4px 0 0 4px;
}
#mvBar a:last-of-type{
border-radius: 0 4px 4px 0;
}
#prev, #next{
position: absolute;
width: 60px;
height: 40px;
bottom: 16px;
}
#prev{
right: 80px;
}
#next{
right: 20px;
}
#icons{
margin-top: 30px;
margin-bottom: 30px;
overflow: auto;
}
#icons>a{
display: block;
float: left;
width: 20%;
padding-top: 30px;
padding-bottom: 20px;
text-align: center;
}
.product{
border: 1px solid #ccc;
margin: 7px;
}
.pro_img{
width: 100%;
}
.pro_txt{
padding: 20px 30px;
}
.pro_big{
font-size: 1.6em;
margin-bottom: 0.5em;
}
.pro_small{
font-size: 0.95em;
margin-bottom: 1em;
}
.pro_txt a{
color: rgb(202, 49, 169);
}
.slick-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 60px;
height: 60px;
background-image: url(../images/btn_arrow.png);
background-color: transparent;
border: none;
font-size: 0;
}
.slick-prev{
left: -50px;
transform: rotate(180deg);
}
.slick-next{right: -50px;}
#board{
overflow: auto;
margin-top: 30px;
margin-bottom: 30px;
}
#board>div{
float: left;
width: calc((100% - 42px) / 3);
margin: 7px;
}
#notice, #sns-cont{
font-size: 0.9em;
}
#notice{
list-style-type: none;
}
#notice a{
display: block;
overflow: auto;
line-height: 2em;
}
.notice_title{
float: left;
width: calc(100% - 90px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notice_date{
float: left;
width: 90px;
text-align: right;
}
.sns-btn img{
opacity: 0.5;
cursor: pointer;
}
.sns-btn .sns-active{
opacity: 1;
}
#sns-cont>div{
display: none;
line-height: 2em;
}
#sns-cont>div:first-of-type{
display: block;
}
3.Javascript
var now = 0;
var num = $(".slide").length;
function nextSlide(){
now++;
if(now >= num){
now = 0;
}
$(".slide").fadeOut();
$(".slide").eq(now).fadeIn();
}
function prevSlide(){
now--;
if(0 > now){
now = num-1;
}
$(".slide").fadeOut();
$(".slide").eq(now).fadeIn();
}
// setInterval(nextSlide,3000);
$("#next").click(function(){
nextSlide();
});
$("#prev").click(function(){
prevSlide();
});
'HTML,CSS,Javascript' 카테고리의 다른 글
| HTML,CSS 로그인페이지 프로토타입 (0) | 2022.05.31 |
|---|---|
| HTML - 입사지원 페이지 (0) | 2022.05.18 |
댓글