BS 소개
반응형 모바일 우선 웹사이트 구축 위한 HTML CSS JAVASCRIPT 중심의 프레임워크(= 홈페이지 틀)
쉽게 빠르게 반응형 모바일 웹 사이트 구축을 가능하게 해줌.
HTML CSS JS 등을 이용해 폼, 버튼, 테이블, 메뉴 등 다양한 요소의 멋진 반응형 디자인이 구축되어 있음. ※ 반응형 웹은 접속자의 사용 기기의 크기에 맞게 웹사이트가 유동적으로 최적의 화면으로 변하는 걸 말함.
BS 관련좌표 ★
BS3 CDNhttps://www.bootstrapcdn.com/
BS3 무료테마
https://bootswatch.com/3/
https://www.bootstrapcdn.com/legacy/bootswatch/ (bootswatch 3 CDN)
BS3 매뉴얼
http://bootstrapk.com/ (한국어)
https://www.w3schools.com/bootstrap/default.asp (영어)
BS3 클래스 모음
https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp
BS3 편집유틸 (BS4도 지원) - 유료
https://bootstrapstudio.io/
BS 개발자
트위터에 근무하는 Mark Otto 와 Jacob Thornton 라는 사람이 개발. 2011년 - 에 깃허브에 오픈 소스로 공개. 2014년 - 깃허브 No.1 프로젝트로 채택.
BS 유용성
1. 사용하기 편함. - HTML, CSS 지식 좀만 있으면 부스트스랩 사용 가능. 2. 반응형 지원 - 모바일, 태블릿, 데스크탑 PC에 모두 적합하게 반응 3. 모바일 우선 접근 - 부트스트랩 3 경우, 모바일 우선 스타일 채택. 4. 뛰어난 브라우저 호환성 - 대부분의 브라우저가 다 지원.
BS 버전별 IE 지원 현황
BS 3.2 - IE8 지원 마지막 버전 (★ 아미나빌더) BS 3.3 - IE9 / IE10 이상 지원BS 3.3.5 - (★ 배추빌더5 모바일버전) BS 4 - IE10 / IE11 이상 지원
※ 제 홈페이지 접속자 중 IE 사용자 비중이 5%도 안 되는 걸로 봐서 BS4 사용 권장.
BS 3 vs. BS 4
https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm https://blog.templatetoaster.com/bootstrap-3-vs-bootstrap-4-migrate-differences/
BS3
float 이용해 레이아웃 제어
Glyphicon 지원 O
BS4
flex 이용해 레이아웃 제어
Glyphicon 지원 X
※ 그리드 정의 등 여러가지 부분에서 차이 남.
※ 지원 브라우저 탓에 BS3가 대세. (※ 아미나 빌더도 현재 BS3 사용 중)
BS 학습 전 알아둘 필수 용어
ARIA
ARIA (Accessible Rich Internet Applications : 접근가능한 리치 인터넷 어플리케이션)
보통, 스크린리더기 등 접근성 향상을 위해 넣는 속성 (예: aria-* ). 더 자세히 보기
(예제)
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">
</div>
offset
최적값 위해 기준값에 더해진 조정값. (즉, 변위 또는 여백의 개념.)
1. (= 변위)
두 번째 주소 만들기 위해 기준이 되는 주소에 더해진 값 의미. (아래 예제에서 7)
(예) H = h + 10 경우, 기준값 h가 100일 경우, H는 110임. ※ 상대주소 지정방식 : 오프셋 활용한 주소 방식.
2. (= 여백 gutter)
종이의 가장자리 따라 남겨지는 여백. (제본 위한 여유 목적)
주소 복사
랜덤 이동