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

안녕하세요. 개자이너 씸플레이입니다. 하위 카테고리가 평소에는 가려져있다가 마우스를 올렸을 때만 나오게 만들어보겠습니다. 1. 감추기 ① 감출 부분 확인 감추고 싶은 부분을 확인해봅니다. 하위 카테고리는 평소에는 보이지 않다가 마우스를 올리면 보이게 만들고 싶습니다. ② display:none; display는 말 그대로 어떻게 보이는지를 결정할 수 있는 css 속성입니다. 속성 값으로 none을 쓰면 없다. 즉, 보이지 않게 됩니다. 여기서 문제는 선택자를 어떻게 잡으면 좋을까 하는 것입니다. css는 선택자만 잘 잡아도 코드를 깔끔하게 작성할 수 있습니다. 좋은 방법을 항상 발견하려고 노력해봅시다. .gnb>li ul{ display:none; } ③ 클래스를 기준 일단 기준점이 있다면 한결 편합니다..

coding/html + css · 2021. 2. 23. 09:30

[html] 내비게이션(gnb) 만들기 01 - 내비게이션 구조를 짜보자

안녕하세요. 개자이너 씸플레이입니다. 오늘은 내비게이션 구조를 짜 보겠습니다. 1. ① (네브) 태그는 navigation의 앞 세 글자를 따온 태그입니다. 사실 태그 이름이 거의 그런 식이라 영어를 잘 알면 편해요. 저는 잘 몰라오. 망해써오. 삼성전자 홈페이지를 예로 들어 보자면 빨간 박스로 표시된 부분이 내비게이션입니다. 말하자면 카테고리죠. 반드시 써야 해! 까지는 아니지만 태그만 봐도 어떤 내용이 있는지 알 수 있으니 유지보완에 도움이 된답니다. 2. html 자자 하나씩 살펴볼 거니까 걱정 말고 따라와 주세요. ① 위에서 살펴봤듯 내비게이션 태그입니다. 처럼 감싸주는 태그로 사용합니다. 카테고리를 감싸주는 태그로 써주세요. ② & 은 unorderde list. 즉, 순서가 없는 목록을 만들 ..

coding/html + css · 2021. 2. 10. 09:30

[html] nav태그

안녕하세요. 플입니다. 오늘은 nav태그를 이용해 메뉴를 만들어봤습니다. https://youtu.be/4kNNcnqQ42g 오늘은 영상으로 대체하겠습니다. 코딩 화면을 한번 찍어봤습니다. About Portfolio Contact 전체 코드를 남겨둡니다. 태그는 메뉴를 감쌀 때 주로 사용하는 태그입니다. 보통 태그 안에 gnb메뉴를 넣습니다. 그럼 이만. 총총.

coding/html + css · 2019. 8. 28. 07:30