이 글에서 부트스트랩 5에서 지원하는 아코디언에 대해 적으려고 한다. 여기에서 적으려는 아코디언은 현악기를 말하는 것이 아니라 부트스트랩 5의 아코디언이다. 제목(?)을 클릭하면 접혀있던 내용이 보이는 스크립트다. 실제로 보기 위해서 부트스트랩 버전 3의 아코디언은 아래와 같다.
아래에서 볼 수 있는 아코디언은 부트스트랩이 포함하고 있다. 그러므로 부트스트랩에서 아코디언 코드를 작성하면 된다. 그리고 버전 4도 3과 비슷하다.*
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
위가 부트스트랩 3에서 아코디언 예인데 5와 많이 다르다. 아래는 부트스트랩 버전 5의 아코디언으로 5에서 아이콘이 있고 제목을 클릭하면 3에서는 제목에 밑줄이 생기지만 5에서는 제목 영역 전체에 색이 변한다. 그리고 3에서 제목을 적은 영역만 클릭해야 내용을 볼 수 있지만 5에서 제목을 적은 전체 영역을 클릭하면 된다.
글보다는 아래 부트스트랩 버전 5의 아코디언을 보고 직접 이해했으면 한다. 참고로 4도 3과 비슷하여 아이콘이 없고 밑줄만 생긴다.
위 아래 모두 부트스트랩 아코디언인데 다른 점은 위는 버전 3이고 아래는 버전 5이다. 위아래를 보면서 3과 5의 차이를 확인했으면 한다. 참고로 이 블로그는 부트스트랩 버전 3으로 만들었으므로 바로 3 소스를 삽입하여 아코디언을 만들 수 있다. 하지만 5인 경우는 아래처럼 코드 펜에서 만들어 소스를 삽입했다.
내 추측에 부트스트랩 5 아코디언은 비록 소리가 안 나지만 악기인 아코디언과 비슷하여 명칭을 아코디언이라 한 것 같다. 아래 영상을 보면 아코디언을 연주하는 사람을 볼 수 있다.
아코디언 연주
위 영상은www.pexels.com/ko-kr/에서 구했다. 그 홈페이지는 한글을 지원하고 pixabay에 없으면 pexel을 찾는다. 개인적으로 한글을 지원하는 사이트가 마음에 들어 자주 이용한다. 사이트가 한글 검색어도 되므로 accordion 뿐만 아니라 아코디언이라고 검색하면 위 동영상이 나온다.
ABOUT : 티스토리를 포함하여 다양한 블로그, 모바일 앱, 웹, 웹 앱, 프로그램, 브라우저 등 도움이 될만한 유용한 정보를 적고 있다. 그런데 티스토리를 오래 해서 이제는 쓸 것이 마땅하지 않다. 중복되는 내용도 많아 짜증 날 것이며 나도 그 글을 볼 때 짜증 난다..
