1. 폰트 어썸 링크 붙여넣기
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세팅마무리하기</title>
<script src="https://kit.fontawesome.com/---------.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/layout.css">
</head>2. button 안 삼지창 아이콘 (i 태그)
-
콤비
라벨 태그 for="allMenu"
폰트어썸 아이콘 i class="fa-solid fa-bars"></i -
"allMenu"
버튼 태그 id="allMenu"
라벨 태그 for="allMenu"
<header id="hd">
<button id="allMenu">
<label for="allMenu" class="sr-only">전체메뉴</label>
<i class="fa-solid fa-bars"></i> <!-- 삼지창 아이콘 링크 -->
</button>
</header>
3. 웹 접근
"전체메뉴" -> 화면에 보이지 않고, 소리만 들림 (class="sound-only")
<label for="allMenu" class="sr-only">전체메뉴</label>CSS 사운드 온리
<style>
.sr-only{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden; /* 화면상에 보이지 않도록 스타일 지정 */
margin: -1px;
}
</style>4. i태그 .fa-bars에 가상선택자::before 걸기
4-1. 삼지창 버튼에 :hover 시 -> 크로스 아이콘(X)으로 변하도록
<header id="hd">
<button id="allMenu">
<label for="allMenu" class="sr-only">전체메뉴</label>
<i class="fa-solid fa-bars"></i> <!-- 삼지창 아이콘 클래스 fa-bars -->
</button>
</header>CSS
<style>
.fa-bars:hover:before { content: '\f00d'; } /* 'X'아이콘 유니코드 : f00d */
</style>
4-2. 삼지창 버튼에 :hover 시 -> 빨간 크로스 아이콘(X)
CSS
<style>
.fa-bars:hover:before { content: '\f00d'; color: red; }
#allMenu{
outline: 0;
border: 0; background-color: transparent; /* 배경 투명 */
font-size: 2.5rem;
position: fixed;
top: 2rem;
right: 2rem;
}
</style>
4-3. 삼지창 버튼 '클릭' 시 -> 크로스 아이콘으로 변하도록
제이쿼리 toggleClass
<script>
$(document).ready(function(){
$("#allMenu").click(function(){ //버튼을 클릭하면
$(this).toggleClass('show'); // 그 버튼에 show 클래스를 토글처리해라
// ㄴ> this는 나를 실행시킨 애 (즉, #allMenu)
})
})
</script>CSS
#allMenu가클래스.show를 가질때 i태그에::before 걸어
-> 클릭 시, 크로스 아이콘(유니코드)으로 변하도록
<style>
#allMenu.show i:before { /* #allMenu가.show를가질때 i태그에::before 걸어 */
content: '\f00d'; /* 클릭 시, 크로스 아이콘(유니코드)으로 변하도록 */
}
#allMenu{
outline: 0;
border: 0; background-color: transparent; /* 배경 투명 */
font-size: 2.5rem;
position: fixed;
top: 2rem;
right: 2rem;
}
</style>
