• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)

BS 소개

 

반응형 모바일 우선 웹사이트 구축 위한 HTML CSS JAVASCRIPT 중심의 프레임워크(= 홈페이지 틀)

 


 

쉽게 빠르게 반응형 모바일 웹 사이트 구축을 가능하게 해줌. 

HTML CSS JS 등을 이용해 폼, 버튼, 테이블, 메뉴 등 다양한 요소의 멋진 반응형 디자인이 구축되어 있음.
※ 반응형 웹은 접속자의 사용 기기의 크기에 맞게 웹사이트가 유동적으로 최적의 화면으로 변하는 걸 말함. 

 

 
 
BS 관련좌표

 

BS3 CDN
https://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 OttoJacob 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)

종이의 가장자리 따라 남겨지는 여백. (제본 위한 여유 목적)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
basic BS3 - List Group (BS리스트그룹) - 리스트생성
basic BS3 - Panel (BS글상자 = BS패널)
basic BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)
basic BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언
basic BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴
basic BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바
basic BS3 - Form (BS폼양식) ★★★
basic BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박…
basic BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + …
basic BS3 - Input Sizing (BS입력창크기 = BS인풋크기)
basic BS3 - Media Object (BS미디어객체) - 썸네일위치
basic BS3 - Carousel (BS캐러셀 = BS슬라이드)
basic BS3 - Modal (BS모달) ★ - 새창팝업
basic BS3 - Tooltip (BS툴팁) - 허버형말풍선 (= 도움말풍선)
basic BS3 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작
basic BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrolls…
grid BS3 - Grid (그리드) - 반응형 레이아웃 ★★★
grid BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)
grid BS3 - Grid - Small (BS그리드 소형기기 이상) - col-sm-숫자
grid BS3 - Grid - Medium (BS그리드 중형기기 이상) - col-md-숫자
grid BS3 - Grid - Large (BS그리드 대형기기 이상) - col-lg-숫자
grid BS3 - Grid Examples (그리드 예제) ★★★★★
theme BS3 - Templates (BS템플릿종류 = BS테마종류) - BS레이아웃종류 ★★★
theme BS3 - Theme "Simply Me" (BS테마 - 심플미테마 = 프로필테마 = 자기소개테마 = 원페이…
theme BS3 - Theme "Company" (BS테마 - 회사테마 = 컴퍼니테마) - 회사소개테마 (슝슝) + …
theme BS3 - Theme "The Band" (BS테마 - 밴드테마) - 스크롤스파이 원페이지 테마
quiz BS3 - Quiz (BS퀴즈 = BS테스트 = BS시험)
basic BS3 - Background CSS (= BS배경색CSS)
basic BS3 - Float CSS (= BS정렬CSS = BS배치CSS)
basic BS3 - Display CSS (= BS노출CSS = BS표시CSS = BS보임 + BS숨김 = BS보이기…
grid BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★…
basic BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)
basic BS3 - Spinner (BS스피너 = BS회전 = BS로더) - BS3 지원X (대신, Glyphicon…
basic BS3 - Toast (토스트) - 순간말풍선 (=짧은경고창 = 스낵바) ※ BS3 지원X
basic BS3 - Card (BS카드) - 지원 X
basic BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, …
basic BS3 - flex (BS플렉스) - 지원 X
basic BS3 - Badge/Label (BS배지/BS레이블=BS라벨) ※ BS속도저하해결
basic BS3 - Transition (BS트랜지션 = BS전환효과)
basic BS3 - 요소 높이 균등 설정 (BootStrap3 / 부트스트랩3 경우) ※ 각 그리드 높이 (동일하게/…
목록
찾아주셔서 감사합니다. Since 2012