[HTML & CSS] marquee / 스크롤 바

[marquee]

• 이번에는 marquee 태그를 적용하여 글자가 움직이는 효과를 적용해봅시다.
• marquee는 글자나 그림 등을 상하좌우로 움직이는 연출을 하고 싶을 때 사용하며, MS에서 Explorer에 적용하기 위해서 만들어낸 태그이다.
• 아래 URL 주소를 참고하여 CSS만을 활용하여 여러가지 형태의 marquee를 확인해보고 실제로 적용시킬 수 있다.
• 참고용 주소 : https://www.quackit.com/css/codes/marquees/

See the Pen 240705(marquee) by psm817 (@psm817) on CodePen.

 

[스크롤 바]

• 이번에는 기존에 존재하는 스크롤 바를 커스텀해봅시다.
• 딱히 필요한 라이브러리는 없으며, CSS만을 활용하여 스크롤 바 디자인을 할 수 있다.

See the Pen 스크롤바 by psm817 (@psm817) on CodePen.

• :root 선택자는 html 태그라고 생각하면 좋다.
• -webkit의 scrollbar를 통해 스크롤 바의 색상을 직접 커스텀하고, 모서리의 둥근 정도를 선택한다.
• 마지막으로 스크롤 바의 너비를 지정해주면 기본적으로 할 수 있는 스크롤 바 커스텀이 완성된다.