10. 웹 표준 사이트 만들기(2019)

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

웹 접근성이란, 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있게 하는 것이다.

쉽게 말하면 시각 장애인을 위해서 웹에 대한 접근을 좋게 해주기 위해 작업을 하는 것이라고 생각하면 된다.

웹 접근성이 좋게 html을 작성하기 위한 지침서들이 있다.

웹 표준은 장애인차별금지법에 따라서 생겼다.

우리나라는 2013년 웹접근성 의무화가 되어 사이트 만들 때 웹 접근성에 맞춰서 코딩을 해야 한다.

따라서 웹 접근성에 맞춰서 스킵메뉴를 만들어야 한다.

스킵메뉴란 시각, 지체 장애인들이 메뉴가 많다보니 탭을 눌러서 이동하기 불편한데 한 번에 이동할 수 있게 하는 것이다.

전체소스

index.html

<!DOCTYPE html>

<head>

<title>WEBSTANDARD SITE</title>

</head>

<body>

<div id="skip">

<a href="#cont_nav">전체 메뉴 바로가기</a>

<a href="#cont_ban">배너 영역 바로가기</a>

<a href="#cont_cont">컨텐 영역 바로가기</a>

</div>

<div class="container">header</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="container">header</div>

</div>

</div>

</body>

</html>

style.css

/* 스타일도 언어설정을 해줘야 한다. 한글이 깨지지 않게 */

@charset "utf-8";

/* 스킵 내비게이션 */

/* skip은 기준점이 되어야 하기 때문에 relative를 사용한다. */

#skip {position: relative;}

/*position: absolute는 위치가 절대적이다라는 의미이다. 위치를 마음대로 옮길 수 있지만 영역이 사라진다는 문제점이 있다. 그래서 약간 붕 떠있는 느낌이 난다.left나 top이런 속성으로 조절할 수 있다. 평소에는 top:-35px로 안보이게 한다. */

#skip a {position: absolute; left: 0px; top:-35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 160px; text-align: center;}

/* tab을 눌럿을 때 skip 메뉴가 활성화되었거나 포커스가 가면.. 아래와 같이 top:0으로 동작되게 한다. */

#skip a:active,

#skip a:focus {top: 0;}

/* 레이아웃 */

#wrap {}

#header {height: 325px; background: #111;}

#contents {height: 800px; background: #222;}

#footer {height: 200px; background: #333;}

/* 컨텐츠 레이아웃 */

/* 영역이 잡힌 다음에는 항상 백그라운드로 영역이 잡혔는지 확인하는 것이 중요하다. */

#cont_nav {height: 200px; background: #333;}

#cont_tit {height: 200px; background: #444;}

#cont_ban {height: 200px; background: #555;}

#cont_cont {height: 200px; background: #666;}

/* 컨테이너 */

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

reset.css

@charset "utf-8";

/* 여백 초기화 */

body, div, ul, li, dl, 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;}

'IT공부 > HTML & CSS' 카테고리의 다른 글

12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트 (0)	2020.06.17
11. 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴 (0)	2020.06.17
09. 웹 표준 사이트 만들기(2019) - 레이아웃2 (0)	2020.06.16
08. 웹 표준 사이트 만들기(2019) - 레이아웃1 (0)	2020.06.16
07. 웹 표준 사이트 만들기(2019) (0)	2020.06.16

IT블로그

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