백.전.백.승.

배경에 나오는 유튜브는 [파묘] 입니다. 그리고 이전은 [윙카] 이었습니다. 참고로 유튜브 배경 멈춤, 소리, 재생 등은 오른쪽 상단 플레이바를 사용하면 됩니다.

Made with Bootstrap 3 And Powered by Tistory

부트스트랩 4.0 정식이 나오기 전에 예전에 적었던 부트스트랩 3.0에 대한 글을 발행해야겠습니다. 지금 부트스트랩 4 알파(Alpha)까지만 나와 부트스트랩 공식 홈페이지를 보면 알겠지만 3.3.6을 배포하고 있거든요. 이 블로그도 부트스트랩 3.3.6을 사용하고 있거든요. 4.0은 정식이 나오면 그때 생각해보려고요. 알파 버전은.....때를 놓치면 예전에 적었던 글이 묻히거든요. 여담으로 제가 알기로 프로그램에서 알파 버전은 베타나 정식 버전에 먼저 나오는 베타보다 더 불안정한 버전으로 알고 있습니다. 참고로 위키백과에 알파에 대한 정의를 아래와 같이 하고 있습니다.


알파(Alpha)는 소프트웨어 생명 주기의 한 단계로, 소프트웨어 테스트를 시작하는 첫 단계이기도 하다. 알파 소프트웨어는 불안정할 수 있고 충돌이나 데이터 손실을 일으킬 수 있다. - 출처 : 위키백과

쓸데없는 말이 길었네요. 이 블로그 아래에 있는 부트스트랩 슬라이더(Bootstrap Carousel)에 대해 말하려 합니다. 이미지가 있다고 콘텐츠에 이미지를 쓴 것이 아니라 CSS에 배경 이미지를 설정한 것이라는 알기 바랍니다. 부트스트랩 슬라이더 소스에 이미지가 있다고 항상 콘텐츠에 이미지가 있어야 하는 것이 아닙니다.


2016/02/23 - 부트스트랩 슬라이더 두 번째에서 적었듯 item안에 콘텐츠를 삽입한다고 말했습니다. 그래서 저는 item안에 콘텐츠를 넣었습니다. 아래 이미지를 보면 이미지가 있는지 보면 없다는 것을 알 것입니다. 이상하다 할 것입니다. 분명 슬라이더를 봤다면 이미지가 나왔는데 이미지가 없다니....이미지는 CSS 설정으로 나오게 했습니다. 아래 그림에서 seciton id="footer2"라고 정의했으니 그것에 정의했습니다. 



위에서 이미지를 footer2에 설정했다고 말했습니다. 그럼 어떻게 설정했는지 아래 이미지를 보면 알 수 있습니다. footer2의 배경 이미지로 설정한 것입니다. background-size:cover는 익스플로러 9 이상에서만 된다고 2015/11/24 - 다양한 배경을 익혔다에서 적었습니다. 왜 이미지인데 url에 이미지 파일 형식이 없냐하면 이미지를 글에 올려 URL을 가져오면 jpg,gif,png 등 파일 형식이 나타나지 않습니다.

이 블로그 하단 슬라이더가 매끄럽지 않은 이유가 배경 이미지 크기가 다르기 때문입니다. 그러니 어떤 트러짐 없이 움직이게 하고 싶다면 같게 하세요. 참고로 사진은 상업적으로 질 좋은 사진을 많이 구할 수 있는 https://pixabay.com/에서 얻었습니다.



아마 위 말이 무슨 말인지 모르는 사람이 대부분일 것인데 골치 아프게 이해하려고 하지 말고 모르면 넘어가세요. 부트스트랩을 공부하는 분에게는 도움이 될까 모르겠습니다.


그리고 부트스트랩은 이미지 등이 슬라이드 되는 효과 구현을 Slider라 하지 않고 Carousel(캐러셀)이라고 하니 Slider라는 영어를 찾지 마세요. 예전에 carousel의 뜻을 찾았더니 회전목마, 공항의 수화물 컨베이어 벨트였습니다. 구글에서 carousel 이라고 이미지 검색하면 회전목마와 관련된 이미지만 검색됩니다.




설명했는지 모르나 이 블로그 사이드바에 있는 유튜브 동영상 슬라이더도 부트스트랩 Carousel을 사용했습니다. 부트스트랩을 사용한다면 부트스트랩에 있는 carousel을 사용하면 너무 쉽거든요. 이래서 부트스트랩을 사용한 스킨을 대부분 비슷하니 독창적인 맛이 없습니다. 이런 것이 부트스트랩(Bootstrap)의 장점이자 단점인 것 같습니다.


'IT.인터넷.생활 관련/부트스트랩' 관련된 글 MORE



Close 방명록
×

카테고리




×
×