시각 장애인 분들을 위하여 우리는 웹접근성 규약? 을 준수해야한다.
웹 접근성 준수방법에는 여러가지가 있는데 그중 스킵네비게이션방법에 대해 알아보자
css
-->css 가상셀렉터
CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus
가상 선택자(셀렉터)를 이용하면 HTML 요소의 상태에 따라서 해당 요소의 스타일을 다르게 적용할 수 있습니다. 대표적인 것이 hover, active, focus입니다. 아래의 예제처럼 사용할 수 있습니다. :hover
hogni.tistory.com
이 부분을 참조하자.
가상 선택자(셀렉터)를 이용하면 HTML 요소의 상태에 따라서 해당 요소의 스타일을 다르게 적용할 수 있습니다. 대표적인 것이 hover, active, focus입니다. 아래의 예제처럼 사용할 수 있습니다.
:hover
가상 셀렉터 :hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다. 밑에 보이는 예제의 입력창에 마우스를 올려놓으면 색깔이 변경되는 것을 볼 수 있습니다.
:active
가상 선택자 :active를 이용하면 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있습니다. 아래 예제의 입력창을 클릭해서 마우스를 뗄 때까지 색깔이 변경하는 것을 확인할 수 있습니다.
:focus
사용자의 마우스가 해당 요소를 클릭하면 요소의 스타일 변경할 수 있습니다. 클릭 이외에도 탭 키를 이용해서 요소를 선택해도 활성화됩니다.
[참고 자료]
의사 클래스
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.
developer.mozilla.org
이외에도 :enabled, :disabled, :link, :visited 등 다양한 가상 클래스 셀렉터가 존재합니다. 더 자세한 내용은 위의 링크를 참고할 수 있습니다.
위와 같이 스킵네비게이션 css코드를 짤때 이용한다.
그렇다면 position: relative; absolute은 무엇인가?
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
https://www.youtube.com/watch?v=MLqn_-GDu_E&list=PLq8wAnVUcTFUffyIZTTV0LZr1RrfQEuHX
이 링크들을 들어가면서 이해해보도록 하자..
아무래도 position파트는 중요한 파트라서 글로 설명하기에는 무리가 있다.
position:absolute 은 말그대로 위치를 절대적으로 내 마음대로 조정한다.
다만 영역이 사라진다. 살짝 둥 떠있는 느낌이다.
line-height는 line-height는 줄 높이를 정하는 속성이다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
#skip{position: relative;}
#skip a {position: absolute; left: 0; top: -100px; border : 1px solid #fff; color: #fff; background: #333;
line-height: 30px;width: 140px;text-align: center;
}
#skip a:active,
#skip a:focus{top: 0;}
.container{
width: 900px;
height: inherit;
margin: 0 auto;
background: rgba(0,0,0,0.3);
}
#header{
width: 100%;
height: 100px;
background-color: #b78b7b;
}
#cont_nav{
width: 100%;
height: 200px;
background-color: #9f654f;
}
#cont_tit{
width: 100%;
height: 200px;
background-color: #ab7865;
}
#cont_ban{
width: 100%;
height: 200px;
background-color: #e9f5f9;
}
#cont_tit{
width: 100%;
height: 200px;
background-color: #e6e7d3;
}
#cont_cont{
width: 100%;
height: 200px;
background-color: #873e23;
}
#footer{
width: 100%;
height: 100px;
background-color: #28130a;
}
</style>
</head>
<body>
<!--//스킵 네비게이션-->
<div id="skip">
<a href="#cont_nav">네비게이션 바로가기</a>
<a href="#cont_tit">타이틀 바로가기</a>
<a href="#cont_ban">배너 바로가기</a>
<a href="#cont_cont">콘텐츠 바로가기</a>
</div>
<div id="wrap">
<div id="header"><div class="container">header</div></div>
<div id="cont_nav"><div class="container">cont_nav</div></div>
<div id="cont_tit"><div class="container">cont_tit</div></div>
<div id="cont_ban"><div class="container">cont_ban</div></div>
<div id="cont_cont"><div class="container">cont_cont</div></div>
<div id="footer"><div class="container">footer</div></div>
</div>
</body>
</html>위 코드를 잘 보도록 하자
--> 최종 결과물이다.
웹 접근성연구소
NULI
nuli.navercorp.com
참고하고 이해하자.!
'웹 프로그래밍(풀스택-->java) > 웹프로그래밍(프론트엔드-->java)' 카테고리의 다른 글
| 6. 전체 메뉴 수정 (0) | 2021.12.15 |
|---|---|
| 5. reset.css 기본 템플릿~! (0) | 2021.12.12 |
| 4. 웹 표준 사이트 만들기 - 헤더 아이콘 수정 (0) | 2021.12.12 |
| 3. 헤더 타이틀 & 웹 폰트 (0) | 2021.12.12 |
| 2. 웹 표준 사이트 만들기 - 헤더 배경&메뉴 (0) | 2021.12.10 |
