INDIGO
INDIGO의 홈페이지는 크게 헤더와 네비게이션 부분, 슬라이드 이미지화면(구동X),
홈페이지에 대한 section 부분, footer(지도 포함) 부분을 나누어 표현한 홈페이지로
간단한 회사 소개와 연락처 공유, 오는 길 소개를 할 수 있는 홈페이지다.
반응형으로 제작하였으며 float 버전을 flex 버전으로 수정하였다.
INDIGO - FLEX버전 홈페이지 바로가기
수정된 코드
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDIGO</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/default.css">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="apple-touch-icon-precompossed" href="images/favicon/indigo-touch-icon.png">
<script src="js/main.js" defer></script>
</head>
<body>
<div id="wrap">
<header class="header cfixed">
<h1 class="logo"><a href="">INDIGO</a></h1>
<nav>
<ul class="gnb">
<li><a href="">HOME</a></li>
<li><a href="">WE ARE</a></li>
<li><a href="">WORK</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT US</a></li>
</ul>
</nav>
<span class="menu-toggle-btn">
<span></span>
<span></span>
<span></span>
</span>
</header>
<article class="slider">
<img src="images/p-images/slide01.jpg" alt="">
</article>
<section class="content">
<section class="display-section">
<div class="container">
<h2 class="sec-tit">WE ARE</h2>
<p class="desc">Contray to popular belief, Lorem Ipsum is not simply random text. It has roots in a <br> piece of classical Latin literature from 45 BC, making it over 2000years old.</p>
</div>
</section>
<section class="promotion-section">
<div class="container">
<ul class="promo-list">
<li>
<a href="">
<img src="images/s-images/promo01.png" alt="">
<h3>HOME</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industy.</p>
</a>
</li>
<li>
<a href="">
<img src="images/s-images/promo02.png" alt="">
<h3>WE ARE</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industy.</p>
</a>
</li>
<li>
<a href="">
<img src="images/s-images/promo03.png" alt="">
<h3>WORK</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industy.</p>
</a>
</li>
<li>
<a href="">
<img src="images/s-images/promo04.png" alt="">
<h3>BLOG</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industy.</p>
</a>
</li>
</ul>
</div>
</section>
<hr class="divider">
<section class="work-section cfixed">
<div class="container">
<h2 class="sec-tit">WORK</h2>
<ul class="work-list">
<li>
<a href="">
<div class="info">
<h3>Running</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work01.jpg" alt="">
</a>
</li>
<li>
<a href="">
<div class="info">
<h3>Rugby</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work02.jpg" alt="">
</a>
</li>
<li>
<a href="">
<div class="info">
<h3>Weight</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work03.jpg" alt="">
</a>
</li>
<li>
<a href="">
<div class="info">
<h3>Marathon</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work04.jpg" alt="">
</a>
</li>
<li>
<a href="">
<div class="info">
<h3>Boxing</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work05.jpg" alt="">
</a>
</li>
<li>
<a href="">
<div class="info">
<h3>Ice Hockey</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work06.jpg" alt="">
</a>
</li>
<li>
<a href="">
<div class="info">
<h3>Skate Board</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work07.jpg" alt="">
</a>
</li>
<li>
<a href="">
<div class="info">
<h3>Basketball</h3>
<span>WEB/PRINT</span>
</div>
<img src="images/p-images/work08.jpg" alt="">
</a>
</li>
</ul>
</div>
</section>
<hr class="m-divider">
<section class="blog-section">
<div class="container">
<h2 class="sec-tit">BLOG</h2>
<ul class="blog-list">
<li>
<a href=""><img src="images/p-images/blog01.jpg" alt=""></a><time datetime="2016-10-30">OCT 30, 2016</time>
<a href=""><h3>There are many variations of passages of Lorem Ipsum</h3></a>
</li>
<li>
<a href=""><img src="images/p-images/blog02.jpg" alt=""></a><time datetime="2016-10-30">OCT 30, 2016</time>
<a href=""><h3>There are many variations of passages of Lorem Ipsum</h3></a>
</li>
<li>
<a href=""><img src="images/p-images/blog03.jpg" alt=""></a><time datetime="2016-10-30">OCT 30, 2016</time>
<a href=""><h3>There are many variations of passages of Lorem Ipsum</h3></a>
</li>
</ul>
</div>
</section>
<section class="contact-section">
<div class="container">
<h2 class="sec-tit">CONTACT</h2>
<div class="form-box">
<form action="" method="">
<fieldset class="cfixed">
<legend class="blind">CONTACT US</legend>
<div class="form">
<label for="name" class="blind">name</label>
<input type="text" id="name" placeholder="Name">
<label for="phone" class="blind">phone</label>
<input type="tel" id="phone" placeholder="Phone">
<label for="email" class="blind">email</label>
<input type="email" id="email" placeholder="Email Address">
</div>
<div class="textarea">
<label for="message" class="blind">message</label>
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</fieldset>
<div class="send-btn">
<button>SEND MESSAGE</button>
</div>
</form>
</div>
</div>
</section>
</section>
<footer class="footer">
<!-- 구글 지도 홈페이지에서 링크를 가져왔다. -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101249.35369599063!2d126.91092691339621!3d37.53050006856059!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca23c7e313fd3%3A0xa4342ca52af9b117!2z7ISc7Jq47Yq567OE7IucIOyaqeyCsOq1rA!5e0!3m2!1sko!2skr!4v1636882007412!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<p class="copyright">INDIGO</p>
</footer>
</div>
</body>
</html>CSS
/* 모바일용 */
.container {
width: 90%;
max-width: 1132px;
margin: 0 auto;
}
/* 부모요소가 해당요소의 높잇값을 인식하지 못하는 문제가 발생하여 가상 엘리먼트를 이용하여 부모 요소의 마지막 위치값을 알 수 있게 만든다.*/
.cfixed:after,
.container:after {
display: block;
content: "";
clear: both;
}
.blind {
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
overflow: hidden;
}
.sec-tit {
font-size: 42px;
color: #3f51b5;
font-weight: normal;
}
.divider {
width: 90%;
max-width: 1132px;
margin: 0 auto;
margin-top: 77px;
background: #eee;
}
.m-divider {
width: 20px;
margin: 0 auto;
margin-top: 77px;
background: #3f51b5;
}
/* 헤더 영역 */
.header {
position: relative;
padding: 18px 5%;
}
.header .logo {
/* float: left; */
display: flex;
}
.header .logo a {
font-size: 26px;
color: #3f51b5;
font-weight: normal;
}
.header .gnb {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #3f51b5;
}
.header .gnb li {
border-bottom: 1px solid #303f9f;
}
.header .gnb li a {
display: block;
padding: 14px 0 14px 5%;
font-size: 14px;
color: #fff;
}
.header .menu-toggle-btn {
/* float: right; */
position: absolute;
right: 15px;
top: 25px;
width: 20px;
margin-top: 4px;
cursor: pointer;
}
.header .menu-toggle-btn span {
display: flex;
width: 20px;
height: 2px;
background: #3f51b5;
}
.header .menu-toggle-btn span:nth-child(2) {
margin: 5px 0;
}
/* 슬라이더 영역 */
.slider img {
display: flex;
width: 100%;
max-width: 100%;
height: auto;
}
/* 디스플레이 영역 */
.display-section {
margin-top: 59px;
text-align: center;
}
.display-section .sec-tit {
margin-bottom: 30px;
}
.display-section .desc {
font-family: "PT Seriff";
color: #616161;
line-height: 1.9;
}
/* 프로모션 영역 */
.promotion-section {
margin-top: 68px;
}
.promotion-section .promo-list {
margin-top: 52px;
text-align: center;
}
.promotion-section .promo-list:first-child {
margin-top: 0;
}
.promotion-section .promo-list li img {
height: 52px;
}
.promotion-section .promo-list li h3 {
margin: 29px 0 20px 0;
color: #3f51b5;
font-weight: normal;
}
.promotion-section .promo-list li p {
font-size: 14px;
font-family: "PT Serif";
color: #616161;
line-height: 1.5;
}
/* 최근 작업 영역 */
.work-section {
margin-top: 73px;
}
.work-section .sec-tit {
width: 90%;
max-width: 1132px;
margin: 0 auto;
margin-bottom: 47px;
text-align: center;
}
.work-section word-list li {
width: 100%;
}
.work-section .work-list li a {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
filter: grayscale(1);
}
.work-section .work-list li a:before {
display: flex;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: #3f51b5;
content: "";
opacity: 0;
filter: grayscale(1);
transition: all 1s;
}
.work-section .work-list li a:hover {
filter: grayscale(0);
transition: all 2s;
}
.work-section .work-section li .info {
position: absolute;
top: 0;
left: 23px;
z-index: 20;
opacity: 0;
}
.work-section .work-list li a:hover .info {
transition: all 1s;
transform: translateY(50px);
opacity: 1;
}
.work-section .work-list li .info h3 {
margin-bottom: 8px;
font-size: 23px;
color: #fff;
font-weight: normal;
}
.work-section .work-list li .info span {
font-size: 11px;
color: #fff;
}
.work-section .work-list li img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
/* 최근 글 영역 */
.blog-section {
margin-top: 77px;
}
.blog-section .sec-tit {
margin-bottom: 47px;
text-align: center;
}
.blog-section .blog-list li:first-child {
margin-top: 0;
}
.blog-section .blog-list li img {
display: flex;
width: 100%;
max-width: 100%;
height: auto;
}
.blog-section .blog-list li time {
display: flex;
margin: 11px 0 10px 0;
font-size: 11px;
color: #9e9e9e;
}
.blog-section .blog-list li h3 {
color: #424242;
font-weight: normal;
line-height: 1.6;
}
/* 연락처 영역 */
.contact-section {
margin-top: 109px;
}
.contact-section .sec-tit {
margin-bottom: 47px;
text-align: center;
}
.contact-section .form-box .form input {
padding-bottom: 13px;
margin-bottom: 38px;
}
.contact-section .form-box .textarea textarea {
height: 165px;
}
.contact-section .form-box .send-btn {
margin-top: 36px;
text-align: right;
}
.contact-section .form-box .send-btn button {
padding: 15px;
margin: 0;
border: 0;
font-size: 12px;
color: #fff;
background: #3f51b5;
font-family: "Montserrat";
cursor: pointer;
}
/* 푸터 영역 */
.footer {
margin-top: 104px;
}
.footer iframe {
width: 100%;
height: 320px;
}
.footer p {
margin: 21px 0;
color: #3f51b5;
text-align: center;
}
/* --------------------------- */
/* 태블릿용 */
@media all and (min-width: 768px) {
.divider {
margin-top: 124px;
}
.m-divider {
margin-top: 124px;
}
/* 헤더영역 */
.header {
width: 100%;
position: static;
padding: 28px 52px;
display: flex;
}
.logo {
margin-right: 30%;
}
.header .gnb {
display: flex !important;
position: static;
width: 100%;
margin-top: 6px;
background: none;
}
.header .gnb li {
display: flex;
margin-left: 21px;
border-bottom: 0;
}
.header .gnb li a {
color: #3f51b5;
padding: 0;
font-size: 16px;
}
.header .menu-toggle-btn {
display: none !important;
}
/* 디스플레이 영역 */
.display-section {
margin-top: 95px;
}
/* 프로모션 영역 */
.promo-list {
margin-top: 110px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.promotion-section .promo-list li {
width: 20%;
margin-top: 0;
}
.promotion-section .promo-list li:first-child {
margin-left: 0;
}
/* 최근작업 영역 */
.work-section {
margin-top: 118px;
}
.work-section .sec-tit {
margin-bottom: 76px;
}
.work-list {
display: flex;
flex-wrap: wrap;
}
.work-section .work-list li {
width: 50%;
}
.work-section .work-list li .info {
left: 37px;
}
.work-section .work-list li a:hover .info {
transform: translateY(50px);
}
/* 최근 글 영역 */
.blog-section {
margin-top: 124px;
}
.blog-section .sec-tit {
margin-bottom: 76px;
}
.blog-list {
display: flex;
}
.blog-section .blog-list li {
width: 31.59%;
margin-left: 2.604%;
margin-top: 0;
}
.blog-section .blog-list li:first-child {
margin-left: 0;
}
/* 연락처 영역 */
.contact-section {
margin-top: 176px;
}
.contact-section .sec-tit {
margin-bottom: 76px;
}
.cfixed {
display: flex;
}
.contact-section .form-box .form,
.contact-section .form-box .textarea {
width: 48.6979%;
}
.contact-section .form-box .form {
margin-right: 2.36966%;
}
.contact-section .form-box .form input:last-child {
margin-bottom: 0;
}
/* 푸터 영역 */
.footer iframe {
height: 432px;
}
.footer p {
margin: 34px 0;
}
}
/* --------------------- */
/* pc 용 */
@media all and (min-width: 1132px) {
/* 헤더 영역 */
.logo {
margin-right: 50%;
}
/* 디스플레이 영역 */
.display-section {
width: 100%;
}
.display-section .container {
width: 100%;
max-width: 1150px;
text-align: left;
display: flex;
justify-content: flex-start;
}
.display-section .sec-tit {
margin-bottom: 0;
text-align: center;
padding-top: 1%;
width: 42%;
}
.display-section .desc {
position: relative;
padding-left: 20px;
font-family: "PT Serif";
color: #616161;
line-height: 1.9;
}
/* 세로 구분선 만들기 */
.display-section .desc:before {
display: block;
position: absolute;
top: 9px;
left: 0;
width: 2px;
height: 44px;
background: #e0e0e0;
content: "";
}
/* 프로모션 영역 */
.promotion-section .promo-list li {
width: 23.674%;
margin-left: 1.766%;
}
/* 최근 작업 영역 */
.work-section .container {
width: 100%;
max-width: 1500px;
display: flex;
justify-content: space-around;
}
.work-section .sec-tit {
width: 70%;
margin-top: 4%;
margin-left: 5%;
margin-right: 0;
text-align: left;
}
.work-section .work-list li {
width: 25%;
}
/* 최근 글 영역 */
.blog-section .container {
width: 100%;
max-width: 1500px;
display: flex;
justify-content: space-around;
}
.blog-section .sec-tit {
margin-left: 5%;
margin-right: 12%;
}
.blog-section .blog-list li {
width: 50%;
margin-left: 2.369%;
}
/* 연락처 영역 */
.contact-section .container {
width: 100%;
max-width: 1500px;
display: flex;
justify-content: space-around;
}
.contact-section .sec-tit {
margin-left: 5%;
margin-right: 12%;
}
.contact-section .form-box {
width: 74.55%;
}
.contact-section .form-box .form,
.contact-section .form-box .textarea {
width: 48.815%;
}
.contact-section .form-box .form {
margin-right: 2.369%;
}
}
Javascript
기존 자바스크립트 제이쿼리에서 오리지날 자바스크립트로만 코드를 작성하려니 동작을 구현하는 곳에서 많이 애먹었다.
이벤트 DOM을 활용하니 클릭 동작은 1회의 행동만 담을 수 있어서 setInterval로 자동으로 페이지를 닫게 만들었으며 부드럽게 열리는 박스를 구현하기 힘들었다.
const toggle_btn = document.querySelector('.menu-toggle-btn');
const stylesheets = document.styleSheets[1];
let css_rule;
for (let i = 0; i < stylesheets.cssRules.length; i++) {
if(stylesheets.cssRules[i].selectorText === '.header .gnb'){
css_rule = stylesheets.cssRules[i];
}
}
function toggle_action(){
//css_rule.style.setProperty('display', 'block');
css_rule.style.display = 'block';
setInterval(() => {
css_rule.style.display = 'none';
}, 5000);
}
toggle_btn.addEventListener('click',toggle_action)
앞으로 개선할 사항
1. 부드럽게 열리는 드롭다운으로 만들기
먼저 제리쿼리를 사용하지 않고 오리지날 자바스크립트로만 사용하여 부드럽게 열리는 드롭다운을 구현할 것이다.
2. 토글버튼누르면 다시 드롭업 시키기
토글버튼을 다시 누르면 display가 none으로 되면서 반대로 없어지는 이벤트를 만들 것이다.
AllTimeDevelop