CH4- sec5 태그를 표현하는 CSS와 Advanced CSS3

<section 05 : 부트스트랩> 

부트스트랩 : html, CSS, JavaScript 반응형 웹 사이트, 모바일 우선 웹 사이트를 쉽게 작성할 수 있도록 해주는 무료 프레임워크

FOR 그리드기반의 디자인, 캐러셀, 모달 등을 쉽게 구현하기 위해

-부트스트랩을 사용하려면 getbootstrap.com에서 부트스트랩을 다운받아서 웹 애플리케이션 프로젝트에 추가하는 방법과 부트스트랩 CDN을 HTML 페이지에 추가하는 방법이 있다

 

-CDN의 순서는 반드시 CSS를 먼저 기술하고  JS는 그 다음 기술한다

 

▶ 그리드 시스템

: 부트스트랩의 그리드 시스템은 12개의 칼럼을 필요에 따라 합쳐서 모양을 구현함.

1칸의 크기는 col-sm-1 이며, 2칸을 합친 크기는 col-sm-2

 

▶.이미지

class 속성 값	의미
rounded	라운드 이미지
rounded-circle	원형 이미지
img-thumbnail	썸네일 이미지
float-start, float-end	이미지 배치 방향
mx-auto(margin:auto) + d-block(display:block)	이미지 가운데 정렬
img -fluid	반응형 이미지

 

 <주요기능> : 자바스크립트를 사용해서 직접 구현해야 했던 캐러셀, 모달, 팝오버를 쉽게 사용하는 방법

▶캐러셀 : 특정 태그가 자동으로 슬라이딩 되면서 다음 이미지를 보여주는 것을 회전하면서 반복하는 기능

▶이미지 모달 : 이미지를 표시하는 일종의 대화상자

화면에 모달 대화상자가 표시된 상태에서는 다른 작업을 할 수 없다

주로 스마트기기와 같은 화면에서 이미지를 좀 더 원본에 가까운 표시를 할 때 사용함

▶팝오버 : 팝오버 컴포넌트는 작은 툴팁을 마우스 버튼을 클릭하거나 마우스를 호버해서 팝업으로 제공함