Illie

HTML. 스킵 메뉴란 무엇인가 본문

ETC

HTML. 스킵 메뉴란 무엇인가

(*ᴗ͈ˬᴗ͈)ꕤ*.ﾟ 2022. 1. 30. 20:11

keep going

 

지난 시간, 웹표준 웹접근성 웹호환성에 대해 알아보았다

이번엔 스킵 메뉴에 대해 알아보고자 한다

웹표준 사이트에서 보이스 오버를 사용한다고 가정을 해보자!

웹표준에 맞는 사이트를 만들었다

하지만 여전히 불편한 점이 있다 그것은...

 

웹사이트의 화면에 정보가 많으면 많을수록 자신이 원하는 부분에 도달할 때까지, 꽤 오랜 시간이 걸린다는 것이다

그래서 필요한 것이 스킵이다

 

우리는 주로 중드나 미드를 볼 때 많이들 오프닝 건너뛰기, 줄거리 요약 건너뛰기를 눌렀다

이것을 화면 윗부분에 넣게 된다면

보이스 오버를 사용하는 사람들이 자신이 원하는 정보를 바로 획득할 수 있게 된다

 

웹은 어떠한 사용자, 어떠한 기술환경에서도
사용자가 전문적인 능력없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장해야한다

그래서 스킵이 필요하다

 

스킵을 만들어 보자

주로 <body> 바로 밑에 만든다

<body>
	<div id="skip">
        <a href="#cont_nav">전체 메뉴 바로가기</a>
        <a href="#cont_ban">배너 영역 바로가기</a>
        <a href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>

 

자 위에 처럼, 바로가는 버튼을 만들어주면 된다

 

하지만 웹사이트의 디자인을 위하여, 깔끔함을 위하여 스킵기능을 숨기고 싶어 하는 사람이 있을 것이다

 

그 때 style을 적용하자!

 

스킵에 스타일을 적용하자

#skip {
    position: relative;
}

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

#skip a:active,
#skip a:focus {
    top: 0;
}

id="skip" 을 하였으니 #으로 감싸주고...

 

코드를 분해해보겠다

 

1. skip의 위치는 상대적이다

2. skip a을 활성화 했을 때에는 절대적인 위치를 가진다 (똑같은 위치에 똑같은 크기도 나타난다는 것이다)

3. 탭을 눌러 활성화하지 않는 한, top: -35px에 위치한다

 

스킵에 대하여...

세상은 넓고 나의 식견은 좁다

스킵에 대한 설명을 들으면서 되게... 난 우물안의 개구리였다

'ETC' 카테고리의 다른 글

CSS. transition이란?  (0) 2022.02.03
CSS. 픽셀과 벡터의 차이점은?  (0) 2022.01.30
CSS. 그리드 시스템 활용해서 티스토리 만들기?  (1) 2022.01.27
CSS. animation  (0) 2022.01.26
CSS. 그리드 시스템 활용하기  (0) 2022.01.26
'ETC' Related Articles more
Comments