카드 오버레이

부트스트랩 2018. 11. 29. 17:43


이 글에서 특별한 것을 설명하려는 것이 아니다. 부트스트랩4에서 지원하는 아래와 같은 카드 오버레이에 대해 적으려는 것이다. 카드 오버레이는 부트스트랩을 사용하지 않고도 얼마든지 사용할 수 있지만 부트스트랩4에 카드 오버레이에 대한 클래스가 있다는 것을 알았으면 한다.


 

날카로우나 더운지라 피어나는 이상의 관현악이며, 천고에 고행을 위하여, 것이다. 이상, 천지는 과실이 대중을 끓는다. 인생의 풀이 그들의 피가 있는 끓는 이상이 노년에게서 무엇을 있는가? 우리는 가는 그러므로 것이다. 바로 피어나기 이상이 피는 노년에게서 것이 것이다. 긴지라 피는 우는 그들의 청춘의 힘차게 불어 힘있다.

부트스트랩4의 card에서 card-img-overlay라는 클래스가 생겨 이미지 위에 위 그림처럼 텍스트를 삽입하려고 하면 간단히 class="card-img-overlay"라고 해주면 된다. 그래서 이 글에서 사용한 코드에 대한 그림은 아래와 같다. 다시 적지만 card는 부트스트랩4에서만 작동한다. 즉 card는 부트스트랩4에서 나왔다. 참고로 아래 그림에서 mx-auto, text-center,text-white 등 코드 대부분은 부트스트랩과 관련 있다. 중앙에 배치하는 mx-auto는 부트스트랩4를 알아야 이해될 것이다.



부트스트랩3에서 이것을 하기 위해 https://www.w3schools.com/howto/howto_css_image_text.asp에 나온 방식으로 한 적이 있다. 이미지 위에 텍스트를 삽입하기 위해 CSS를 삽입해야 했다. 


About. 블로그, 부트스트랩,프로그램 등 유용한 정보를 마음껏 적고 있습니다.
전체 방문자 수 명은 2003.11.부터 누적된 방문자 수입니다. 그리고 아래 그래프는 일주일 간 방문자 통계입니다.