**최종
* index.html
<head>
<!-- CSS STYLE -->
<link rel="stylesheet" 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>
<!-- //스킵 내비게이션 -->
* style.css
/* 스킵 내비게이션 */ /* id 같은경우 #cont_nav 사용 */
#skip {position: relative;} /* 기준점이 되어야함 */
#skip a {position: absolute; left: 0; top: -35px; border: 1px solid #fff; color: #fff; background: #333;
line-height: 30px; width: 140px; text-align: center;}
/* position 절대적인 위치설정 -단점: 영역 사라짐
line-height: 30px; 문자와 문자의 간격
text-align: center; 글씨가운대로 */
/* top: -35px; 평소숨김 */
/* tab을 클릭하면 포커스가 됬다는거임(활성화됨) */
#skip a:active,
#skip a:focus {top: 0;}
* reset.css
/* a 링크 초기화 */
a {color: #222; text-decoration: none; }
a:hover {color: #390;} /* 마우스 오버했을때의 색깔:#390; */
* index.html
* style.css
* reset.css
* style.css
'3월 ~ ) HTML 와 CSS > 페이지 구조' 카테고리의 다른 글
| 헤더 배경 & 메뉴 (0) | 2024.03.10 |
|---|
