반응형 웹 프로그래밍/프론트엔드23 [HTML/CSS] 드롭다운 메뉴 바 만들기 : 2차 메뉴 만들기 feat. position 오늘은 2차 메뉴의 일종인 드롭다운 메뉴를 만들어 보자. 이번에 만들 메뉴는 마우스를 통해 1차 메뉴를 가리키면 2차 메뉴가 내려오며 나타나는 일명 드롭다운 기능을 구현해 보자. 드롭다운 메뉴는 1차 메뉴보다 많은 수의 항목을 소화할 뿐 아니라, 포괄적인 개념의 메뉴 안에 세세한 개념을 담은 메뉴를 담음으로써 사용자가 원하는 항목을 찾아가는 것에 있어 도움을 줄 수 있다. 그뿐만 아니라 인터페이스를 체계적으로 관리하는 것과 동시에 시각적으로도 깔끔한 느낌을 줄 수 있다는 많은 장점을 갖고 있다. 이러한 메뉴를 position 속성을 이용하여 만들어 보자. 완성된 최종 코드는 포스팅의 마지막에 정리해 두겠다. 우선 완성된 이미지를 보자 가로로 길게 늘어진 하나의 메뉴 박스 안에 4개의 메뉴 항목이 담겨있고.. 2023. 5. 15. [HTML/CSS] 1차 메뉴 바 만들기 : inline-grid를 이용하자 체계적인 메뉴 바를 만들려면 어떻게 해야 할까? 정답은 없지만, 오늘은 유지 및 보수가 편하고, 체계적으로 관리할 수 있는 방법으로 inline-grid 속성을 이용하여 보자. 여기서 inline-grid의 속성을 그대로 사용해도 좋지만, 오늘은 연습을 위해 좀 더 가시적으로 이해하며 코딩하기 위해서 inline-grid 속성을 따로 만들어서 사용하여 보자. 완성된 코드는 포스팅의 마지막에 정리해 두었다. 이번 포스팅은 지난 포스팅에서 이어지는 내용이니 아래의 지난 포스팅을 참고해 주기 바란다. [HTML/CSS] 1차 메뉴 바 만들기 : 마우스를 인식해 보자 [HTML/CSS] 1차 메뉴 바 만들기 : 마우스를 인식해 보자 오늘은 기초적인 1차 메뉴를 만들어 보자. 이번에 만들 메뉴는 마우스를 인식하면.. 2023. 5. 14. [HTML/CSS] 1차 메뉴 바 만들기 : 마우스를 인식해 보자 오늘은 기초적인 1차 메뉴를 만들어 보자. 이번에 만들 메뉴는 마우스를 인식하면 메뉴 요소가 반응을 하는 기능을 포함한 깔끔한 느낌의 메뉴이다. 메뉴 바는 다양한 부류의 정보를 담고 있는 메뉴들의 이름을 핵심 단어를 통해 지정함으로써 처음 이용하는 사용자에게도 해당 메뉴에 담겨있는 정보들의 내용을 짐작할 수 있게 만들어 준다. 따라 다양한 사이트에서 사용되고 있는 메뉴 바는 사이트에 처음 접속한 사용자에게 찾고자 하는 정보를 찾아갈 수 있도록 내비게이션 역할을 해줄 수 있으며, 사이트 관리자는 보다 체계적으로 사이트를 운용할 수 있게 된다. 우선 완성된 이미지를 보자 상단의 중앙에는 사이트의 로고를, 그 하단에는 메뉴들이 존재하게 되며, 마우스 포인터를 'Study' 메뉴에 올려두게 되면 해당 메뉴의 글.. 2023. 5. 13. 이전 1 ··· 3 4 5 6 다음 반응형
