HTML+CSS YeinArt ver1.0

이강민·2021년 11월 22일

HTML+CSS

목록 보기
19/28
post-thumbnail

yeinart

미술품 운반 업체 예인아트의 사이트를 flex와 반응형으로 제작하였다.
본 사이트는 정규 사이트가 아니며 정규사이트의 링크는 다음과 같다.
예인아트

yeinart 사이트

현재 정식사이트는 제작시기가 오래된 점으로 보아 반응형으로 제작되지 않았으나 div box형태로 정렬이 잘 된 사이트이다.
다만, 인터페이스가 사용자에게 어떤 일을 하는 지 한눈에 보이지 않는다는 점과 사용자가 사이트를 찾는 목적에 부합하기보다 회사의 소개와 하는 일, 업적에 더 많은 비중이 보이는 것으로 보인다.

예를 들어 사이트에서 사용자가 원하는 모습만 인터페이스에 잘 녹여놓아도 언어가 다른 환경에서도 쉽게 접근 할 수 있다는 장점이 있다.
쉽게 사용할 수 있는 사이트의 예

또한 회사를 알리기 위한 목적이라면 눈이가는 디자인으로 회사를 소개할 필요가 있다.
이는 중앙그룹 홈페이지가 우수하게 표현하였으며 모바일, 태블릿, pc환경에서 잘 동작한다.
디자인으로 사용자의 가독성을 높이 예

yeinart ver1.0 사이트 제작 목적

이 사이트를 만드는 목적은 상업용이 아닌 순수하게 교육과 자기계발에 목적으로 한다.
지금까지 배운 html, css과 더불어 가능한 javascript를 활용하여 제작하였다.

  • 인터페이스의 구조는 동일하게 사용하며 디자인만 바꾼 형태로 만든다.
  • 실제 동작(로그인, 회원가입, 기타 서브페이지, 사진올리기) 등은 ver1.0에서 다루지 않는다.
  • javascript를 활용한 홈페이지 제작은 지금 배우는 중인 프론트엔드 수업에 맞추어서 적용한다.

yeinart 사이트 제작 최종 목표

이 사이트를 제작하는데에 있어 최종목표는 사용자 중심의 인터페이스 구조와 반응형 웹페이지로써 모바일 환경에서의 구동, 더불어 실시간 견적 서비스 제공까지 제작하는데 최종 목표를 둔다.

최종 목표까지 제작기간

먼저 ver을 나누어 만들어 보기는 하지만 사이트를 만드는데에 경험 부족으로 인하여 코드를 초기화 하여 다시 작성할 수 있다는 것에 유의하여 수개월 이상 기간이 걸릴 것으로 판단 된다.
교육의 목적에 맞게 각 ver의 목적에 달성하면 블로그에 오픈소스로 공개할 예정이다.

yeinart 1.0 code

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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Karla:wght@200&display=swap" rel="stylesheet">
    <title>예인아트</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/main.js" defer></script>
</head>
<body>
    <!-- 스킵헤드부분 -->
    <div id="skip_to">
        <h1 id="skip_to_h1">예인아트</h1>
        <div id="skip_to_container"><a href="#container">본문 바로가기</a></div>
    </div>
    <!-- 스킵헤드끝 -->
    <!-- 헤더부분시작 -->
    <div id="wrap">

    <header>
        <div class="hd_box">
            <div id="logo">
                <a href="index.html"><p>Yein Art</p><br><p>For Your Art</p></a>
            </div>
            <ul id="tnb">
                <li><a href="index.html">home</a></li>
                <li><a href="index.html">login</a></li>
                <li><a href="index.html">join</a></li>
            </ul>
            <!-- 상단 메뉴바 -->
            <div id="topmenu">
                <nav id="gnb">
                    <h2>메인메뉴</h2>
                    <ul class="gnb_1d">
                        <!-- 회사소개 -->
                        <li class="gnb_1dli intro" id="intro">
                            <p>회사소개</p>
                            <div class="gnb_2d gnb_2d_1" id="intro_div">
                                <ul class="submenu_list" id="intro_submenu">
                                    <li class="gnb_2dli"><a href="#">인사말</a></li>
                                    <li class="gnb_2dli"><a href="#">주요취급전시이력</a></li>
                                    <li class="gnb_2dli"><a href="#">찾아오시는 길</a></li>
                                </ul>                    
                            </div>
                        </li>
                        <li class="gnb_1dli tasking" id="tasking">
                            <p>주요업무</p>
                            <div class="gnb_2d gnb_2d_2" id="tasking_div">
                                <ul class="submenu_list" id="tasking_submenu">
                                    <li class="gnb_2dli"><a href="#">작품포장운송설치</a></li>
                                </ul>                    
                            </div>
                        </li>
                        <li class="gnb_1dli question" id="quest">
                            <p>운송의뢰·문의</p>
                            <div class="gnb_2d gnb_2d_3">
                                <ul class="submenu_list" id="quest_submenu">
                                    <li class="gnb_2dli"><a href="">운송의뢰 및 문의</a></li>
                                </ul>                    
                            </div>
                        </li>
                        <li class="gnb_1dli community" id="commu">
                            <p>커뮤니티</p>
                            <div class="gnb_2d gnb_2d_4">
                                <ul class="submenu_list" id="commu_submenu">
                                    <li class="gnb_2dli"><a href="">공지사항</a></li>
                                    <li class="gnb_2dli"><a href="">갤러리</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!-- 헤더부분끝 -->
    <!-- 본문부분시작 -->
    <div id="container" class="">
        <div class="sidemenu_1">
            <div class="sidemenu_1_1">
                <div class="sidemenu_1_1_1">
                    <img src="images/phone.png" alt="">
                </div>
                <div class="sidemenu_1_1_2">
                    <p>문의 전화</p>
                    <span><a href="tel:(02)764-3931">(02)764-3931</a> </span><br>
                    <span><a href="tel:010-3725-2211">010-3725-2211</a> </span>
                </div>
            </div>
            <div class="sidemenu_1_2">
                <div class="sidemenu_1_2_1">
                    <img src="images/campain.png" alt="">
                </div>
                <div class="sidemenu_1_2_2">
                    <p>공지 사항</p>
                    <span>CROSS 과학자와 예술가…</span><br>
                    <span>2021부산국제사진전</span><br>
                    <span>금호갤러리창작스튜디오입주작… </span><br>
                    <span>비대면시대에 작품운송, 설치… </span><br>
                </div>
            </div>
        </div>
        <div class="slide_menu">
            <div>실시 업무</div>
        </div>
        <div class="sidemenu_2">
            <div>
                <p><span>예인아트는</span><br>
                다양한 작품의 포장과 설치, <br>전문 물류 서비스를 통해 <br>고객만족을 <br>약속드립니다. </p>
            
            </div>
            <div class="sidemenu_3">
                <img src="images/transe.png" alt="">
                <p>운송의뢰 & 문의</p><br>
                <span>외뢰드립니다.</span><br>
                <span>배송 문의</span><br>
                <span>미술품 운반 문의</span><br>
                <span>외뢰드립니다.</span><br>
            </div>
        </div>
        <div class="sns_list">
            <div>
                <ul>
                    <li><a href="https://www.facebook.com/YeinArt22"><img src="/images/ico_face.png" alt=""></a></li>
                    <li><a href="https://blog.naver.com/speedkim22"><img src="/images/ico_naver.png" alt=""></a></li>
                    <li><a href="https://www.kakaocorp.com/page/service/service/KakaoTalk?lang=KOR"><img src="/images/ico_kakao.png" alt=""></a></li>
                </ul>
            </div>
        </div>
        <div class="mini_gallery">
            <div></div>
            <div></div>
        </div>
        <div class="info">
            <div></div>
            <div></div>
        </div>
        <div class="coperation">
            <div>
                <ul class="coperation_list">
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 본문부분끝 -->
    <!-- 푸터부분시작 -->
    <footer class="footer">
        <div class="foot_info">
            <ul class="foot_info_list">
                <li><a href=""><p>예인아트 소개</p></a></li>
                <li><a href=""><p>이용약관</p></a></li>
                <li><a href=""><p>개인정보취급방침</p></a></li>
                <li><a href=""><p>고객상담</p></a></li>
                <li><a href=""><p>찾아오시는 길</p></a></li>
            </ul>
        </div>
        <div class="company_info">
            <ul class="company_info_list">
                <li>상호 : 예인아트</li>
                <li>사업자등록번호 : 123-02-215632</li>
                <li>대표 : 김영수</li>
                <li>서울특별시 성북구 성북로4길 52 스카이프라자 상가 동관 631호</li>
            </ul>
        </div>
        <div class="number">
            <ul class="number_list">
                <li>전화 : </li>
                <li><a href="tel:02-764-3931"><p> (02)764-3931</p></a></li>
                <li><a href="tel:010-3725-2211"><p>010-3725-2211</p></a></li>
            </ul>
        </div>
        <div class="copyright">
            <ul class="copyright_list">
                <li>Copyright ⓒ YEINART.co.kr. ALL RIGHT RESERVED.</li>
                <li>E-mail : yeinart22@naver.com</li>
            </ul>
        </div>
    </footer>
</div>
    <!-- 푸터부분끝 -->
</body>
</html>

css

/* common 요소 */
@font-face {
  font-family: "EliceDigitalBaeum_Bold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/EliceDigitalBaeum_Bold.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "EliceDigitalBaeum_Bold";
  font-size: 16px;
  height: 100%;
  color: #444;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1;
}
* {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: inherit;
}
ul,
ol,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
label,
input,
button,
select,
img {
  vertical-align: middle;
}
#skip_to {
  position: absolute;
  left: 0;
  top: -50px;
  width: 100%;
  text-indent: -9999px;
  font-size: 0;
  z-index: 999;
}
#skip_to > div > a:focus,
#skip_to > div > a:active {
  position: absolute;
  left: 0;
  top: 50px;
  display: block;
  width: 98%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  text-indent: 0px;
  font-size: 1.5rem;
  font-weight: bold;
  background-color: rgba(18, 15, 15, 0.5);
}

/* 헤더부분 */
header {
  background-color: #f7f7f7;
  border-bottom: 1px solid #cfcec8;
  transition: all 1s;
}
header .hd_box {
  transition: all 1s;
  width: 88%;
  height: 145px;
  margin: 0 auto;
  padding: 30px 0 20px 0;
}
.hd_box #logo a {
  position: absolute;
  top: 10%;
  float: left;
}
.hd_box #logo a p:first-child {
  font-family: "Abril Fatface", cursive;
  font-size: 3rem;
  text-align: center;
  color: black;
}
.hd_box #logo a p:last-child {
  font-family: "Karla", sans-serif;
  border-bottom: 1px solid black;
  font-size: 1rem;
  text-align: center;
  color: black;
}
.hd_box #tnb {
  position: absolute;
  font-family: "Shippori Antique B1", sans-serif;
  top: 30px;
  right: 10%;
}
.hd_box #tnb li {
  display: inline;
}
.hd_box #tnb li a {
  color: #94938d;
  text-align: center;
  font-variant: small-caps;
}
.hd_box #tnb li:first-child a::after,
.hd_box #tnb li:nth-child(2) a::after {
  content: "|";
  padding: 0.4rem;
  font-size: 0.8rem;
}
/* 상단메뉴바 */
#topmenu {
  float: right;
  position: relative;
  top: 2rem;
}
#topmenu #gnb h2 {
  text-indent: -9999px;
}

#topmenu #gnb .gnb_1d li {
  float: left;
}
#topmenu #gnb .gnb_1dli > p {
  border-bottom: 3px solid black;
  display: block;
  padding: 1.5rem 4rem 0.9rem 0;
  font-size: 1.5rem;
  color: #444;
  cursor: pointer;
}
#topmenu #gnb .gnb_1dli:last-child > p {
  padding-right: 0;
}
.gnb_2d {
  position: absolute;
  left: 0;
  top: 6rem;
  width: 100%;
  z-index: 100;
}
/* 회사소개 버튼 동작 */
.gnb_2d_1 .submenu_list {
  display: none;
  text-decoration: none;
}
.gnb_2d_1 .show {
  margin: 0 auto;
  text-align: left;
  position: absolute;
  left: -10px;
  top: 0;
}
.gnb_2d_1 .show li a {
  color: #000;
  padding: 20px;
  font-size: 1rem;
  color: #444;
}

/* 주요업무 버튼 동작 */
.gnb_2d_2 .submenu_list {
  display: none;
  text-decoration: none;
}

.gnb_2d_2 .show {
  margin: 0 auto;
  text-align: left;
  position: absolute;
  left: 135px;
  top: 0;
}
.gnb_2d_2 .show li a {
  color: #000;
  text-decoration: none;
  padding: 10px;
  font-size: 1rem;
  color: #444;
}
/* 운송의뢰 버튼 동작 */

.gnb_2d_3 .submenu_list {
  display: none;
  text-decoration: none;
}
.gnb_2d_3 .show {
  margin: 0 auto;
  text-align: left;
  position: absolute;
  left: 300px;
  top: 0;
  z-index: 0;
}
.gnb_2d_3 .show li a {
  color: #000;
  text-decoration: none;
  padding: 10px;
  font-size: 1rem;
  color: #444;
}

/* 커뮤니티 동작 */
.gnb_2d_4 .submenu_list {
  display: none;
  text-decoration: none;
}

.gnb_2d_4 .show {
  margin: 0 auto;
  text-align: left;
  position: absolute;
  left: 450px;
  top: 0;
}
.gnb_2d_4 .show li a {
  color: #000;
  text-decoration: none;
  padding: 10px;
  font-size: 1rem;
  color: #444;
}
/* 본문 시작 */

#container {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  margin: 0 auto;
}
#container .sidemenu_1 {
  width: 20%;
}

#container .sidemenu_1 .sidemenu_1_1 {
  display: block;
  height: 200px;
  border-bottom: 1px solid #d4d7dc;
  background-color: #43655a;
}
#container .sidemenu_1 .sidemenu_1_1 .sidemenu_1_1_1 {
  width: 20%;
  float: left;
}
#container .sidemenu_1 .sidemenu_1_1 .sidemenu_1_1_2 {
  width: 80%;
  font-size: 120%;
  line-height: 3;
  float: left;
  color: #fff;
}
#container .sidemenu_1 .sidemenu_1_1 .sidemenu_1_1_2 p {
  margin-left: 20px;
}
#container .sidemenu_1 .sidemenu_1_1 .sidemenu_1_1_2 span a {
  margin-left: -25px;
  text-decoration: none;
  color: #fff;
}

#container .sidemenu_1 .sidemenu_1_2 {
  width: 100%;
  display: inline-block;
  height: 200px;
  background-color: #43655a;
}
#container .sidemenu_1 .sidemenu_1_2 .sidemenu_1_2_1 img {
  float: left;
}
#container .sidemenu_1 .sidemenu_1_2 .sidemenu_1_2_2 p {
  width: 80%;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 16px;
  color: #fff;
}

#container .sidemenu_1 .sidemenu_1_2 .sidemenu_1_2_2 span {
  color: #fff;
  line-height: 2;
  font-size: 0.84rem;
  margin-left: 10px;
}

#container .slide_menu {
  width: 60%;
}
#container .slide_menu div {
  background: url("../images/bg3.jpeg") no-repeat;
  background-size: cover;
  text-indent: -9999px;
  height: 402px;
}
#container .sidemenu_2 {
  width: 20%;
  background-color: #608180;
  display: block;
}
#container .sidemenu_2 div {
  width: 100%;
  height: 190px;
}
#container .sidemenu_2 div:first-child {
  border-bottom: 1px solid #d4d7dc;
}
#container .sidemenu_2 div p {
  line-height: 2;
  text-align: center;
  color: #fff;
  height: auto;
}
#container .sidemenu_2 div p span {
  height: auto;
  font-size: 1.5rem;
}
#container .sidemenu_2 .sidemenu_3 img {
  float: left;
}
#container .sidemenu_2 .sidemenu_3 p {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 15px;
  color: #fff;
}
#container .sidemenu_2 .sidemenu_3 span {
  color: #ccc;
  line-height: 2;
  font-size: 0.84rem;
  cursor: pointer;
  margin-left: 50px;
}

#container .sns_list {
  width: 20%;
}
#container .sns_list li {
  display: block;
  border: 1px #cfcec8;
  border-style: dashed;
  height: 100px;
}
#container .sns_list li:first-child a img {
  margin: 5% 0 10% 33%;
}
#container .sns_list li:nth-child(2) a img {
  margin: 5% 0 10% 33%;
}
#container .sns_list li:last-child a img {
  margin: 5% 0 10% 33%;
}
#container .mini_gallery {
  display: flex;
  height: 304px;
  background-color: #608180;
  width: 40%;
}
#container .mini_gallery div {
  display: flex;
  width: 50%;
  height: 100%;
  background: url(/images/bg1.jpeg) no-repeat center;
  border: 2px solid #fff;
  background-size: cover;
}
#container .mini_gallery div:last-child {
  background: url(/images/bg4.jpeg) no-repeat center;
  background-size: cover;
}

#container .info {
  display: block;
  height: 150px;
  width: 20%;
}
#container .info div {
  width: 100%;
  height: 100%;
  background: url(/images/history3.jpg) no-repeat center;
  border: 2px solid #fff;
  background-size: cover;
}
#container .info div:last-child {
  background: url(/images/history2.jpg) no-repeat center;
  background-size: cover;
}

#container .coperation {
  width: 20%;
}

#container .coperation div .coperation_list li:first-child {
  display: block;
  background: url(/images/logo.gif) no-repeat center;
  height: 152px;
  border-bottom: 4px solid #b2ae96;
}
#container .coperation div .coperation_list li:last-child {
  display: block;
  height: 152px;
  background: url(/images/net2.gif) no-repeat center;
}
/* 본문 끝 */
/* 푸터부분 */
.footer {
  display: flex;
  flex-wrap: wrap;
}
.footer .foot_info {
  width: 100%;
  background-color: #3a3a3a;
  padding: 5px 15px;
}
.foot_info .foot_info_list li a p {
  float: left;
  margin: 10px 5px;
  color: #fff;
}
.foot_info .foot_info_list li a p::after {
  content: "|";
  margin-left: 20px;
  color: #fff;
}
.foot_info .foot_info_list li:first-child a p {
  margin-left: 30%;
}
.foot_info .foot_info_list li:last-child a p::after {
  content: "";
}
.footer .company_info,
.footer .number,
.copyright {
  width: 100%;
}
.footer .company_info .company_info_list li,
.footer .number .number_list li,
.footer .copyright .copyright_list li {
  float: left;
  margin: 4px;
  font-size: 0.8rem;
}
.footer .company_info .company_info_list li:first-child,
.footer .number .number_list li:first-child {
  margin-left: 24%;
  font-size: 0.9rem;
}
.footer .company_info .company_info_list li::after,
.footer .number .number_list li:nth-child(2) p::after,
.footer .copyright .copyright_list li:first-child::after {
  content: "|";
  margin-left: 10px;
  color: #000;
}
.footer .company_info li:last-child::after {
  content: "";
}
.footer .copyright .copyright_list li:first-child {
  margin-left: 24%;
}
/* 푸터 끝 */

/* 테블릿 버전 */
@media all and (min-width: 500px) and (max-width: 930px) {
  /* 헤더부분 수정 */
  .hd_box #logo a > p:first-child,
  .hd_box #logo a > p:last-child {
    color: #f7f2cb;
  }
  .hd_box #logo a > p:last-child {
    border-bottom: 1px solid #f7f2cb;
  }

  header {
    background-color: #67766e;
    border-bottom: 1px solid #3c585f;
    transition: all 1s;
  }
  header .hd_box {
    transition: all 1s;
    height: 200px;
  }
  .hd_box #tnb li a {
    color: #f7f2cb;
  }
  #topmenu {
    position: absolute;
    top: 10rem;
    left: 2rem;
    transition: all 1s;
  }
  #topmenu #gnb .gnb_1dli > p {
    border-bottom: none;
    display: block;
    padding: 1.5rem 2rem 0.9rem 0;
    font-size: 1.5rem;
    color: #f7f2cb;
  }
  .gnb_2d_3 .show {
    left: 250px;
  }
  .gnb_2d_4 .show {
    left: 350px;
  }
  /* 이벤트 리스너 동작 */
  #container.show {
    position: relative;
    top: 30px;
  }
  /* 헤더부분 수정 끝*/
  /* 본문 시작 */
  #container .sidemenu_1 {
    width: 30%;
  }
  #container .slide_menu {
    width: 70%;
  }
  #container .sidemenu_2 {
    width: 100%;
  }
  #container .sidemenu_2 div {
    height: 100px;
  }
  #container .sidemenu_2 div:first-child {
    display: none;
  }

  #container .mini_gallery,
  #container .info,
  #container .coperation {
    display: none;
  }
  #container .sns_list {
    width: 100%;
  }
  #container .sns_list div ul li {
    float: left;
    margin: 0 5.5%;
    width: 20%;
    height: 100px;
  }
  #container .sns_list li {
    border: none;
  }
  /* 본문 끝 */
  /* 푸터부분 시작 */
  .foot_info .foot_info_list li a p {
    font-size: small;
  }
  .foot_info .foot_info_list li:first-child a p {
    margin-left: 0;
  }
  .footer .company_info .company_info_list li,
  .footer .number .number_list li,
  .footer .copyright .copyright_list li {
    font-size: 0.5rem;
  }
  .footer .company_info .company_info_list li:first-child,
  .footer .number .number_list li:first-child {
    margin-left: 0;
    font-size: 0.5rem;
  }
  .footer .copyright .copyright_list li:first-child {
    margin-left: 0;
  }
  /* 푸터부분 끝 */
}

/* 모바일 버전 */
/* 간단한 단어를 클릭하면 해당되는 옵션만 보여주기 */
@media all and (min-width: 100px) and (max-width: 550px) {
  /* 헤더부분 수정(미완) */
  .hd_box #logo a > p:first-child,
  .hd_box #logo a > p:last-child {
    color: #b2ae96;
  }
  .hd_box #logo a > p:last-child {
    border-bottom: 1px solid #b2ae96;
  }

  .hd_box #tnb {
    position: absolute;
    font-family: "Shippori Antique B1", sans-serif;
    top: 20px;
    right: 10%;
  }
  header {
    background-color: #272621;
    border-bottom: 1px solid #3c585f;
    transition: all 1s;
  }
  header .hd_box {
    transition: all 1s;
    height: 400px;
  }
  .hd_box #tnb li a {
    color: #b2ae96;
  }
  #topmenu {
    position: absolute;
    top: 10rem;
    left: 2rem;
    transition: all 1s;
  }
  #topmenu #gnb .intro > p,
  #topmenu #gnb .tasking > p,
  #topmenu #gnb .question > p,
  #topmenu #gnb .community > p {
    transition: all 1s;
    border-bottom: none;
    display: block;
    width: 500px;
    font-size: 1.5rem;
    color: #b2ae96;
    transition: all 1s;
  }
  #topmenu #gnb .question > p {
    padding-right: 0;
  }

  /* 헤더부분 수정 끝*/
  /* 본문 시작 */
  #container .sidemenu_2,
  #container .slide_menu,
  #container .mini_gallery,
  #container .sidemenu_1,
  #container .info,
  #container .coperation {
    display: none;
  }
  #container .sns_list {
    width: 100%;
    position: relative;
  }
  #container .sns_list div ul li {
    margin: 5.5% 5.5%;
    height: 80px;
    width: 20%;
    float: left;
  }
  #container .sns_list li {
    border: none;
  }

  /* 본문 끝 */
  /* 푸터부분 시작 */
  .foot_info .foot_info_list li a p {
    font-size: 0.7rem;
  }
  .foot_info .foot_info_list li:nth-child(2) a p {
    margin-left: 15%;
  }
  .foot_info .foot_info_list li:first-child a p,
  .foot_info .foot_info_list li:last-child a p,
  .foot_info .foot_info_list li:nth-child(4) a p::after {
    display: none;
    content: "";
  }
  .footer .company_info .company_info_list li,
  .footer .number .number_list li,
  .footer .copyright .copyright_list li {
    font-size: 0.5rem;
  }
  .footer .company_info .company_info_list li:first-child,
  .footer .number .number_list li:first-child {
    margin-left: 0;
    font-size: 0.5rem;
  }
  .footer .copyright .copyright_list li:first-child {
    margin-left: 0;
  }
  .footer .company_info .company_info_list li:last-child,
  .footer .company_info .company_info_list li:nth-child(3)::after,
  .footer .copyright .copyright_list li:first-child::after,
  .footer .copyright .copyright_list li:last-child {
    display: none;
  }

  /* 푸터부분 끝 */
}

javascript

const container = document.querySelector('#container')

// intro 버튼 동작
const intro = document.querySelector('#intro')
const intro_submenu = document.querySelector('#intro_submenu');
console.log(intro);

intro.addEventListener('mouseover',() => {
    container.classList.add('show')
    intro_submenu.classList.remove('submenu_list')
    intro_submenu.classList.add('show')
})
intro.addEventListener('mouseout',() => {
    container.classList.remove('show')
    intro_submenu.classList.remove('show')
    intro_submenu.classList.add('submenu_list')
    console.log(intro_submenu);
})
intro_submenu.addEventListener('mouseup',() => {
    intro_submenu.classList.remove('submenu_list')
    intro_submenu.classList.add('show')
})
intro_submenu.addEventListener('mouseout',() => {
    intro_submenu.classList.remove('show')
    intro_submenu.classList.add('submenu_list')
})


//주요업무 버튼 동작
const tasking = document.querySelector('#tasking')
const tasking_submenu = document.querySelector('#tasking_submenu');

tasking.addEventListener('mouseover',() => {
    container.classList.add('show')
    tasking_submenu.classList.remove('submenu_list')
    tasking_submenu.classList.add('show')
})
tasking.addEventListener('mouseout',() => {
    container.classList.remove('show')
    tasking_submenu.classList.remove('show')
    tasking_submenu.classList.add('submenu_list')
})
tasking_submenu.addEventListener('mouseover',() => {
    tasking_submenu.classList.remove('submenu_list')
    tasking_submenu.classList.add('show')
})
tasking_submenu.addEventListener('mouseout',() => {
    tasking_submenu.classList.remove('show')
    tasking_submenu.classList.add('submenu_list')
})



//운송의뢰 동작
const quest = document.querySelector('#quest')
const quest_submenu = document.querySelector('#quest_submenu');

quest.addEventListener('mouseover',() => {
    container.classList.add('show')
    quest_submenu.classList.remove('submenu_list')
    quest_submenu.classList.add('show')
})
quest.addEventListener('mouseout',() => {
    container.classList.remove('show')
    quest_submenu.classList.remove('show')
    quest_submenu.classList.add('submenu_list')
})
quest_submenu.addEventListener('mouseover',() => {
    quest_submenu.classList.remove('submenu_list')
    quest_submenu.classList.add('show')
})
quest_submenu.addEventListener('mouseout',() => {
    quest_submenu.classList.remove('show')
    quest_submenu.classList.add('submenu_list')
})


//커뮤니티 동작

const commu = document.querySelector('#commu')
const commu_submenu = document.querySelector('#commu_submenu');

commu.addEventListener('mouseover',() => {
    container.classList.add('show')
    commu_submenu.classList.remove('submenu_list')
    commu_submenu.classList.add('show')
})
commu.addEventListener('mouseout',() => {
    container.classList.remove('show')
    commu_submenu.classList.remove('show')
    commu_submenu.classList.add('submenu_list')
})
commu_submenu.addEventListener('mouseover',() => {
    commu_submenu.classList.remove('submenu_list')
    commu_submenu.classList.add('show')
})
commu_submenu.addEventListener('mouseout',() => {
    commu_submenu.classList.remove('show')
    commu_submenu.classList.add('submenu_list')
})

yeinart github

yeinart github 바로가기

yeinart 홈페이지 바로가기

profile
이강민
AllTimeDevelop
이전 포스트

HTML+CSS INDIGO-flex버전

다음 포스트

HTML+CSS Tourist in Tour

0개의 댓글