반응형 프론트엔드12 [HTML/CSS/JS] JQuery의 addClass와 removeClass : 엘리먼트에 클래스를 추가, 삭제해 보자 자바스크립트를 통해 엘리먼트에 클래스를 추가하고 삭제해 보자. 미리 CSS에 해당 클래스에 필요한 속성들을 정의해 둔 다음, 이벤트가 필요한 엘리먼트에 클래스를 추가하는 방식으로 이벤트를 줄 수 있다. 그냥 처음부터 자바스크립트를 통해 엘리먼트에 직접 CSS 작업을 해주면 안 되는 걸까? 물론 가능하지만, JS에 CSS 코드가, HTML에 CSS 코드가 존재하는 것은 코드의 유지·보수 측면에서도, 코딩을 하는 면에서도 효율적이지 못하다고 생각을 한다. 각자의 코드가 자신의 역할을 적절히 수행할 수 있도록 addClass와 removeClass에 대해 알아보자. 활용 예시를 보자 버튼1을 누르면 상자가 커지며 파란색으로 변하고, 버튼2를 누르면 파란색이 빠지며 원래의 크기로 돌아간다. 우선 addClass.. 2023. 5. 28. [HTML/CSS] 사이드바 메뉴 만들기 : 늘어나는 2차 메뉴 만들기 feat. overflow: hidden 지난 포스팅에서는 transform 속성을 이용하여 미리 만들어둔 사이드바 메뉴를 화면 너머로 숨겨놨다가 나타나게 하는 방식으로 사이드바 메뉴를 만들었다. 잘못된 방식은 아니지만, 개인마다 사용하는 화면의 크기와 비율이 다르기 때문에 알맞다고 하기에는 부족한 느낌이 든다. 이번 포스팅에서는 실제로 너비가 늘어나며 메뉴가 등장하는 사이드바 메뉴를 만들어 보자. 우선 완성된 이미지를 보자 화면의 좌측에 아이콘만 보이는 메뉴바가 마우스를 인식하면 늘어나게 되면서 2차 메뉴들이 나타나는 것을 볼 수 있지만, 이미지만 봐서는 지난 포스팅에서 만든 사이드바와의 차이를 알 수 없다. 지난 포스팅과 가장 큰 차이는 이번 포스팅에서 만들 사이드바 메뉴는 실제로 늘어나는 형태이기 때문에 위치를 수정할 필요가 없어 tran.. 2023. 5. 22. [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 2 3 다음 반응형
