📌 util menu - icon
아이콘을 활용하여 메뉴바를 제작할 때 알아두면 유용한 것들을 소개해 보겠습니다☺️
class="indent"를 만들어 적용
<!-- html code -->
<div class="util_menu_icon">
<ul>
<li class="list0"><a href="#"><span class="indent">HOME</span></a></li>
</ul>
</div>여기서 class="indent" 는 css setting file에 만들어 놓은 속성으로
text-indent(글자 들여쓰기) 속성을 최대한 많이 주어 화면상에는 보이지 않고,
제작자가 쉽게 알아볼 수 있도록 표시해놓는 용도이다..indent{ display:block; text-indent:-9999px; }
background-image 적용
배경이미지를 적용할 떄는 반드시 가로, 세로 크기가 있어야 함
/* 이미지 사이즈 지정 */ .util_menu_icon ul li{width: 100px; height: 15px;} /* li의 각 클래스에 배경이미지 적용 */ .util_menu_icon ul .list0{background: url(../image/util_off_01.png) no-repeat center center;}
📌 float으로 메뉴바 정가운데 정렬하기
메뉴바를 화면의 정가운데로 정렬하기 위한 방법이다!
nav > ul > li 구조의 메뉴바에서 li에 float 속성을 사용했다면, ul과 nav(최상위)요소에 필수로 집어넣어야할 속성이 있다
/* 최상위(nav) */
#nav{text-align:center;}
/* 상위 부모(ul) */
#nav>ul{display:inline-block;}
/* 자식(li) */
#nav>ul>li{float:left;}📌 li에 "color 속성" 적용 가능하도록 만들기
li 안에 a태그가 있는 경우는 li에 넣는 color 속성은 적용되지 않는다
따라서, a태그가 있는 경우는 color를 a태그에 적용해야 한다
👉 해결방법
: setting file(common.css) 안에서 a태그에 "color: inherit;" 속성을 넣어 부모(li)의 color를 상속받도록 만들어 li에도 color를 넣을 수 있게끔 만든다!
📌 주메뉴 현재위치 활성화 기능
위에서 li에도 color 속성을 적용 가능하도록 만들었기 때문에
현재위치 활성화 기능을 구현할 수 있게 되었다.
1. Sub menu가 있는 경우
(* 현재위치 활성화 기능=서브메뉴에 hover했을 때 주메뉴에도 hover 효과를 주어 현재위치를 알 수 있도록 해주는 기능)
: li에 hover 효과를 준다!
#nav>ul>li:hover{background:#f00; color:#fff;}만약 a태그에 hover를 적용할 경우 주메뉴에서 서브메뉴로 내려갈 때 주메뉴의 오버효과가 없어짐
#nav>ul>li>a:hover{background:#f00; color:#fff;}why? a안에는 포함된 자식이 없기 때문에 a태그 부분만 오버효과가 나타나지만, li는 모든 자식을 포함했기 때문에 주메뉴 오버효과가 남아있는 것
2. Sub menu가 없는 경우(.active)
해당 이미지처럼 서브메뉴가 없을 때 현재위치 활성화 기능을 만들려면,
① active라는 class를 만들어 hover를 안 해도 한 것처럼 보여주자
/*css*/ nav ul li.active{background: #502e14;}<!--html--> <li class="active"><a href="#">OUR CLIENT</a></li>
이때, .active가 적용된 태그에 hover효과를 또 더하게 되면 중첩으로 인해 에러가 뜰 수 있다
② .active를 제외한 나머지에 hover효과를 적용해야 함
👉 ":not(제외할 부분):hover"
nav ul li:not(.active):hover{background: #502e14;}📌 a태그의 링크 오버영역 늘리기
만약 a링크를 텍스트에 걸었다면, a태그의 링크 오버영역은 딱 테스트에만 한정된다
링크 오버영역을 늘리기 위해서는(=텍스트 주변 부분도 영역으로 포함시키기 위해서는) a태그를 block 형식으로 바꾸면 된다!
(👉 대부분 a에 block을 걸자)
nav ul li a{display: block;}* 상단 이미지는 hover영역을 텍스트 주변으로 넓게 잡아놓았기 때문에 a태그를 block으로 만들면 해당 부분이 링크 오버영역에 포함된다.
📌 :hover를 어디 붙이냐에 따라 의미가 달라짐
#nav>ul>li:hover ul{display: block;}👉 주메뉴에 해당하는 li에 마우스 오버를 하면 자식인 서브 ul을 보이게 해주세요~
📚 Reference
: 국비지원 수업
