부트스트랩4가 아닌 부트스트랩3를 사용하면 지원하는 기본적인 슬라이드인 캐러셀(carousel)은 아래와 같다. 슬라이드를 이동할 때 보통 삼각형 아이콘을 사용하는데 삼각형이 없을 때 슬라이드를 표시하는 원으로 이동하니 원을 크게 하고 싶었다. 왜냐하면 원을 크게 해야 누르기 쉽기 때문이다. 특히 스마트폰에서는 더욱 그렇다.
예전에 유튜브를 캐러셀에 콘텐츠로 삽입하면 캐러셀의 삼각형 아이콘 때문에 유튜브 재생 및 멈춤을 할 수 없어 삼각형 아이콘을 제거했다. 무슨 말인지 모르면 아래 더보기 안의 유튜브 뮤직비디오를 재생한 후 멈출 수 있는지 해보기 바란다. 삼각형 아이콘을 제거하면 유튜브를 재생 및 멈춤을 자유롭게 할 수 있다. 그때 표시 원을 크게 하고 싶다는 생각을 하게 됐다.
그건 그렇고 부트스트랩3 캐러셀의 표시 원은 .carousel-indicators li에 해당하므로 이 부분을 조절하면 된다는 것을 알았다. 어떻게 알았냐면 크롬 브라우저에서 슬라이드인 캐러셀의 표시 원을 마우스 오른쪽 버튼을 클릭한 후 검사를 누르면 그것이 무엇을 나타내는지 나오므로 간단히 알았다. 그래서 HTML 편집의 CSS에 .carousel-indicators li에 CSS를 추가했다. 그리고 보고 있는 슬라이드는 active니 .carousel-indicators .active에도 CSS를 추가했다.이 블로그는 비슷한 슬라이드인 캐러셀을 많이 사용했으므로 아이디를 덧붙여 특정 캐러셀의 표시 원만 크게 나타나도록 했다. 참고로 부트스트랩4에서도 .carousel-indicators li이 될지 모르겠다.
참고로 네이버 웨일은 구글 크롬과 단축키 및 여러 가지가 비슷하다. 개발자도구(검사)의 단축키인 Shift+Ctrl+I도 같고 아래와 같이 나오는 화면도 같다. 아래 티스토리 홈페이지에 웨일과 크롬으로 검사(개발자도구)한 그림으로 거의 비슷하다는 것을 알 수 있다. 이밖에도 검색기록, 인터넷기록삭제, 작업관리자, 북마크 등 단축키가 같다. 주변에도 외모는 달라도 행동은 비슷한 사람이 있다. 웨일과 크롬은 외모가 달라도 크로미움을 기초로 했기 때문에 비숫하게 동작하고 비슷한 점이 많다.
그래서 아래 캐러셀을 보면 알 수 있듯이 삼각형 아이콘을 삭제한 후 표시 원의 크기를 크게 했다. 표시 원의 색은 .carousel-indicators li로 변경될지 해보지 않아 모르겠다.
위에서는 캐러셀의 삼각형 아이콘으로 하단에서 재생 및 멈춤이 제약이 받았지만 없으면 아래와 같이 삼각을 삭제하면 아무런 제약이 없다. 이동은 크게 확대된 원으로 이동할 수 있다. 확대했으니 스마트폰에서도 쉬울 것이다. 참고로 이 글을 적으면서 캐러셀의 삼각형 아이콘을 삭제하는 법을 적어야겠다고 생각했다. 그리고 유튜브가 로딩하므로 약간만 기다려야 한다.
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩5 알파가 나왔다는 것을 알았다 (0) | 2020.07.28 |
|---|---|
| 벽돌리스트인 Masonry 레이아웃 구현하기 (0) | 2020.07.01 |
| 타임라인 리스트 만들기 (2) | 2020.05.01 |
| 부트스트랩3를 사용한 탭 (0) | 2020.03.13 |
| 부트스트랩 버전 3,4,5 소식 (0) | 2019.11.12 |
| 부트스트랩 버전3과 4에서 가능한 hover, 두번째 (0) | 2019.10.27 |
| 부트스트랩 3과 4에서 모두 가능한 hover 첫번째 (0) | 2019.10.09 |
| 부트스트랩 테마는 무료보다 유료 (0) | 2019.07.29 |
