JavaScript/Bootstrap(32)
-
[Bootstrap] Alert
1. Alert 경고창을 표시하는 용도로 사용하는 UI 요소 2. Alert 주요 css 클래스 Alert 클래스 alert : 주어진 영역을 Alert으로 생성 Alert 색상 클래스 alert-success alert-info alert-warning alert-danger alert-primary (BS4) alert-secondary (BS4) alert-light (BS4) alert-dark (BS4) Alert-Link 클래스 alert-link : Alert 내의 a 태그에 설정하는 css 클래스로써 태그의 문자열과 같은 색상, 굵기로 설정됨 alert 적용 이전 Success Alert입니다. alert 클래스 alert Alert입니다. alert-success 클래스 alert-suc..
2022.05.26 -
[Bootstrap] 점보트론(jumbotron)
1. jumbotron 클래스 사각의 영역을 잡고 그 안에 HTML을 꾸밀 수 있도록 제공되는 UI 요소 2. 주요 CSS 클래스 jumbotron : 지정된 영역을 jumbotron으로 생성 Jumbotron-fluid (BS4) : 영역의 모서리가 각 지게 설정됨 jumbotron 클래스 문자열입니다. Jumbotron 클래스 문자열입니다. Jumbotron 문자열입니다. References source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Jumbotron/src/main/webapp [인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial
2022.05.26 -
[Bootstrap] 이미지(Image)
1. img 태그를 위한 클래스 rounded(BS4), img-rounded(BS3) : 이미지의 모서리를 둥글게 함 rounded-circle(BS4), img-circle(BS3) : 이미지를 둥글게 함 img-thumbnail : 썸네일 이미지를 사용하기 위해 미리 정의된 디자인을 적용함. 브라우저 가로 길이에 따라 축소됨 float-left, float-right (BS4) : 이미지를 좌, 우측 정렬함 mx-auto + d-block (BS4) : 이미지를 중앙에 정렬 img-fluid(BS4) : 브라우저 가로 길이에 따라 축소됨 img-responsive (BS3) : 브라우저 가로 길이에 따라 축소됨 rounded 클래스 rounded-circle 클래스 img-thumbnail 클래스 ..
2022.05.26 -
[Bootstrap] 테이블(Table)
1. table 태그를 위한 클래스 table : table 태그에 적용할 기본 클래스 table-striped : td 태그 부분이 흰색과 회색으로 번갈아 가며 표시됨 table-bordered : 외곽선이 표시됨 table-hover : row에 마우스를 올리면 색상이 변경됨 table-dark : 테이블의 배경이 검정색으로 설정됨 (BS4) table-borderless : 모든 선이 사라짐 (BS4) table-condensed : row의 높이가 줄어듬 (BS3) table-sm : row의 높이가 줄어듬 (BS4) 2. table row 색상 설정 클래스 table-primary (BS4) table-success (BS4), success(BS3) table-danager (BS4), dan..
2022.05.26 -
[Bootstrap] 색상 클래스
1. 색상 클래스 웹 애플리케이셔은 글자 색, 배경 색 등의 색상 설정이 가능함 Bootstrap에서는 색상을 간편하게 설정할 수 있도록 css 클래스로 제공하고 있음 2. 글자색 클래스 text-muted text-primary text-success text-info text-warning text-danger text-secondary (BS4) text-dark (BS4) text-body (BS4) text-light (BS4) text-white (BS4) 글자색 색상 클래스 muted 색상 primary 색상 text-success 색상 text-info 색상 text-warning 색상 text-danager 색상 text-secondary 색상 text-dark 색상 text-body 색..
2022.05.25 -
[Bootstrap] 문자열 클래스
1. 문자열 클래스 HTML에서 제공하고 있는 문자열 관련 CSS에서 더 세밀하게 꾸밀수 있도록 다양한 클래스를 제공하고 있습니다. Bootstrap 4 Bootstrap 3 글자크기 16px 14px 줄간격 1.5 1.428 폰트 Helvetica Neue, Helvetica, Arial, Sans-serif 브라우저 기본 폰트 2. H1 ~ H6 주로 제목을 표시하는 용도로 사용하는 HTML 태그로써 Bootstrap은 각각 문자열 크기와 굵기, 폰트 등을 기본적으로 설정해두었습니다. Bootstrap 4 h1 문자열(40px) h2 문자열(32px) h3 문자열(28px) h4 문자열(24px) h5 문자열(20px) h6 문자열(16px) Boostrap 3 h1 문자열(36px) h2 문자열(3..
2022.05.25