비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴

조반짝 2023. 6. 27. 13:32

728x90

Notice 3 만들기

column col2 편집

css 편집 .notice3

이미지 사이즈와 li 위치 잡아주기

li에 패딩값을 주어 위치를 잡아준다.

(좌표값을 계산해서 잡아주어야한다.)

a, span 태그가 인라인 구조여서 한 줄로 나열이 된다.

줄이 떨어지기 위해서 블럭구조로 바꾸어 행이 바뀌도록한다.

html에 더보기 넣기

a태그로 더보기 만들어주기

더보기 css 위치 잡기

더보기 a태그 블럭구조로 변경해주고 크기를 지정

백그라운드 이미지 백그라운 포지션을 넣어 이미지를 배치해준다.

clumn col5 편집

제목 써주고 ir_su로 글씨 감추어주기

탭메뉴 만들기

ul > li 로 목록 만들고

li 중 한개 의 li 에 class= "active" 를 지정해준다.

공지사항1 ul > li안에 내용 넣기

공지사항 2,3 에도 내용넣기

css 편집

공지사항 내용 말줄임표 넣기

테두리 넣기

border: 1px solid #ccc;

padding: 8px;

높이값 넣기

height: 105px;

li 옆으로 나열하기

float: left; 을 넣으면 옆으로 나열되지만

.tab_menu ul li ul 에 position: absolute; 포지션을 띄어주어 위치를 정해준다.

float:left한 부모에 overflow: hidden; 넣는다.

공지사항에 border 넣기

첫번째 li에만 float을 적용해야하는 데 두번째 li 에도 float이 적용이 되서 float:none; 을 적용

border 도 마찬가지로 첫번쨰 li에만 적용해야하기 때문에 border 0을 넣는다.

한번에 하려면 부등호를 사용하여 바로 아래에만 적용하도록 한다. -> .tab_menu> ul > li {}

공지사항 border 칸 키우기

a태그가 인라인구조이기 때문에 블럭구조로 바꾸고 padding 값으로 안쪽 여백을 늘려준다.

border 1px를 주었지만 공지사항 탭 사이에 border값이 겹쳐서 2px로 보인다.

margin-right : -1px 로 한 쪽 선을 1px 간격을 없애준다.

탭 아랫선 넣기

공지사항내용 위치잡기

가상요소 대신 목록 기호 넣기

이미지를 넣으면 큰 화면에 꽉차서 반복하게 된다.

no-repeat 반복 해지 해주고 위치를 지정

active 편집

탭 색상 변경 해주고 active 글자색 변경하기

탭메뉴 이벤트 넣기

함수를 이용하여 클릭 이벤트 넣기

함수 만들기

function tabMenu(e){}

 function tabMenu(e){
                e.preventDefault();
            }

e.preventDefault(); : 기본적인 명령어를 취소시키는 명령어

// 함수
            tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu);
            // 탭리스트 안에 있는 a를 찾아서 클릭했을 때 이벤트 발생
            // 이벤트는 함수 tabMenu를 불러오라는 이벤트임
            // .focus(tabMenu) : 선택되었을 때 이벤트 발생(tab메뉴로)

let th = $(this); : 선택한 버튼 값을 th 변수에 대입

th.next("ul").show() : 선택한 요소의 다음 ul을 찾아서 보여주는 명령어

parent("li") : ul의 부모인 li 선택하는 명령어

.addClass("active") : 선택한 요소에 active라는 클래스를 추가하는 명령어

.sibling("li") : 선택한 요소의 형제 li를 선택하라는 명령어

활성화된 탭만 active값이 나오게하기

공지사항도 활성화된 값만 보이게하는 명령어

 // 탭메뉴
            const tab_list = $(".tab_menu");
            tab_list.find("ul ul").hide();
            // 공지사항 컨텐츠를 모두 감추는 명령어
            tab_list.find("li.active>ul").show();
            // 버튼 중 active 가지고 있는 li의 자식 중 ul을 찾아서 보여주라는 명령어

            function tabMenu(e){
                e.preventDefault();
                let th = $(this);

                th.next("ul").show().parent("li").addClass("active").siblings("li").removeClass("active").find(">ul").hide();

            }

                // e.preventDefault(); : 기본적인 명령어를 취소시키는 명령어
                // let th = $(this); : 선택한 버튼 값을 th 변수에 대입
                // th.next("ul").show() : 선택한 요소의 다음 ul을 찾아서 보여주는 명령어
                // parent("li") : ul의 부모인 li 선택하는 명령어
                // .addClass("active") : 선택한 요소에 active라는 클래스를 추가하는 명령어
                // .sibling("li") : 선택한 요소의 형제 li를 선택하라는 명령어

            // 함수
            tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu);
            // 탭리스트 안에 있는 a를 찾아서 클릭했을 때 이벤트 발생
            // 이벤트는 함수 tabMenu를 불러오라는 이벤트임
            // .focus(tabMenu) : 선택되었을 때 이벤트 발생(tab메뉴로)

<전체 html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
    <meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
    <meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
    <meta name="generator" content="Visual Studio Code(작성도구)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준_header-contents</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/slick.css">
    <link rel="stylesheet" href="./css/style.css">


    <!-- 웹폰트 -->
    <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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

    <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=Black+Han+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 스킵 네비게이션 -->
    <div id="skip">
        <a href="#cont_nav">전체 메뉴 바로가기</a>
        <a href="#cont_ban">배너 영역 바로가기</a>
        <a href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>

    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header">
                    <div class="header_menu">
                        <a href="#">로그인 가입</a>
                        <a href="#">CONTACT US</a>
                        <a href="#">ENGLISH</a>
                    </div>
                    <div class="header_tit mt50">
                        <h1>하이미디어 구로캠퍼스</h1><br>
                        <a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
                    </div>
                    <div class="header_icon mt30">
                        <a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
                        <a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
                        <a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
                        <a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
                    </div>
                </div>
            </div>
        </div>
        <section id="contents">
            <article id="cont_nav"> <!--cont_nav-->
            <div class="container">
                <h2 class="ir_su">전체메뉴</h2>
                <div class="nav clearfix">
                    <div>
                        <h3 class="h3">HTML5</h3>
                        <ol class="clearfix">
                            <li><a href="#">html1</a></li>
                            <li><a href="#">html2</a></li>
                            <li><a href="#">html3</a></li>
                            <li><a href="#">html4</a></li>
                            <li><a href="#">html5</a></li>
                            <li><a href="#">html6</a></li>
                            <li><a href="#">html7</a></li>
                            <li><a href="#">html8</a></li>
                            <li><a href="#">html9</a></li>
                            <li><a href="#">html10</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">CSS3</h3>
                        <ol class="clearfix">
                            <li><a href="#">css1</a></li>
                            <li><a href="#">css2</a></li>
                            <li><a href="#">css3</a></li>
                            <li><a href="#">css4</a></li>
                            <li><a href="#">css5</a></li>
                            <li><a href="#">css6</a></li>
                            <li><a href="#">css7</a></li>
                            <li><a href="#">css8</a></li>
                            <li><a href="#">css9</a></li>
                            <li><a href="#">css10</a></li>
                            <li><a href="#">css11</a></li>
                            <li><a href="#">css12</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">웹표준</h3>
                        <ol class="clearfix">
                            <li><a href="#">웹표준1</a></li>
                            <li><a href="#">웹표준2</a></li>
                            <li><a href="#">웹표준3</a></li>
                            <li><a href="#">웹표준4</a></li>
                            <li><a href="#">웹표준5</a></li>
                            <li><a href="#">웹표준6</a></li>
                            <li><a href="#">웹표준7</a></li>
                            <li><a href="#">웹표준8</a></li>
                        </ol>
                    </div>
                </div>
            </div>
            </article>
            <article id="cont_tit"> <!--cont_tit-->
            <div class="container">
                <div class="tit">
                    <h2> &ldquo; 프론트 엔드는 너무 쉬워서 금방 끝난다.&rdquo; </h2>
                    <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                </div>
            </div>
            </article>
            <article id="cont_ban"> <!--cont_ban-->
            <div class="container">
                <div class="ban">
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                    <div><a href="#"><img src="./image/ban1.png" alt="구이미지"></a></div>
                    <div><a href="#"><img src="./image/ban2.png" alt="나무이미지"></a></div>
                    <div><a href="#"><img src="./image/ban3.png" alt="추상이미지"></a></div>
                </div>
            </article>
            <article id="cont_cont">  <!--cont_cont-->
            <div class="container">
                <div class="cont">
                    <div class="column col1">
                        <h3>
                            <span class="icon_img ir_pm">아이콘1</span>
                            <em class="icon_tit">Notice1</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        <div class="notice1 noti">
                            <h4 class="h4">공지사항1</h4>
                            <ul>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                                <li><a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a></li>
                            </ul>
                            <a href="#" class="more ir_pm">더보기</a>
                        </div>
                        <div class="notice2 noti">
                            <h4 class="h4">공지사항2</h4>
                            <ul>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                                <li>
                                    <a href="#">공지사항 영역입니다.공지사항 영역입니다.공지사항 영역입니다.</a>
                                    <span>2023-06-23</span>
                                </li>
                            </ul>
                            <a href="#" class="more ir_pm">더보기</a>
                        </div>
                    </div><!--col1-->
                    <div class="column col2">
                        <h3>
                            <span class="icon_img ir_pm">아이콘2</span>
                            <em class="icon_tit">Notice2</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        <!-- 게시판 3 -->
                        <div class="notice3">
                            <h4 class="h4">HTML Reference</h4>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./image/hover1.png" alt="식물">
                                        <strong>[HTML]&lt;table &gt;</strong>
                                        <span>&lt;table&gt;태그는 표를 만들 때 사용합니다.</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./image/hover2.png" alt="커피잔">
                                        <strong>[HTML]&lt;table &gt;</strong>
                                        <span>&lt;table&gt;태그는 표를 만들 때 사용합니다.</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./image/hover3.png" alt="바다">
                                        <strong>[HTML]&lt;table &gt;</strong>
                                        <span>&lt;table&gt;태그는 표를 만들 때 사용합니다.</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./image/hover4.png" alt="반원">
                                        <strong>[HTML]&lt;table &gt;</strong>
                                        <span>&lt;table&gt;태그는 표를 만들 때 사용합니다.</span>
                                    </a>
                                </li>
                            </ul>
                            <a href="#" class="more ir_pm">더보기</a>
                        </div>
                    </div><!--col2-->
                    <div class="column col3">
                        <h3>
                            <span class="icon_img ir_pm">아이콘3</span>
                            <em class="icon_tit">Notice3</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                    </div><!--col3-->
                    <div class="column col4">
                        <h3>
                            <span class="icon_img ir_pm">아이콘4</span>
                            <em class="icon_tit">Notice4</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                        <div class="hover1">
                            <h4 class="h4">Mouse Hover1</h4>
                            <ul class="clearfix">
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover1.png" alt="풀">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>풀</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover2.png" alt="커피잔">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>커피잔</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover3.png" alt="바다">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>바다</strong>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="hover2">
                            <h4 class="ir_su">Mouse Hover2</h4>
                            <ul class="clearfix">
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover4.png" alt="반원">
                                            <em>바로가기</em>    
                                        </span>
                                        <strong>반원</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover5.png" alt="책상">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>책상</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span>
                                            <img src="./image/hover6.png" alt="식물">
                                            <em>바로가기</em>
                                        </span>
                                        <strong>식물</strong>
                                    </a>
                                </li>
                            </ul>
                           
                        </div>
                    </div><!--col4-->
                    <div class="column col5">
                        <h3>
                            <span class="icon_img ir_pm">아이콘5</span>
                            <em class="icon_tit">Notice5</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>

                        <div class="tab_menu">
                            <h4 class="ir_su">tab_menu</h4>
                            <ul>
                                <li class="active"><a href="#">공지사항1</a>
                                    <ul>
                                        <li><a href="#">첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.</a></li>
                                        <li><a href="#">첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.</a></li>
                                        <li><a href="#">첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.첫번쨰 공지사항 탭메뉴입니다.</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">공지사항2</a>
                                    <ul>
                                        <li><a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a></li>
                                        <li><a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a></li>
                                        <li><a href="#">두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.두번째 공지사항 탭메뉴입니다.</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">공지사항3</a>
                                    <ul>
                                        <li><a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a></li>
                                        <li><a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a></li>
                                        <li><a href="#">세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.세번째 공지사항 탭메뉴입니다.</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="notice4">
                            <h4 class="h4">최신 <span>공지사항</span></h4>
                            <ul>
                                <li>
                                    <a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
                                    <span>2018.11.19</span>
                                </li>
                                <li>
                                    <a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
                                    <span>2018.11.19</span>
                                </li>
                                <li>
                                    <a href="#">웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.웹디자이너와 웹 퍼블리싱을 알아봅시다.</a>
                                    <span>2018.11.19</span>
                                </li>
                            </ul>
                            <a href="#" class="more">더보기</a>
                        </div>

                    </div><!--col5-->
                    <div class="column col6">
                        <h3>
                            <span class="icon_img ir_pm">아이콘6</span>
                            <em class="icon_tit">Notice6</em>
                        </h3>
                        <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
                    </div><!--col6-->
                </div>
            </div>
            </article>
        </section>
        <div id="footer">
            <div class="container"></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./js/slick.js"></script>

    <script>
        // 탭메뉴
            const tab_list = $(".tab_menu");
            tab_list.find("ul ul").hide();
            // 공지사항 컨텐츠를 모두 감추는 명령어
            tab_list.find("li.active>ul").show();
            // 버튼 중 active 가지고 있는 li의 자식 중 ul을 찾아서 보여주라는 명령어

            function tabMenu(e){
                e.preventDefault();
                let th = $(this);

                th.next("ul").show().parent("li").addClass("active").siblings("li").removeClass("active").find(">ul").hide();

            }

                // e.preventDefault(); : 기본적인 명령어를 취소시키는 명령어
                // let th = $(this); : 선택한 버튼 값을 th 변수에 대입
                // th.next("ul").show() : 선택한 요소의 다음 ul을 찾아서 보여주는 명령어
                // parent("li") : ul의 부모인 li 선택하는 명령어
                // .addClass("active") : 선택한 요소에 active라는 클래스를 추가하는 명령어
                // .sibling("li") : 선택한 요소의 형제 li를 선택하라는 명령어

            // 함수
            tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu);
            // 탭리스트 안에 있는 a를 찾아서 클릭했을 때 이벤트 발생
            // 이벤트는 함수 tabMenu를 불러오라는 이벤트임
            // .focus(tabMenu) : 선택되었을 때 이벤트 발생(tab메뉴로)


        // 배너이미지(슬릭)
        $('.ban').slick({
        infinite: true, //무한반복
        slidesToShow: 3, //한번에 보여주는 이미지 갯수
        slidesToScroll: 1, //버튼을 눌렀을 때 넘어가는 이미지 갯수
        autoplay: true, //자동이로 이미지 이동
        autoplaySpeed: 3000, //3초마다 자동으로 이미지 이동
        dots: true, //닷버튼 생성
        });


        $(".tit .btn").click(function(){
            // $(".nav").show();
            // $(".nav").fadeIn(500);
            // $(".nav").slideDown(500);
            // $(".nav").css("display","block"); // block은 보여주는 기능도 있다.
            // $(".nav").toggle();
            $(".nav").slideToggle();

            $(this).toggleClass("on");

        });
    </script>

</body>
</html>

<전체 css>

@charset "utf-8";

#wrap{
    width: 100%;
}

#header{
    width: 100%;
    height: 325px;
    /* 헤더 이미지 높이 고려 */
    background: url(../image/header_bg.jpg) no-repeat top center;
    /* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}

#contents{}
#cont_nav{
    width: 100%;
    /* height: 200px; */
    /* background-color: lightcoral; */
}
#cont_tit{
    width: 100%;
    /* height: 200px; */
    background-color: lightcyan;
}
#cont_ban{
    width: 100%;
    /* height: 200px; */
    /* background-color: lightgray; */
}
#cont_cont{
    width: 100%;
    /* height: 200px;
    background-color: lightgreen; */
}

#footer{
    width: 100%;
    height: 220px;
    background-color: lightseagreen;
}

/* container */
.container{
    width: 990px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(255,255,255,0.3);
}

/* skip */
#skip{
    /* 기준점 잡아주기 */
    position: relative;
}
#skip a{
    position: absolute;
    width: 140px;
    background-color: #333;
    color: #fff;
    height: 30px;
    text-align: center;
    line-height: 30px;
    /* 탭 위치 설정 */
    left:0;
    top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
    top: 0;
}

/* header */
.header{    
    /* height: 325px; */
}

.header .header_menu{
    /* background-color: aqua; */
    /* 메뉴 오른쪽으로 정렬하기 */
    text-align: right;
}
.header .header_menu a{
    color: #fff;
    /* top,left,bottom 여백주기 */
    padding: 10px 0 10px 20px; 
    /* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
    display: inline-block;
    /* 마우스 오버 속도 넣기 */
    transition: all 0.5s;
}

.header .header_menu a:hover{
    /* 마우스 오버시 글자색 바뀔수 있도록 한다. */
    color: #333;
}

.header .header_tit{
    /* background-color: red; */
    text-align: center;

}
.header .header_tit h1{
    color: #fff;
    background-color: #4aa8d4;
    font-size: 28px;
    /* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
    display: inline-block;
    padding: 5px 20px;
    transition: all 0.5s;
    text-shadow: 0 2px 2px darkblue;
    
}

.header .header_tit h1:hover{
    background-color: darkblue;
    cursor: pointer;
}

.header .header_tit a{
    font-size: 18px;
    background-color: #2698cb;
    display: inline-block;
    /* 위아래 박스 여백이 없어짐 */
    padding: 5px 20px;
    color: #fff;
    /* 위아래 박스 겹쳐지게하기 */
    margin-top: -7px;
}

.header .header_icon{
    text-align: center;
}
.header .header_icon a{
    width: 60px;
    height: 60px;
    background-color: #333;
    /* 인라인 구조이기 때문에 display: inline-block 적용*/
    display: inline-block;
    /* 양옆 여백주기 */
    margin: 0 5px;

    /* 아이콘 이미지 넣어주기 */
    background: url(../image/icon.png);
}

.header .header_icon a.icon1{
    background-position: 0px 0px;
    /* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다.  */
}
.header .header_icon a.icon2{
    background-position: 0px -60px;
}
.header .header_icon a.icon3{
    background-position: 0px -120px;
}
.header .header_icon a.icon4{
    background-position: 0px -180px;
}

.header .header_icon a.icon1:hover{
    background-position: -60px 0px;
}

.header .header_icon a.icon2:hover{
    background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
    background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
    background-position: -60px -180px;
}

.header .header_icon a span{
    font-size: 0;
    /* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}

/* nav */

.nav{
    padding: 30px 0;
    /* background-color: #4aa8d4; */
    display: none;
}
.nav > div{
    float: left;
    width: 40%;
    /* 전체너비의 40%사용 */
}

.nav > div:nth-of-type(3){
    width: 20%;
    /* 마지막 div 전체너비의 20%사용 */
}

/* .nav > div > h3{
    font-size: 18px;
    font-weight: bold;
    color: #25a2d0;
    하단 여백 띄워주기
    margin-bottom: 4px;
} */

.nav > div > ol{}
.nav > div > ol > li{
    width: 50%;
    float: left;
}

.nav > div:nth-of-type(3) li{
    width: 100%;
}

.nav > div > ol > li > a{}

.nav > div > ol > li > a:hover{
    text-decoration: underline;
}

/* .tit */
.tit{
    position: relative;
}
.tit h2{
    font-size: 40px;
    /* 아이콘 사이여백 넣기 위해 10px 추가 */
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
    width: 60px;
    height: 60px;
    background: url(../image/icon.png) 0px -600px;
    display: block;
    position: absolute;
    right: 0;
    top: 5px;
}

.tit a.btn:hover{
    background-position: -60px -600px;
}

.tit a.btn.on{
    background-position: 0px -660px;
}

.tit a.btn.on:hover{
    background-position: -60px -660px;
}

/* ban */
.ban{
    padding: 30px 0px 30px 20px;
    position: relative;
}
.slick-prev{
    /* 이전아이콘 위치잡아주기 */
    position: absolute;
    top: 65px;
    left: -80px;
    /* 아이콘이미지 불러오기 */
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px 0;
    /* 글씨없애주기 */
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}

.slick-prev:hover{
    background-position: -193px 0;
    cursor: pointer;
}

.slick-next{
    position: absolute;
    top: 65px;
    right: -80px;
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px -43px;
    font-size: 0;
    line-height: 0;
    text-indent: 99999px;
}

.slick-next:hover{
    background-position: -193px -43px;
    cursor: pointer;
}

.ban img{
    /* border: 4px solid #dcdcdc; */
    border: 4px solid transparent;
    /* 마우스오버시 이미지크기가 변경되지 않도록 고정하는 역할 */
}

.ban img:hover{
    border: 4px solid red;
}

.ban .slick-dots{
    /* background-color: #2698cb; */
    text-align: center;
    /* 위치 잡아주기 위해 포지션을 띄움 */
    position: absolute;
    bottom: 0px;
    /* position을 띄우면서 너비값을 잃음 다시 너비값 넣어줌 */
    width: 100%;
    margin-left: -22px;
}

.ban .slick-dots li{
    /* 위치 잡아주기 */
    display: inline-block;
    margin: 10px;
}
.ban .slick-dots li button{
    /* 닷 만들어주기 */
    width: 15px;
    height: 15px;
    background-color: aqua;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}

.ban .slick-dots li.slick-active button{
    background-color: #2698cb;
}
 

/* cont */
.cont{
    /* 위쪽 여백주기 */
    padding-top: 30px;
    overflow: hidden;
}

/* 여섯개의 박스를 동시에 편집할 수 있음 */
.cont .column{
    width: 289px;
    height: 363px;
    /* border 오른쪽 선 넣어주기 */
    border-right: 1px solid #2698cb;
    /* 박스 안쪽여백 */
    padding-right: 30px;
    /* 박스 바깥 쪽 여백 */
    margin: 0 30px 30px 0;
    /* 박스 옆으로 나열 */
    float: left;    
    /* 아이콘의 기준점 */
    position: relative;
}
/* 행의 마지막 박스는 border, padding=right, margin-right 삭제해야 위로 올라가 배치됨 */
.cont .col1{}
.cont .col2{}
.cont .col3{
    border: 0;
    margin-right: 0;
    padding-right: 0;
}
.cont .col4{}
.cont .col5{}
.cont .col6{
    border: 0;
    margin-right: 0;
    padding-right: 0;
}

.cont .column .icon_img{
    /* span 태그이기 때문에 넓이값 가지기 위해 block구조로 변경 */
    display: block;
    width: 60px;
    height: 60px;
    /* 배경을 복합적으로 사용할 때 background 사용 */
    background: url(../image/icon.png);
    /* 아이콘 배치 */
    position: absolute;
    top:0;
    left: 0;
}

/* 아이콘 이미지를 각 각 변경하기 위해 col1 -6 을 따로 편집 */
.cont .col1 .icon_img{background-position: 0px -240px;}
.cont .col2 .icon_img{background-position: 0px -300px;}
.cont .col3 .icon_img{background-position: 0px -360px;}
.cont .col4 .icon_img{background-position: 0px -420px;}
.cont .col5 .icon_img{background-position: 0px -480px;}
.cont .col6 .icon_img{background-position: 0px -540px;}

/* 마우스 오버시 아이콘 변경되게하기 */
.cont .col1 .icon_img:hover{background-position: -60px -240px;}
.cont .col2 .icon_img:hover{background-position: -60px -300px;}
.cont .col3 .icon_img:hover{background-position: -60px -360px;}
.cont .col4 .icon_img:hover{background-position: -60px -420px;}
.cont .col5 .icon_img:hover{background-position: -60px -480px;}
.cont .col6 .icon_img:hover{background-position: -60px -540px;}


.cont .column .icon_tit{
    font-size: 18px;
    color: #2698cb;
    /* 타이틀 위치배치 */
    padding-left: 70px;
    /* padding 과 margin의 차이점  */
    font-weight: bold;
}
.cont .column .icon_desc{
    /* 설명 위치배치 */
    padding-left: 70px;
    /* 아랫선 배치 */
    border-bottom: 1px solid #2698cb;
    /* 선 위아래 여백 */
    padding-bottom: 15px; /*선 위 여백*/
    margin-bottom: 15px; /*선 아래 여백*/
}

.cont .col1 .noti{
    /* a.more의 기준점 */
    position: relative;
}

.cont .col1 .noti a.more{
    display: block;
    width: 17px;
    height: 17px;
    background: url(../image/icon.png) -150px -90px;
    /* 아이콘 배치하기 */
    position: absolute;
    right: 0;
    top: 0;
}
.cont .col1 .notice1{}
.cont .col1 .notice1 ul{}
.cont .col1 .notice1 ul li{
    position: relative;
}
.cont .col1 .noti ul li::before{
    position: absolute;
    content: "";
    width: 2px;
    height: 9px;
    background-color: #aaa;
    left: 5px;
    top: 5px;
    border-radius: 5px;
}
.cont .col1 .notice1 ul li a{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 10px;
    po
}

.cont .col1 .notice2{
    margin-top: 15px;
}
.cont .col1 .notice2 ul{}
.cont .col1 .notice2 ul li{
    overflow: hidden;
    position: relative;
}


.cont .col1 .notice2 ul li a{
    display: block;
    width: 65%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
    /* box-sizing 이 있어야 글자가 밀리지 않음 */
    box-sizing: border-box;
}
.cont .col1 .notice2 ul li span{
    display: block;
    width: 30%;
    float: right;
}

/* col4 */
.col4{}
.col4 .hover1{}
.col4 .hover1 h4{}
.col4 .hover1 ul{
    /* overflow: hidden을 사용하면 93px 이상으로 잘라버린다. >> clearfix사용해서 하는 방법이 좋다.*/
    /* overflow: hidden; */
}
.col4 .hover1 ul li{

    /* strong이 보일 수 있도록 높이값을 높인다. */

    /* 위치잡아주기 */
    float: left;
    margin-right: 5px;
    /* em의 기준점 */
    position: relative;
}
.col4 .hover1 ul li:nth-of-type(3){
    margin-right: 0;
}

.col4 .hover1 ul li a{}
.col4 .hover1 ul li a span{
    position: relative;
    width: 93px;
    height: 93px;
    overflow: hidden;
    display: block;    
}
.col4 .hover1 ul li a span img{
    /* 사이즈 100%로 맞춰줘야 비율이 맞게 나온다. */
    width: 100%;
}
.col4 .hover1 ul li a span em{
    display: block;
    width: 93px;
    height: 93px;
    background-color: rgba(0,255,255,0.3);
    text-align: center;
    line-height: 93px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}
.col4 .hover1 ul li:hover a span em{
    top: 100px;
    
}

.col4 .hover1 ul li a strong{
    /* strong 가운데정렬하기 */
    display: block;
    width: 100%;
    text-align: center;
    
}

.col4 .hover2{
    margin-top: 15px;
}
.col4 .hover2 ul{}
.col4 .hover2 ul li{
    float: left;
    margin-right: 5px;
    
}
.col4 .hover2 ul li:nth-of-type(3){
    margin-right: 0;
}
.col4 .hover2 ul li a{}
.col4 .hover2 ul li a strong{
    text-align: center;
    display: block;
}
.col4 .hover2 ul li a span{
    display: block;
    overflow: hidden;
    position: relative;
    width: 93px;
    height: 93px;   
}
.col4 .hover2 ul li a span img{
    width: 100%;
}
.col4 .hover2 ul li a span em{
    background-color: rgba(0,255,255,0.3);
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 50px;
    bottom: -50px;
    left: 0;
    color: #fff;
    transition: all 0.5s;
    width: 93px;
    height: 50px;
}
.col4 .hover2 ul li a span:hover em{
    bottom: 0;
}
    
/* col2_notice3 */
.notice3{
    position: relative;
}
.notice3 ul{}
.notice3 ul li{
    /* a는 인라인구조라서 기준이 안 잡힐 수 있음, li에 기준점 잡아줌 */
    position: relative;
    /* 패딩값으로 좌표값을 계산해서 위치를 잡아주어야한다. */
    padding: 8px 0 14px 60px;
}
.notice3 ul li a{}
.notice3 ul li a img{
    /* 이미지 사이즈 줄이기(너비값만 넣어주어야 비율이 맞게 들어감) */
    width: 50px;
    /* 이미지 띄워주어야함 */
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #0093bd;
}
.notice3 ul li a strong{
    /* 블럭구조로 바꾸어서 행이 바뀌도록한다. */
    display: block;
}
.notice3 ul li a span{
    /* 블럭구조로 바꾸어서 행이 바뀌도록한다. */
    display: block;
}
.notice3 a.more{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 17px;
    height: 17px;
    background: url(../image/icon.png) -150px -90px;}


    /* col5_tab_menu */
    .tab_menu{
        border: 1px solid #ccc;
        padding: 8px;
        height: 105px;
        /* ul의 기준점 */
        position: relative;
    }
    .tab_menu ul{
        overflow: hidden;
        /* 아랫선 넣어주기 */
        border-bottom: 1px solid #ddd;

    }
    .tab_menu ul li{
        float: left;
        border: 1px solid #ccc; 
        margin-right : -1px;
        /* 아랫선 겹쳐지는 부분 없애기 */
        margin-bottom: -1px;
    }
    .tab_menu ul li a{
        display: block;
        padding: 5px 10px;    
    }
    .tab_menu ul li ul{
        position: absolute;
        width: 100%;
        left: 0;
        top: 48px;
        border: 0;
        
    }
    .tab_menu ul li ul li{
       border: 0;
       float: none;
       /* 공지사항 내용 안으로 들여쓰기 */
       padding-left: 19px;
       background: url(../image/KakaoTalk_20230627_102643215.gif) no-repeat 10px 8px;
    }
    .tab_menu ul li ul li a{
        display: block;
        width: 270px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 20px;
        /* 공지사항 내용 위치잡기 */
        padding: 0 0 3px 0;
    }
    .tab_menu ul li.active{
        background-color: #2c94c4;
    }
    .tab_menu ul li.active a{
        /* 첫번째 공지사항내용이 흰색이라 안보임 */
        color: #fff;
    }
    .tab_menu ul li.active ul li a{
        /* 첫번쨰 공지사항 내용 글자색 변경해주면 보인다. */
        color: #333;
    }

    /* col5_tab_menu notice4 */
    .notice4{
        border: 1px solid #ccc;
        margin-top: 15px;
        position: relative;
        

    }
    .notice4 h4{       
        border-bottom: 1px solid #ccc;
        padding: 8px 10px;
    }
    .notice4 h4 span{
        color: hotpink;
        font-weight: bold;
        
    }
    .notice4 ul{
        /* ul 안쪽 여백 */
        padding: 10px;
    }
    .notice4 ul li{
        overflow: hidden;
        background: url(../image/KakaoTalk_20230627_102643215.gif) no-repeat 1px 10px;
        padding: 2px 0 2px 13px;
        
    }
    .notice4 ul li a{
        /* 인라인구조 블럭구조로 변경!! */
        display: block;
        width: 60%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        float: left;
        padding-left: 1px;
        
    }
    .notice4 ul li span{
        /* 인라인구조 블럭구조로 변경!! */
        display: block;
        width: 30%;
        float: right;
        /* 글씨 오른쪽 정렬 */
        text-align: right;
    }
    .notice4 a.more {
        position: absolute;
        right: 10px;
        top: 10px;
    }

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 51_ 햄버거 메뉴 (0)	2023.06.27
비주얼 스튜디오 코드 50 _ Parallax02 (0)	2023.06.27
비주얼 스튜디오 코드 48_Parallax (0)	2023.06.26
비주얼 스튜디오 코드 47_ 반응형 레이아웃 (0)	2023.06.26
[JAVASCRIPT] 4. 마우스 오버 효과 (0)	2023.06.23

현재글비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

Parallax, Java, position, SQL, offset, JavaScript, For문, float, CSS, media, 이클립스, ACTIVE, 코딩테스트, 자바스크립트, HTML, if문, 웹디자인, 자바, 비주얼스튜디오코드, 프론트엔드,

Today :
Yesterday :

조반짝의 도전일지