반응형 CSS16 [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] Position (absolute와 relative) & z-index를 활용해 보자 이번 포스팅에서는 position 속성 중 absolute와 relative 값에 대해 알아보는 시간을 가지자. absolute와 relative는 우리가 앞으로 공부하며 계속해서 등장할 수밖에 없는 필수 개념이기 때문에 개념을 외우는 것보다 작동 메커니즘을 이해하는 것을 추천한다. 본격적으로 속성을 적용해 보기 전에 우리가 알아야 할 것은 간단하다. position 속성을 이용해 문서상에서 요소를 배치하는 방법을 지정한다. left, right, top, bottom 등의 속성을 이용하여 요소의 위치를 결정한다. z-index 속성을 이용해 요소 간의 수직 위치를 지정할 수 있다. 먼저 absolute에 대해 알아보자 body { background-color: #999; } .paper-box { b.. 2023. 5. 19. [HTML/CSS] transform-origin & rotate를 사용하자 : 변신하는 아이콘 만들기 feat. position 오늘은 간단하게 반응하는 화살표 아이콘을 만들어 보자. 오늘 만들 아이콘은 transform-origin 속성과 transform 속성의 rotate 값을 이용하여 회전하는 아이콘을 만들어 볼 것이다. 해당 아이콘이 사용된 모습이 보고 싶다면, 하단의 링크를 참고해 보기 바란다. 우선 완성된 이미지를 살펴보자 위의 이미지에 보이듯이 평상시에는 '≡' 모양을 유지하다가 hover 기능에 의해 마우스를 인식하게 되면 아이콘의 각 막대가 회전하며 '↓' 모양으로 변화하는 것을 볼 수 있다. 아래의 링크에서는 측면에서 나타나는 사이드바 메뉴의 모션 맞추어 반응하는 아이콘이 사용되었다. [HTML/CSS] 사이드바 메뉴 만들기 : 나타나는 2차 메뉴 만들기 feat. transform: translate [HTM.. 2023. 5. 18. 이전 1 2 3 4 다음 반응형
