Welcolme my Tutorial blog

퍼블리셔와 디자이너를 위한 사이트입니다.
동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

Welcolme my Tutorial blog

웹 표준 사이트 따라하기 튜토리얼 입니다.
유튜브 영상과 같이 보면서 따라하는 튜토입니다.

Welcolme my Tutorial blog

사이트는 현재 만드는 중입니다.
버그와 잘못된 링크가 엄청 많습니다.

안녕하세요!

현재는 베타버전입니다.

이 사이트는 코딩을 동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

에디터가 드리는 인사

티스토리 뷰

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹표준, 웹접근성, 샘플사이트">
    <meta name="generator" content="brackets">
    <title>WEBSTANDARD SITE</title>
    
    <!-- style -->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
</head>
<body>
    <!-- 스킵 내비게이션 -->
    <div id="skip">
        <a rel="bookmark" href="#cont_nav">전체 메뉴 바로가기</a>
        <a rel="bookmark" href="#cont_ban">배너 영역 바로가기</a>
        <a rel="bookmark" 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">cont_nav</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>
        <!-- //contents -->
        
        <div id="footer">
            <div class="container">footer</div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>


<style>
/* 스킵 내비게이션 */
#skip {position: relative;}
#skip a {position: absolute; left: 0px; top: -35px; width: 140px; border:1px solid #fff; color: #fff; text-align: center; background: #333; line-height: 30px;}
#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: #111;}

/* 컨텐츠 레이아웃 */
#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);}
</style>
<style>
/* 여백 초기화 */   
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;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; 
    color: #222; font-size: 13px; line-height: 1.5;}
</style>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹표준, 웹접근성, 샘플사이트">
    <meta name="generator" content="brackets">
    <title>WEBSTANDARD SITE</title>
    
    <style>
        /* 여백 초기화 */   
        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;}

        /* 폰트 초기화 */
        body, input, textarea, select, button, table {
            font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; 
            color: #222; font-size: 13px; line-height: 1.5;}
    </style>
    <style>
        /* 스킵 내비게이션 */
        #skip {position: relative;}
        #skip a {position: absolute; left: 0px; top: -35px; width: 140px; border:1px solid #fff; color: #fff; text-align: center; background: #333; line-height: 30px;}
        #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: #111;}
        
        /* 컨텐츠 레이아웃 */
        #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);}
    </style>
</head>
<body>
    <!-- 스킵 내비게이션 -->
    <div id="skip">
        <a rel="bookmark" href="#cont_nav">전체 메뉴 바로가기</a>
        <a rel="bookmark" href="#cont_ban">배너 영역 바로가기</a>
        <a rel="bookmark" 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">cont_nav</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>
        <!-- //contents -->
        
        <div id="footer">
            <div class="container">footer</div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>

웹 표준 사이트 만들기(2019) - 스킵 메뉴

웹 표준 사이트를 만들기 위한 스킵 메뉴입니다. 웹 접근성을 위한 스킵 메뉴에 대해서 알아봅니다.

완성
광고

공유하기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
태그보기

전체메뉴

질문하기
댓글
  • 프로필사진 geon http://smiling88.dothome.co.kr/web/index.html
    완성
    skip 메뉴를 하다가 왜 똑같이 안될까 했더니 폰트 reset 부분이 통째로 skip된 느낌이 드네요
    구글 웹폰트를 적용 하긴 했는데,
    주로 html 문서에 폰트 링크가 걸려있긴한데, css 쪽에 폰트링크 걸고 폰트 설정 해도 별 차이점을 못 느끼겠어요, 이렇게 해도 괜찮은지 차이점은 없는건가 궁금해요
    2018.11.16 00:37 신고
  • 프로필사진 @webs 네 html에 하셔도 되고 css에 import하셔도 됩니다. 2018.12.25 11:22 신고
  • 프로필사진 mdymky http://mdymky.dothome.co.kr/web/index.html
    1920x1080 해상도에서 작업했는데
    style.css 파일에 #skip a {position: absolute; left: 0px; top: -35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 160px; text-align: center;}
    width: 140px 혹은 150px은 마지막 글자 '기' 글자가 보이네요. width: 160px 으로 주면 처음 로딩시 안보이네요.
    2018.12.24 17:10 신고
  • 프로필사진 @webs 아직 폰트 초기화를 안하셔서 그렇네요~ 다음 과정에서 나올거 같은데 기본 폰트를 13픽셀로 설정하면 안나올것입니다. 조금 더 따라하시면 해결될것 같아요~ 2018.12.25 11:24 신고
  • 프로필사진 nini http://designerih.dothome.co.kr/web/index.html
    저도 마지막 글자 '기'글자만 보여서 질문하러 왔는데 다른분이 질문해주셔서 해결됐습니다 !!ㅎㅎ 다음 강의 들으러갑니다~ ㅎㅎ
    2019.02.01 18:26 신고
  • 프로필사진 @webs 네^^ 수고하셨어요~~ 2019.02.03 12:24 신고
  • 프로필사진 승훈 1. /* 스킵 내비게이션 */
    #skip { }
    #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;}
    반면에 이 코드는 작동합니다. 그런데 :active는 링크를 클릭했을 때 스타일을 지정하는 것인데 필요한 코드인지 의문입니다. 화면에 보이지 않아서 클릭할 수가 없는데 말이죠. 제 생각이 틀린지 궁금합니다... ㅠㅠ

    2. /* 스킵 내비게이션 */
    #skip {position: relative;}
    기준점이 되어야 하기 때문이라고 설명해주셨는데 코드가 없어도 결과가 동일한 것 같은데 이 코드를 작성하신 이유에 대한 세부적인 설명을 조금 더 추가해주시면 감사하겠습니다.
    2019.03.04 23:26 신고
  • 프로필사진 @webs :active는 클릭했을 때 상태를 말하는 것이 맞습니다. 스킵메뉴가 화면에 나타나지 않고 탭 메뉴를 클릭했을 때 나타나서 키보드를 이용하여 해당 메뉴로 가는 것이 맞지만 탭메뉴를 클릭하고 마우스로 클릭할 수도 있다 해서 만약을 위해서 넣어준것입니다. 여러가지 상황이 있을 수 있으니깐요~ 두번 째 질문에서 기준이 필요없는 것도 맞습니다. 원하시면 쓰지 않아도 상관은 없습니다. 제가 넣어준 이유는 혹시라도 어떤 상황에선 필요할 수 도 있고 원칙상 넣어주는게 좋으니까 넣어준 것입니다. 딱 정해진 정답은 아니니 참고만 하시면 될거 같습니다. 2019.03.05 11:08 신고
  • 프로필사진 공부중 제 컴퓨터에서는 top: -62px; 정도 돼야 안보이던데 기준이 무엇인가요? 2019.03.17 23:40 신고
  • 프로필사진 공부중 아 그리고 여기있는 다른분들 주소 들어가봤는데 깜짝놀랐네요...다들 웹 완성 하신건가봐요 ㅠㅠ 부럽습니다 http://cruiser.dothome.co.kr/ 2019.03.17 23:42 신고
  • 프로필사진 @webs 브라우저마다 틀릴 순 있는데요~ 주소로 확인을 해보니~ 크게 이상 없어 보입니다. 브라우저가 화면이 100% 인지 확인을 해주세요~ Ctrl + / Ctrl - 를 누르면서 확인하면 됩니다. 2019.03.18 09:00 신고
댓글쓰기 폼