CSS2 [ css ]요소가 부드럽게 나타나고 사라지게 하려면 opacity를 쓰자 이전에 getBoundingClientRect()에 대해 포스팅에도 쓰였던 이미지다. 이번에는 버튼이나 헤더에 위치한 로고와 네비게이션바를 자세히 보면 스크롤을 내리고 올릴 때 부드럽게 사라지고 부드럽게 나타나는 것을 유심히 보자. display: none 으로도 설정할 수 있지만 해당 요소가 레이아웃에서 완전히 제거되기 때문에 다른 요소가 해당 공간을 채우게 될 수도 있고 요소의 위치가 변경되기도 한다. opacity 의 경우에는 여전히 레이아웃에 존재하면서 단지 보이지 않을 뿐이다. 마우스를 해당 요소의 위치에 가지고 가면 포인터가 보이는데, 보이게 하기 싫다면 pointer-events: none 으로 해주면 포인터가 표시되지 않는다. 해당요소의 공간을 사용하지 않으려면 visibility: hid.. 2023. 8. 3. [ CSS ] font-size (폰트 사이즈) rem 과 em이 뭐죠? rem 과 em 은 CSS에서 사용되는 상대적인 길이 단위 rem (Root EM) 최상위 요소인 의 폰트 크기 기준으로 설정된 길이. 요소의 폰트 크기를 1rem으로 간주하여 이를 기준으로 상대적인 크기를 지정한다. ex) 3rem이라고 하면 현재 폰트 크기의 3배 em (EM) 현재 요소의 폰트 크기를 기준으로 설정된 길이. 상위 요소의 폰트 크기를 상속받아 계산된다. ex) 부모 요소의 폰트 크기가 18px이고 자식요소의 폰트 크기가 1.5em이면 27px html 폰트크기가 커져도 상관없이 해당 요소의 상위요소 크기를 기준으로 계산됨. rem이나 em을 쓰는 이유는? rem이나 em은 상대적인 길이 단위이기 때문에 반응형 웹 디자인을 구현하거나 유연한 레이아웃을 만들 때 유용하다. rem은 루트 .. 2023. 8. 2. 이전 1 다음
