[HTML, CSS] 도서 라이브러리 프레임 클론

🌈 미리 보기

---

 

⌨️ 소스

See the Pen challenge_6 by 유지원 (@jiyajiwon) on CodePen.

 

 

💻 결과

아래에서 실제로 어떻게 작동하는지 테스트 해볼 수 있다.

 

💬 특징

✔️ overflow-x 사용하여 수평 방향 스크롤바 만들기

css에서 container 클래스에 overflow-x 를 설정하였다.

overflow-x: scroll; 이라고 입력하면 된다.

스크롤바를 넘기면 그 뒤의 내용을 볼 수 있다.

 

✔️ -webkit- 이용하여 스크롤바 꾸미기

-webkit-scrollbar{ }, -webkit-scrollbar-thumb{ }, -webkit-scrollbar-webkit-scrollbar-track{ }을 이용하여

스크롤바를 꾸몄다.

 

---

 

🎈 느낀 점

 

스크롤바를 사용하려면 단 한 줄만 입력하면 된다는 것이 신기했다.