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

비주얼 스튜디오 코드 38_ 웹표준) menu

조반짝 2023. 6. 19. 15:08
728x90
반응형

바탕 이미지 고정시키기

● background-attachment: fixed >> 큰 이미지를 사용해야한다.

 

웹표준 MENU

[토탈 네비게이션 만들기]

meta 설명 넣어주기 >> 웹페이지의 상세설명

viewport가 있어야 반응형이 적용이 된다.

html 골격만들기

 

[skip 네비게이션]

아이디 컨텐츠 안에 섹션으로 나눠서 창을 100%사용할 수 있도록 한다.

#wrap > #header, #footer > .container >.header, .footer 

#wrap > #contets > .cont_nav , .cont_tit, .cont_ban, .cont_cont  > .container > .tit , .ban, .cont

 

css 편집하기

아이디 먼저 넣어주고 각 아이디 안에 자식 넣어준다.

각 영역 잡아주기

컨테이너 영역은 작업 영역이다.

작업영역 너비값 변경할 시에 컨테이너 영역너비만 변경하면된다.

유지보수시 용이

css- skip 네비게이션 편집

스킵네비게이션 영역 잡아준다.

● display: inline-block;

박스를 옆으로 나열하면서 너비값도 넣어준다.

단, 인라인 구조이기 때문에 박스사이에 여백이 생긴다,

 

링크에 아이디 컨텐츠 nav, ban, cont 를 걸어준다.

아이디 헤더에 배경넣어주기

background position 생략하고 백그라운드에 한번에 넣어줘도 된다.

.header  편집

.header_menu 안에 a태그 추가해주고 링크 연결해주기

css .header  편집

header_menu

오른쪽 정렬을 해주고 display: inline-block 적용하여 인라인구조와 블럭구조 갖도록 함

● 링크연결할 때 새창 뜨게 하기

html에서 링크한 주소 뒤에 target="_blank" 적용해준다.

.header_tit 편집

html에 "header_tit mt50" 추가

마진탑 적용

인라인 구조로 변경했기 때문에 html에서 br로 enter 를 해준다.

.header 에서  padding-bottom 으로 여백늘려주기

인라인구조에는 마진탑이 적용이 안되기 때문에

display: inline-block 으로 인라인- 블록구조로 변경해서 마진탑이 적용되게 한다.

.header_icon 편집

icon1 글자를 숨겨야하지만 있어야하기 때문에 a태그 안에 span을 넣어줘서 span만 숨겨도 아이콘이 보이게한다.

css 편집

a태그는 인라인구조이기 때문에 display: inline-block 구조로 변경해서 높이적용이 가능하도록 한다.

html에서 .header_icon mt30 을 적용하여

마진탑30px 여백을 준다.

아이콘 이미지 적용하기

a.icon1-4 {} 에 background-position 좌표를 이용하여 적용한다.

span에 class="ir_pm"을 적용하여 문자를 지워준다. 

아이콘 마우스 오버 시 색상 바뀔 수 있도록 이미지를 좌표를 변경해준다.

.contents 편집

.nav 편집하기

 

● ntt 문자

 

 

CSS > .nav 편집

.nav 세덩이로 영역 잡아주기

float띄워서 세덩이가 옆으로 나열되게 한다.

h3에 class="h3" 에 클래스를 지정하여 reset.css 에 h3속성을 추가해주면 시간을 단축할 수 있다.

ol 태그 편집하기

기본 너비값은 100%이고 단을 나누고 싶다면 너비값을 50%로 지정해주면 된다.

a태그에 hover시에 text-decoration : underline 을 적용하면 밑줄이 나온다.

.tit 편집하기

ntt 문자 사용

html 골격만들기

css .tit 편집하기



아이콘 위치 시켜주기

아이콘 좌표로 다른 아이콘으로 변경해주기

전체메뉴 ir효과로 숨겨주기

●아래 버튼을 클릭하면 .nav가 슬라이드로 나오게 하기

위쪽 방향 아이콘으로 변경해주기

●.tit .btn.on{ background-position}: 위쪽 방향 이미지 넣어주기

script 에서 .toggleClass("on")을 추가해 준다.

토탈네비게이션 완성!!

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="웹개발자 3팀">
    <meta name="description" content="웹표준샘플링 예제입니다.">
    <meta name="keyword" content="웹표준 샘플링 예제 네비게이션 웹개발자 3팀">
    <meta name="generator" content="Visual Studio Code">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준_네비게이션</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">

    
    
</head>
<body>
    <!-- 스킵 네비게이션 -->
    <div id="skip">
        <a href="cont_nav">전체메뉴 바로가기</a>
        <a href="cont_ban">배너영역 바로가기</a>
        <a href="cont_cont">컨텐츠 영역 바로가기</a>
    </div>
    <div id="wrap">
        <header id="header">
            <div class="container">
                <div class="header">
                    <div class="header_menu">
                        <a href="#">로그인</a>
                        <a href="https://www.naver.com/"
                        target="_blank">네이버</a>
                        <a href="https://www.himedia.co.kr/"
                        target="_blank">하이미디어</a>
                    </div>
                    <div class="header_tit mt50">
                        <h1>하이미디어 아카데미 구로캠퍼스</h1><br>
                        <a href="https://www.himedia.co.kr/" target="_blank">풀스택 개발자 3팀</a>
                    </div>
                    <div class="header_icon mt30">
                        <a href="#" class="icon1"><span class="ir_pm">icon1</span></a>
                        <a href="#" class="icon2"><span class="ir_pm">icon2</span></a>
                        <a href="#" class="icon3"><span class="ir_pm">icon3</span></a>
                        <a href="#" class="icon4"><span class="ir_pm">icon4</span></a>
                    </div>
                </div> <!--.header-->
            </div>
        </header>
        <section id="contents">
            <section id="cont_nav">
            <div class="container">
                <h2 class="ir_su">전체메뉴</h2>
                <!-- 글자만 지워주기 위해 ir_su를 사용한다. -->
                <div class="nav">
                    <div>
                        <h3 class="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="#">HTM L&lt tilte &gt</a></li>
                            <li><a href="#">HTML &lt meta &gt</a></li>
                            <li><a href="#">HTML 특수문자</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 div &gt</a></li>
                            <li><a href="#">HTML &lt span &gt</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="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 절대주소와 상대주소</a></li>
                            <li><a href="#">CSS float</a></li>
                            <li><a href="#">이미지 표현 방법</a></li>
                            <li><a href="#">이미지 스프라이트</a></li>
                            <li><a href="#">IR효과</a></li>
                            <li><a href="#">이미지 최적화</a></li>
                            <li><a href="#">background-color</a></li>
                            <li><a href="#">border-style</a></li>
                            <li><a href="#">font-size</a></li>
                            <li><a href="#">text-align</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">Web Standard</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="#">다음 다룸</a></li>
                            <li><a href="#">웹표준을 잘~~</a></li>
                        </ol>
                    </div>
                </div> <!--.nav-->
            </div>
            </section>
            <section id="cont_tit">
            <div class="container">
                <div class="tit">
                    <h2>&ldquo; 프론트엔드와 백엔드를 정복합시다 &rdquo;</h2>
                    <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                </div> <!--.tit-->
            </div>
            </section>
            <section id="cont_ban">
            <div class="container">
                <div class="ban"></div> <!--.ban-->
            </div>
            </section>
            <section id="cont_cont">
            <div class="container">
                <div class="cont"></div> <!--.cont-->
            </div>
            </section>
        </section>
        <footer id="footer">
            <div class="container">
                <div class="footer"></div> <!--.footer-->
            </div>
        </footer>
    </div>

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

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

</body>
</html>

<css>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="웹개발자 3팀">
    <meta name="description" content="웹표준샘플링 예제입니다.">
    <meta name="keyword" content="웹표준 샘플링 예제 네비게이션 웹개발자 3팀">
    <meta name="generator" content="Visual Studio Code">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준_네비게이션</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">

    
    
</head>
<body>
    <!-- 스킵 네비게이션 -->
    <div id="skip">
        <a href="cont_nav">전체메뉴 바로가기</a>
        <a href="cont_ban">배너영역 바로가기</a>
        <a href="cont_cont">컨텐츠 영역 바로가기</a>
    </div>
    <div id="wrap">
        <header id="header">
            <div class="container">
                <div class="header">
                    <div class="header_menu">
                        <a href="#">로그인</a>
                        <a href="https://www.naver.com/"
                        target="_blank">네이버</a>
                        <a href="https://www.himedia.co.kr/"
                        target="_blank">하이미디어</a>
                    </div>
                    <div class="header_tit mt50">
                        <h1>하이미디어 아카데미 구로캠퍼스</h1><br>
                        <a href="https://www.himedia.co.kr/" target="_blank">풀스택 개발자 3팀</a>
                    </div>
                    <div class="header_icon mt30">
                        <a href="#" class="icon1"><span class="ir_pm">icon1</span></a>
                        <a href="#" class="icon2"><span class="ir_pm">icon2</span></a>
                        <a href="#" class="icon3"><span class="ir_pm">icon3</span></a>
                        <a href="#" class="icon4"><span class="ir_pm">icon4</span></a>
                    </div>
                </div> <!--.header-->
            </div>
        </header>
        <section id="contents">
            <section id="cont_nav">
            <div class="container">
                <h2 class="ir_su">전체메뉴</h2>
                <!-- 글자만 지워주기 위해 ir_su를 사용한다. -->
                <div class="nav">
                    <div>
                        <h3 class="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="#">HTM L&lt tilte &gt</a></li>
                            <li><a href="#">HTML &lt meta &gt</a></li>
                            <li><a href="#">HTML 특수문자</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 div &gt</a></li>
                            <li><a href="#">HTML &lt span &gt</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="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 절대주소와 상대주소</a></li>
                            <li><a href="#">CSS float</a></li>
                            <li><a href="#">이미지 표현 방법</a></li>
                            <li><a href="#">이미지 스프라이트</a></li>
                            <li><a href="#">IR효과</a></li>
                            <li><a href="#">이미지 최적화</a></li>
                            <li><a href="#">background-color</a></li>
                            <li><a href="#">border-style</a></li>
                            <li><a href="#">font-size</a></li>
                            <li><a href="#">text-align</a></li>
                        </ol>
                    </div>
                    <div>
                        <h3 class="h3">Web Standard</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="#">다음 다룸</a></li>
                            <li><a href="#">웹표준을 잘~~</a></li>
                        </ol>
                    </div>
                </div> <!--.nav-->
            </div>
            </section>
            <section id="cont_tit">
            <div class="container">
                <div class="tit">
                    <h2>&ldquo; 프론트엔드와 백엔드를 정복합시다 &rdquo;</h2>
                    <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                </div> <!--.tit-->
            </div>
            </section>
            <section id="cont_ban">
            <div class="container">
                <div class="ban"></div> <!--.ban-->
            </div>
            </section>
            <section id="cont_cont">
            <div class="container">
                <div class="cont"></div> <!--.cont-->
            </div>
            </section>
        </section>
        <footer id="footer">
            <div class="container">
                <div class="footer"></div> <!--.footer-->
            </div>
        </footer>
    </div>

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

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

</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 39_ 검색창 만들기  (0) 2023.06.20
[JAVASCRIPT] 1. 기초  (0) 2023.06.19
비주얼 스튜디오 코드_37 Fade In & Fade Out  (0) 2023.06.16
비주얼 스튜디오 코드 36_ 웹표준) header  (0) 2023.06.16
비주얼 스튜디오 코드 _ 35 로딩 애니메이션  (0) 2023.06.16

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 38_ 웹표준) menu

관련글

티스토리툴바