이 글에서 특별한 것을 설명하려는 것이 아니다. 부트스트랩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를 삽입해야 했다.
티스토리블로그,인기글 치환자 (0) | 2018.11.22 |
---|---|
부트스트랩4로 변경하기 포기했다. (0) | 2018.11.17 |
글목록이 마음대로 안돼 골치다. (0) | 2018.09.28 |
부트스트랩4의 기본 캐러셀(carousel) (0) | 2018.09.22 |
모달에 유튜브 나오게 (0) | 2018.09.20 |