본문 바로가기
웹 표준 사이트 만들기/페이지 구조 실습

페이지 구조 실습 - 스킵 메뉴

Code K 2022. 12. 31. 20:31
반응형
SMALL

index.html에서 body에 주석처리, div박스 만들기

 

 

바로가기 입력 후 저장

 

 

style.css 이동 후 스킵 내비게이션 주석처리, skip 입력

 

 

 

 

style.css 이동 후 스킵 내비게이션 주석처리, skip 입력 후 보기. (잘 나온다)

 

 

 

 

나머지 입력

 

 

입력 후 보기 ( 거슬리게 ' 기 ' 자만 아래칸에 있다)

 

 

 

width 값을 160으로 수정 후

 

 

 

보기 (글자가 나란히 나있다)

 

 

 

reset.css 이동 후 링크초기화 입력

 

 

 

링크 초기화 입력 후 보기. 글자 밑줄이 없어졌다.

 

 

 

 

 

style.css 이동 후 skip a 입력

 

 

 

style.css 이동 후 skip a 입력 후 보기. 그대로다.

 

 

 

 

top 에 -35px 입력

 

 

 

 

top 에 -35px 입력 후 보기. (글자가 사라짐)

 

 

 

Tab을 누르면 글자가 보인다 1

 

 

Tab을 누르면 글자가 보인다 2

 

 

 

Tab을 누르면 글자가 보인다 3

 

 

 

복붙 마무리

 

 

index.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="codegogo">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="코드고고, 웹표준, 웹접근성, 사이트 만들기">
    <meta name="generator" content="brakets">
    <title>WEBSTANDARD SITE</title>
    
    <!-- CSS STYLE -->
    <link rel="stylesheet" type="text/css" 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">
        <div id="header">
            <div class="container">header</div>
        </div>
        <!-- //header -->
        
        <div id="contents">
            <div id="cont_nav">
                <div class="container">contents</div>
            </div>
            <!-- //cont_nav -->
            <div id="cont_tit">
                <div class="container">cont_tit</div>
            </div>
            <!-- //cont_tit -->
            <div id="cont_ban">
                <div class="container">cont_ban</div>
            </div>
            <!-- //cont_ban -->
            <div id="cont_cont">
                <div class="container">cont_cont</div>
            </div>
            <!-- //cont_cont -->
        </div>
        <div id="footer">
            <div class="container">footer</div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>
style.css
@charset "utf-8";

/* 스킵 내비게이션 */
#skip {position: absolute;}
#skip a {position: absolute; left: 0px; top: -35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 160px; text-align: center;}
#skip a:active,
#skip a:focus {top: 0;}


/* 레이아웃 */
#wrap {width: 100%;}
#header {width: 100%; height: 325px; background: #111;}
#contents {width: 100%;height: 800px; background: #222;}
#footer {width: 100%; height: 200px; background: #333;}

/* 컨텐츠 레이아웃 */
#cont_nav {width: 100%; height: 200px; background: #333;}
#cont_tit {width: 100%; height: 200px; background: #444;}
#cont_ban {width: 100%; height: 200px; background: #555;}
#cont_cont {width: 100%; height: 200px; background: #666;}

/* 컨테이너 */
.container {width: 990px; margin: 0 auto; height: inherit; background: rgba(255,255,255,0.3);}
reset.css@charset "utf-8";

/* 여백 초기화 */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,
legend,p,select,table,th,td,tr,textarea,button,form{margin:0;padding:0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}
 

 

 

https://inf.run/fyGS

 

반응형
LIST

'웹 표준 사이트 만들기 > 페이지 구조 실습' 카테고리의 다른 글

페이지 구조 실습 - 전체 타이틀  (2) 2023.01.02
페이지 구조 실습 - 전체 메뉴  (0) 2023.01.02
페이지 구조 실습 - 헤더 아이콘  (0) 2023.01.01
페이지 구조 실습 - 헤더 타이틀 & 웹 폰트  (0) 2023.01.01
페이지 구조 실습 - 헤더 배경 & 메뉴  (0) 2022.12.31

'웹 표준 사이트 만들기/페이지 구조 실습' Related Articles

티스토리툴바