[css] 내비게이션(gnb) 만들기 04 - 마우스 올릴 때만 나오게 하기

---

내비게이션 마우스 올릴 때만 나오게

안녕하세요. 개자이너 씸플레이입니다.

하위 카테고리가 평소에는 가려져있다가 마우스를 올렸을 때만 나오게 만들어보겠습니다.

---

1. 감추기

평소에는 안 보이게

① 감출 부분 확인

 

• 감추고 싶은 부분을 확인해봅니다.
• 하위 카테고리는 평소에는 보이지 않다가 마우스를 올리면 보이게 만들고 싶습니다.

 

display:none;

② display:none;

 

• display는 말 그대로 어떻게 보이는지를 결정할 수 있는 css 속성입니다.
• 속성 값으로 none을 쓰면 없다. 즉, 보이지 않게 됩니다. 
• 여기서 문제는 선택자를 어떻게 잡으면 좋을까 하는 것입니다. 
• css는 선택자만 잘 잡아도 코드를 깔끔하게 작성할 수 있습니다. 좋은 방법을 항상 발견하려고 노력해봅시다.

 

클래스를 기준으로

.gnb>li ul{ display:none; }

 

③ 클래스를 기준

 

• 일단 기준점이 있다면 한결 편합니다.
• 클래스가 있다면 더욱 편하죠. 여기는 클래스가 있으니 클래스를 기준으로 생각해보겠습니다.
• gnb라는 클래스 안의 <li>태그, 그리고 그 안의 <ul>태그가 저희가 css를 넣어주어야 하는 부분입니다.
• > 이 꺽쇠가 자식 태그 중에서만 선택할 수 있게 하는 기호인 것을 저번 시간에 배웠습니다.
• 자 이제 한 단계 더 안으로 들어가는데 여기는 <ul>태그가 하나죠.
• 그럼 꺽쇠 까지는 필요가 없으니 한 칸 띄어쓰기를 하고 적어줍니다.

하위 카테고리가 감춰진 모습

④ 확인

 

• css가 잘 적용되었는지 확인해줍니다.
• 하위 카테고리가 보이지 않으면 잘 적용된 것입니다.

---

2. 마우스를 올릴 때

<li>에 마우스 올렸을 때

① 선택자 찾기

 

• 위에서 말했듯 선택자만 잘 찾아도 반은 진행됩니다.
• 카테고리에 마우스를 올렸을 때 하위가 나오게 하고 싶은 것이니 그 전체를 감싸고 있는 <li>태그를 선택자로 잡아주시면 됩니다.
• <a> 태그로 잡으셔도 괜찮지만 감싸는 태그가 영역이 좀 더 넓기 때문에 <li>태그를 추천드립니다.

 

.gnb>li:hover{  }

 

 

 

② :hover

 

• 마우스를 올렸을 때 css를 관리해주는 것은 hover라고 합니다. 
• 다만 이 친구는 속성이 아니고 상태를 나타내는 것이니 선택자 뒤에 붙여줍니다.
• 위 코드에서 보는 것처럼 li뒤에 :hover 이렇게 적어줍니다.
• 그리고 다른 css 속성을 적듯이 안쪽 중괄호 안쪽에 입력해주면 됩니다.

320x100

---

3. 다시 나타나게

.gnb>li:hover{
   ul{ display:block; }
}

 

① ul

 

• 그렇다면 다시 나타나게 하는 코드는 어떻게 쓸까?
• 위에서 hover를 넣은 선택자에 ul{ display:block; } 를 통째로 넣어줍니다.
• 마우스를 올렸을 때 안에 있는 <ul> 태그의 상태를 display:block;로 바꾸겠다는 의미입니다.
• 이때는 이미 <li>까지 선택이 되어있기 때문에 자식 태그만 적어주셔도 됩니다.
• 여기서 block은 display의 기본 상태입니다. 블록에 대한 더 자세한 설명은 지난 시간에 했으니 생략하겠습니다.

 

 

마우스를 올려보자

② 확인

 

• 마우스를 카테고리 위에 올려서 제대로 동작하는지 확인해봅시다.
• 하위 카테고리가 나타난다면 제대로 적용이 된 것입니다.

 

[같이 보면 좋은 글]

[coding/html + css] - [css] 내비게이션(gnb) 만들기 03 - 가로로 정렬하기

[coding/html + css] - [html] 내비게이션(gnb) 만들기 02 - 페이지 주소 팁

---

그럼 이만.

총총.