반응형 프로그래밍/프론트엔드26 [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. [HTML/CSS] 사이드바 메뉴 만들기 : 나타나는 2차 메뉴 만들기 feat. transform: translate 오늘은 사이드바 메뉴를 만들어 보자. 사이드 메뉴는 이름에 나와 있듯이 사이트의 상단에 위치한 일반적인 메뉴 바와 달리 사이트의 측면에 있는 메뉴 바를 일컫는다. 우리는 이런 사이드바 중에서도 스크롤을 따라오는 메뉴 바를 만들어 사이트의 스크롤이 내려가더라도 항상 화면의 측면에 존재하며, 숨겨진 사이드바가 마우스 포인터를 인식하게 되면 나타나게 되는 사이드바 메뉴를 만들어 보고자 한다. 우선 아래의 완성된 이미지를 보자. 우선 완성된 이미지를 보자 위의 이미지를 보면, 평소에는 왼쪽 벽 속에 숨겨져 보이지 않는 메뉴 바가 마우스 커서를 인식하는 순간 나타나는 구조를 가지고 있는 사이드바의 모습을 보여주며, 2차 메뉴인 드롭다운의 기능 또한 갖고 있다. 시작에 앞서 2차 메뉴의 드롭다운 메뉴를 구현해 보고.. 2023. 5. 16. [HTML/CSS] 드롭다운 메뉴 바 만들기 : 2차 메뉴 만들기 feat. position 오늘은 2차 메뉴의 일종인 드롭다운 메뉴를 만들어 보자. 이번에 만들 메뉴는 마우스를 통해 1차 메뉴를 가리키면 2차 메뉴가 내려오며 나타나는 일명 드롭다운 기능을 구현해 보자. 드롭다운 메뉴는 1차 메뉴보다 많은 수의 항목을 소화할 뿐 아니라, 포괄적인 개념의 메뉴 안에 세세한 개념을 담은 메뉴를 담음으로써 사용자가 원하는 항목을 찾아가는 것에 있어 도움을 줄 수 있다. 그뿐만 아니라 인터페이스를 체계적으로 관리하는 것과 동시에 시각적으로도 깔끔한 느낌을 줄 수 있다는 많은 장점을 갖고 있다. 이러한 메뉴를 position 속성을 이용하여 만들어 보자. 완성된 최종 코드는 포스팅의 마지막에 정리해 두겠다. 우선 완성된 이미지를 보자 가로로 길게 늘어진 하나의 메뉴 박스 안에 4개의 메뉴 항목이 담겨있고.. 2023. 5. 15. 이전 1 ··· 3 4 5 6 7 다음 반응형
