Front-end 국비지원 #015일 2차

JooSehyun·2022년 11월 7일
CSShtml메뉴페이지제작
0

HTML / CSS

페이지 만들기 JQuery입문 (1편 상단)

결과

JQuery 요소는

  • '퍼블리셔가 꼭 알아야 하는 팁!!' 오른쪽 버튼을 클릭하면 목록이 나타난다.
  • 슬라이드 이미지가 나타난다.
    https://swiperjs.com/demos 에서 고른 후 ctrl+u를 누르고 스크립트를 복사한다.

ex) 붙여넣기 한다.

1. 
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> 

2.
<script>
            $('.tit .btn').click(function(){
                $('.cont_nav').slideToggle();
                $(this).toggleClass("on")
            });
</script>

HTML 구성

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</head>
<body>
    <ul id="skip">
        <li><a href="#header">헤더 영역 바로가기</a></li>
        <li><a href="#nav">메뉴 영역 바로가기</a></li>
        <li><a href="#contents">본문 영역 바로가기</a></li>
    </ul>
    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header-menu">
                    <a href="#">Desinger</a>
                    <a href="#">Publisher</a>
                    <a href="#">front-end</a>
                </div>
                <div class="header-tit">
                    <h1>Publisher &amp; Desinger &amp; front-end</h1><br>
                    <a href="http://cjh7652.dothome.co.kr/sRoom/index.html">hyunroom</a>
                </div>
            </div>
        </div>
        <div id="contents">
            <div class="cont_nav">
                <div class="container">
                    <h2 class="ir_so">전체메뉴</h2>
                    <div class="nav">
                        <div>
                            <h3>HTML Reference</h3>
                            <ol>
                                <li><a href="#">HTML 태그(Tag)</a></li>
                                <li><a href="#">블록요소/인라인 요소</a></li>
                                <li><a href="#">DTD 선언</a></li>
                                <li><a href="#">언어 속성 설정</a></li>
                                <li><a href="#">HTML &lt; title &gt;</a></li>
                                <li><a href="#">HTML &lt; meta &gt;</a></li>
                                <li><a href="#">특수문자</a></li>
                                <li><a href="#">하이퍼링크</a></li>
                                <li><a href="#">HTML &lt; style &gt;</a></li>
                                <li><a href="#">HTML &lt; html &gt;</a></li>
                                <li><a href="#">HTML &lt; head &gt;</a></li>
                                <li><a href="#">HTML &lt; body  &gt;</a></li>
                                <li><a href="#">HTML &lt; div  &gt;</a></li>
                                <li><a href="#">HTML &lt; caption  &gt;</a></li>
                            </ol>
                        </div>
                        <div>
                            <h3>CSS Reference</h3>
                            <ol>
                                <li><a href="#">CSS 선택자</a></li>
                                <li><a href="#">CSS 색상</a></li>
                                <li><a href="#">CSS 단위</a></li>
                                <li><a href="#">CSS 선언 방법</a></li>
                                <li><a href="#">CSS float</a></li>
                                <li><a href="#">상대주소 절대주소</a></li>
                                <li><a href="#">IR 효과</a></li>
                                <li><a href="#">이미지 표현 방법</a></li>
                                <li><a href="#">이미지 스프라이트</a></li>
                                <li><a href="#">text-align</a></li>
                                <li><a href="#">border-style</a></li>
                                <li><a href="#">font-size</a></li>
                                <li><a href="#">background-color</a></li>
                            </ol>
                        </div>
                        <div>
                            <h3>Webstandard</h3>
                            <ol>
                                <li><a href="#">웹표준</a></li>
                                <li><a href="#">웹접근성</a></li>
                                <li><a href="#">W3C</a></li>
                                <li><a href="#">웹 접근성 연구소</a></li>
                                <li><a href="#">네이버 널리</a></li>
                                <li><a href="#">Webstandard</a></li>
                                <li><a href="#">클로스브라우징</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cont_tit">
                <div class="container">
                    <div class="tit">
                        <h2>퍼블리셔가 꼭 알아야 하는 팁!!!!</h2>
                        <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                    </div>
                </div>
            </div>
            <div class="cont_ban">
                <div class="container">
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide"><a href="#"><img src="./img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></div>
                          <div class="swiper-slide"><a href="#"><img src="./img/banner_link2.jpg" alt="스킬"></a></div>
                          <div class="swiper-slide"><a href="#"><img src="./img/banner_link3.jpg" alt="브라우저"></a></div>
                          <div class="swiper-slide"><a href="#"><img src="./img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></div>
                          <div class="swiper-slide"><a href="#"><img src="./img/banner_link2.jpg" alt="스킬"></a></div>
                          <div class="swiper-slide"><a href="#"><img src="./img/banner_link3.jpg" alt="브라우저"></a></div>
                        </div>
                        <div class="swiper-pagination"></div>
                      </div>
                </div>
            </div>
            <div class="cont_cont">
                <div class="container">
                    <div class="cont">
                        <div class="column col1">
                            <h3><span class="ico_img ir_pm">아이콘1</span><em class="ico_tit">Notice</em></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형1</p>
                            <div class="notice1 notice">
                                <h4>웹퍼블리셔 면접 질문</h4>
                                <ul>
                                    <li><a href="#">HTML 태그중에 dl, dt,dd,ul,ol,li의 차이점이 무엇인가요? 궁금하네요</a></li>
                                    <li><a href="#">HTML 태그중에 strong과 em 태그의 차이점은 무엇인가요?</a></li>
                                    <li><a href="#">인라인요소와 블록요소의 차이점?</a></li>
                                    <li><a href="#">컨텐츠 요소를 가운데로 오게 하는 방법은 무엇입니까?</a></li>
                                </ul>
                                <a href="#" class="more ir_pm" title="더보기">더보기</a>
                            </div>
                            <div class="notice2 notice">
                                <h4>웹 디자이너 면접 질문</h4> 
                                <ul>
                                    <li><a href="#">jpg, png, gif, svg의 차이점이 무엇인가요?</a><span>2022.11.07</span></li>
                                    <li><a href="#">UI디자인과 UX다지인의 차이점을 설명하세요</a><span>2022.11.07</span></li>
                                    <li><a href="#">인터렉션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2022.11.07</span></li>
                                    <li><a href="#">웹디자인과 모발일 디자인의 차이점은 무엇이라고 생각합니까?</a><span>2022.11.07</span></li>
                                </ul>
                                <a href="#" class="more ir_pm" title="더보기">더보기</a>
                            </div>
                        </div>
                        <div class="column col2">
                            <h3><span class="ico_img ir_pm">아이콘2</span><em class="ico_tit">Notice</em></h3>
                            <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형2</p>
                            <div class="notice3 notice">
                                <h4>HTML Reference</h4>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="./img/notice01.jpg" alt="이미지1">
                                            <strong>[HTML] &lt; table &gt;</strong>
                                            <span>&lt; table &gt; 태그는 표를 만들 떄 사용합니다.</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./img/notice02.jpg" alt="이미지2">
                                            <strong>[HTML] &lt; div &gt;</strong>
                                            <span>&lt; div &gt; 태그는 문서의 섹션을 만들거나 영역을 나눌때 사용합니다</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./img/notice03.jpg" alt="이미지3">
                                            <strong>[HTML] &lt; dl &gt;</strong>
                                            <span>&lt; dl &gt; 태그는 용어를 설명하는 목록형 태그입니다.</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./img/notice01.jpg" alt="이미지1">
                                            <strong>[HTML] &lt; em &gt;</strong>
                                            <span>&lt; em &gt; 태그는 텍스트를 강조할 때 사용합니다.</span>
                                        </a>
                                    </li>
                                </ul>
                                <a href="#" class="more ir_pm" title="더보기">더보기</a>
                            </div>
                        </div>
                        <div class="column col3">
                                <h3><span class="ico_img ir_pm">아이콘3</span><em class="ico_tit">Notice</em></h3>
                                <p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형3</p>
                                <div class="login-wrap notice">
                                    <h4 class="ir_so">로그인정보</h4><!-- so이라서 정의할 필요 x -->
                                    <form id="loginFrom" action="#" method="post" name="loginFrom">
                                        <fieldset>
                                            <legend class="ir_so">로그인 및 관련 설정</legend><!-- so정의x -->
                                            <div class="login-header">
                                                <h5 class="ir_so">로그인 보안</h5>
                                                <div class="lh_check">
                                                    <input type="checkbox" id="inputCheck" class="input-check">
                                                    <label for="inputCheck">로그인 상태 유지</label>
                                                </div>
                                                <div class="lh_ip">
                                                    IP보안 <em>ON</em>
                                                </div> 
                                            </div>
                                            <div class="login-content">
                                                <h5 class="ir_so">로그인 영역</h5>
                                                <div class="lc_text">
                                                    <label for="uid" class="ir_so">아이디</label>
                                                    <input type="text" id="uid" placeholder="아이디" class="input-text">
                                                    <label for="upw" class="ir_so">비밀번호</label>
                                                    <input type="password" id="upw" class="input-text"
                                                    placeholder="비밀번호">
                                                </div>
                                                <button class="lc-btn" type="submit">로그인</button>
                                            </div>
                                            <div class="login-footer">
                                                <h5 class="ir_so">로그인문제해결</h5>
                                                <ul>
                                                    <li><a href="#"><strong>회원가입</strong></a></li>
                                                    <li><a href="#">아이디</a>&middot; <a href="#">비밀번호 찾기</a></li>
                                                </ul>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                                <div class="popup notice">
                                    <h4>Advertisement</h4>
                                    <ul>
                                        <li><a href="#"><img src="./img/sban07.jpg" alt="이미지"></a></li>
                                        <li><a href="#"><img src="./img/sban08.jpg" alt="이미지"></a></li>
                                        <li><a href="#"><img src="./img/sban09.jpg" alt="이미지"></a></li>
                                    </ul>
                                </div>
                        </div>
                        <div class="column col4"></div>
                        <div class="column col5"></div>
                        <div class="column col6"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="container"></div>
        </div>
        <script>
            $('.tit .btn').click(function(){
                $('.cont_nav').slideToggle();
                $(this).toggleClass("on")
            });
            // 스와이퍼
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 3,
                spaceBetween: 30,
                pagination: {
                el: ".swiper-pagination",
                clickable: true,
                },
            });
        </script>
    </div>
</body>

CSS 구성

@charset "utf-8";
@import url('reset.css');

body{/* font-family: 'Nanum Brush Script', cursive; */ font-family: 'Nanum Gothic', sans-serif;}
/* 공통속성 */
.container{width: 990px; margin: 0 auto; height: inherit; /* background: rgba(0,0,0,.3); */}

/* 레이아웃 */
#header{width: 100%; height: 325px; background:url(../img/header_bg.jpg) repeat-x center top;}
#contents{width: 100%; height: 1100px; background: yellowgreen;}
#footer{width: 100%; height: 160px; background: #ddd;}



/* header영역 */
.header-menu{text-align: right;}
.header-menu a{color: #fff; display: inline-block; padding: 10px 0 10px 13px;}
.header-menu a:hover{color: #666}
.header-tit{text-align: center;}
.header-tit h1{background: #fff; font-size: 28px; padding: 5px 20px 6px 20px; display: inline-block; color: #333; margin-top: 60px; box-shadow:  5px 5px 10px #000; text-transform: uppercase; }
.header-tit a{display: inline-block; background: #fff; color: #9b9b8c; padding: 5px 20px 6px; box-shadow: 5px 5px 10px #000; margin-top: -8px; font-size: 18px;}


/* 본문내용 */
.cont_nav{background: #ddd; width: 100%; height: auto; display: none;}
.cont_nav .nav{overflow: hidden; padding: 30px 0}
.cont_nav .nav>div{float: left; width: 40%;}
.cont_nav .nav>div:last-child{width: 20%;}
.cont_nav .nav>div h3{color: #18bacb; font-size: 18px; margin-bottom: 5px; font-weight: bold;}
.cont_nav .nav>div ol{overflow: hidden;}
.cont_nav .nav>div ol li{float: left; width: 50%}
.cont_nav .nav>div:last-child ol li{ width: 100%}
.cont_tit{width: 100%; background: #fff;}
.cont_tit .tit{position: relative;}
.cont_tit .tit h2{ text-align: center; color: #8a8a7b; font-size: 40px; padding: 5px 0}
.cont_tit .tit .btn{position: absolute; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat 0 -600px; right: 0; top: 5px}
.cont_tit .tit .btn.on{background-position: 0 -660px;}

.cont_ban{width: 100%; padding: 30px 0; background: #ccc;}
.swiper {
    width: 100%;
    height: 100%;
  }
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 컨텐츠 */
.cont_cont{width: 100%; background: #eee;}
.cont{overflow: hidden;}
.cont .column{width: 32%; margin-right: 2%; height: 330px;float: left;margin-bottom: 20px; border-right: 1px solid #ccc; box-sizing: border-box; position: relative; padding-right: 20px; margin-top: 20px;}
  .cont .column:nth-child(3n){margin-right: 0; padding-right: 0;border-right:none; }
.cont .column h3 .ico_img{background: url(../img/icon.png) no-repeat; width: 60px; height: 60px; display: block; position: absolute; top:0; left:0}
  .cont .col1 h3 .ico_img{background-position: 0 -240px;}
  .cont .col2 h3 .ico_img{background-position: 0 -300px;}
  .cont .col3 h3 .ico_img{background-position: 0 -360px;}
  .cont .col4 h3 .ico_img{background-position: 0 -420px;}
  .cont .col5 h3 .ico_img{background-position: 0 -480px;}
  .cont .col6 h3 .ico_img{background-position: 0 -540px;}
  .cont .column h3 .ico_tit{ padding-left: 70px; font-size: 16px; color: #2c94c4; font-weight: bold; padding-bottom: 5px; display: block; padding-top: 10px;}
  .cont .column .ico_desc{padding-left: 70px; padding-bottom: 10px; border-bottom: 1px solid #d0d0d0; letter-spacing: -1px; margin-bottom: 10px;}
  .cont .column .notice{position: relative;}
  .cont .column .notice h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
  .cont .column .notice ul li{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(../img/dot.gif) no-repeat 0 9px; padding-left: 8px;}
  .cont .column .notice ul li> a{font-size: 12px;}
  .cont .column .notice .more{position: absolute; right: 0; top: 0; display: block; width: 17px; height: 17px; background: url(../img/icon.png) no-repeat -150px -90px;}

  /* 게시판2 */
  .cont .column .notice2 h4{margin-top: 40px;}
  .cont .column .notice2 ul li a{width: 65%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .cont .column .notice2 ul li span{float: right; width: 30%; text-align: right;}

  .cont .column .notice3 ul li{background: none; position: relative; padding: 9px 0 9px 60px}
  .cont .column .notice3 ul li a img{width: 50px; border: 1px solid #0093bd; position: absolute; top:0; left: 0;}
  .cont .column .notice3 ul li a strong{display: block;}
  .cont .column .notice3 ul li a span:hover{text-decoration: underline;}

  /* 로그인 */
  .login-wrap{background: #f2f4f5; padding: 15px; }
  .login-header{height: 30px; font-size: 12px;overflow: hidden;}
  
  .login-header .lh_check{ float: left; width: 120px; }
  .login-header .lh_check .input-check{vertical-align: middle;}

  .login-header .lh_check .lh_ip{float: left;}
  .login-header .lh_ip em{color: #0093dd; text-decoration: underline; font-weight: bold;}
  .login-content{overflow: hidden;}
  .login-content .lc_text{float: left; width: 70%}
  .login-content .lc_text .input-text{width: 182px; height: 16px; border: 1px solid #bebebe; padding: 2px 5px; margin-bottom: 3px;}
  .login-content .lc-btn{float: left; width: 86px; height: 47px; background: #fff; border: 1px solid #bebebe;}
  .login-footer{clear: both; margin-top: 5px;}
  .login-footer ul{overflow: hidden;}
  .cont .column .login-footer ul li{float: left; background: none;}
  .login-footer ul li a:hover{color: #0093bd;}
  .login-footer ul li a strong{}

  .popup h4{margin-top: 10px;}
  .popup ul{overflow: hidden;}
  .cont .column .popup ul li{float: left; width: 94px; background: none; margin-right: 15px; padding-left: 0; height: 70px;}
  .cont .column .popup ul li:last-child{margin-right: 0;}
  .popup ul li img{width: 100%;}
profile
JooSehyun
이전 포스트

Front-end 국비지원 #015일 1차

다음 포스트

Front-end 국비지원 #016일

0개의 댓글