본문 바로가기

3월 ~ ) HTML 와 CSS/페이지 구조

스킵 메뉴 (TAB 키를 누름으로 키변경)

**최종

적용 전                                                                                                                  적용 후

 

* 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

<a href = " "> 를 사용했을때, 글씨 밑 밑줄방지

 


 

TAB 키를 누르면 바로가기 버튼이 바뀜

 

* style.css

 

'3월 ~ ) HTML 와 CSS > 페이지 구조' 카테고리의 다른 글

헤더 배경 & 메뉴  (0) 2024.03.10