1. Flex 블록 요소인 div 태그를 inline 요소로 만들어 자유롭게 제어할 수 있도록 제공되는 클래스 2. Flex 주요 css 클래스 d-flex : div 태그를 flex 요소로 만들어준다. d-inline-flex : inline flex 요소로 만들어준다. flex-row-reverse, flex-column-reverse : 순서를 반대로 배치한다. flex-row : 가로 방향 원래 순서 flex-row-reverse : 가로방향 반대 순서 flex-column : 세로 방향 원래 순서 flex-column-reverse : 세로 방향 반대 순서 justify-content-* : flex 내부 요소들의 가로 정렬 기준을 설정한다 justify-content-start justify-..

1. 반응형 웹 반응형 웹이란 브라우저의 가로 길이에 따라 사용자가 이용하기 편하도록 html 요소들의 가로 길이나 배치를 바꾸는 것을 의미합니다. 다음 그림은 웹 사이트가 최대창에서 줄어들었을때 태그들이 어떻게 변하는지 나온 결과입니다. 2. iframe, embed 요소 iframe이나 embed 요소는 외부 html 요소를 가져와 보여주는 요소입니다. bootstrap에서는 이러한 요소들의 비율을 설정하고 반응형으로 처리될 수 있도록 클래스들을 지원하고 있습니다. embed 주요 css 클래스 embed-responsive embed-responsive-item embed-responsive-크기 embed-responsive-21by9 embed-responsive-16by9 embed-respo..

1. 길이 (width / height) w-퍼센트 : 가로 길이를 지정된 퍼센트 만큼으로 지정함 h-퍼센트 : 세로 길이를 지정된 퍼센트 만큼으로 지정함 mv-100 : 가로 최대 크기를 100%로 설정함 mh-100 : 세로 최대 크기를 100%로 설정함 길이 none w-25 w-50 w-75 w-100 mw-100 none h-25 h-50 h-75 h-100 mh-100 2. 여백 (margin / padding) 여백은 다음과 같은 양식으로 설정합니다. [내부,외부][방향]-[크기] m : 외부 여백을 설정한다 (margin) p : 내부 여백을 설정한다 (padding) t, b, r, l, x, y : 방향을 설정한다. 생략시 모든 방향 0, 1, 2, 3, 4, 5 : 0em, 0.25e..

1. 공통 클래스 Boostrap에서는 외곽선, 그림자 등과 같은 대부분의 태그에 적용할 수 있는 css 요소들을 클래스로 제공하고 있습니다. 2. 외곽선(border) border : 외곽선이 나타남 border-방향-0 : 지정된 방향을 제외한 나머지 영역에 외곽선이 나타남 border-top-0 border-bottom-0 border-left-0 border-right-0 3. 외곽선 색상 설정 border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white 외곽선 색상 표시 4. 외곽선 모서리 설정 rounded : 외곽선 모서리의 둥근..

1. PopOver 제목과 본문을 가지고 있는 말풍선을 띄울 수 있습니다. 2. PopOver 주요 css 클래스 주요 css 클래스는 없으며 jQuery 코드를 통해 popover 요소로 만들어줍니다. $(function(){ $("#a1, #a2, #a3, ..., #a7").popover(); }); 3. PopOver 기본적인 구성 PopOver Basic 4. PopOver 말풍선 방향 설정 data-placement 속성을 사용하여 PopOver가 출력되는 말풍선의 방향을 설정할 수 있습니다. PopOver 말풍선 방향 결정 PopOver Top PopOver Bottom PopOver Left PopOver Right 5. PopOver 외부를 클릭하여 닫기 PopOver 외부를 클릭하여 닫..

1. ToopTip a태그에 대해 나타나는 말풍선에 대해 css를 적용할 수 있습니다. 2. ToopTip 주요 css 클래스 주요 css 클래스는 없으며 jQuery 코드를 통해 tooptip 요소로 만들어줍니다. $(function(){ $("#a1, #a2, #a3, #a4, #a5").tooltip(); }); 3. ToopTip 기본적인 구성 Bootstrap 4 링크 4. ToopTip 말풍선 방향 결정 data-placement 속성을 설정하여 말풍선이 나오는 방향을 설정할 수 있습니다. Bootstrap 4 말풍선 방향 결정 좌측 우측 위 아래 References source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/m..