[5주차] 5. Bootstrap

Bootstrap

Bootstrap 이란

• bootstrap.css를 불러와서 다른 사람들이 작성해놓은 버튼이나 레이아웃을 가져와서 간단한 클래스 값만 넣으면 만들 수 있다.
• 활용시 사이트를 좀 더 빠르고 쉽게 만들 수 있다.
• 트위터에서 개발했고 만든지 오래되었다.

bootstrap 시작하기(v3.4.1)

• 다른 사람들이 만들어놓은 css(웹에 지정된 주소)를 외부에 있는 주소로 불러오는 방법
• https://getbootstrap.com/docs/3.4/getting-started/#download or http://bootstrapk.com/
  => 부트스트랩 cdn 코드를 html에서 link 태그로 불러오기
• 다른 사람들이 만들어놓은 css를 다운로드 받아서 적용
  • 그 css를 저장해서 link 태그로 href에 그 문서가 위치한 경로 입력
• css 파일 가져오면 버튼 등이 이미 지정되어 있어 알맞은 클래스명만 지정하면 사용 가능.

bootstrap 3.ver과 4.ver의 차이

• css와 화면 그리드에서의 단위가 3.ver은 px이고 4.ver은 em이다.
• 4.ver 부터 Internet Explorer 8 이하 버전에서 지원 종료(하위 버전을 고려하지 않고 여러가지 효과도 많이 넣을 수 있고 좀 가벼워짐)
• 3.ver을 쓰는 이유 : 템플릿 등 bootstrap에서 파생된 라이브러리들이 있는데 summernote 위지게리터(사이트를 만들 때 굉장히 중요)가 크다. summernote는 버전이 3로 되어 있다. 이렇게 전체적으로 만들어진 플러그인이나 템플릿 등이 3에 아직도 머물러있는 경우가 아직 많다. 만약 4로 많이 넘어갔으면 그때 4ver으로 변경해도 좋다.

---

레이아웃

• pc버전에서 모바일로 넘어갈 때 레이아웃을 변경해야 한 눈에 보기 편하기 때문에 그리드 시스템을 활용
• 알아둬야 할 규칙 
  • 한 줄(bootstrap의 grid system에서)은 12개로 구성되어 있다.
  • 한 줄로 바뀌는 시점이 화면 사이즈 별로 달라질 수 있다.
  • 여러 개의 화면 사이즈 별로 보이는 item 개수 다르게 지정 시 표현을 섞어서 같이 쓴다(띄어쓰기로 구분)
  • 표현은 class 안에 쓴다.
  • sm, md 등은 가로길이를 칭한다.
  • 표현 뒤에 달리는 숫자는 합해서 12가 되어야 한다.

화면 사이즈 (한줄로 바뀌는 시점)	표현
>=768px(모바일)	col-sm-
>=970px(중간 디바이스)	col-md
>=1170px	col-lg
<=768px	col-xs-

---

콤포넌트

• 항상 div로 감싸기(.container)
• http://bootstrapk.com/components/

1. 버튼

• btn btn- 로 작성
  ex) <a href="" class="btn btn-default">default</a>

종류	색상
btn-default	회색 테두리의 흰색배경 버튼
btn-primary	파란색 배경의 버튼
btn-success	녹색 배경의 버튼
btn-info	하늘색 배경의 버튼
btn-warning	노란색 배경의 버튼
btn-danger	빨간색 배경의 버튼

버튼 구현

2. 테이블

• table 태그 먼저 작성하고 class로 table 값 주기
  ex)
• table 태그 안 class(띄어쓰기로 구분)
• table-bordered: 작성시 칸 사이 마다 경계선 생김
• table-hover: 셀에 마우스 갖다 대면 그 셀의 행 모두가 색깔이 변함

3. 패널

• 로그인 창 만들 때 유용
• 브라우저 중간에 차지해야 함
• 패널 윗부분이 heading, 아래부분이 body
• class로 panel 종류 지정>panel-heading 지정, panel-body 지정
• class로 heading부분은 panel panel-heading, body부분은 panel panel-body로 지정
• 중앙 정렬 위해 패널을 감싸는 태그 안에 col-md-4 col-md-offset-4

4. 폼

• 회원가입 페이지나 로그인 페이지에 들어가는 입력 양식
• 콤포넌트-입력 그룹에 위치
• input 태그에 class로 디자인 지정
• 보통 input태그 앞에 위치한 이름들은 lavel 태그로 감싸준다.
• 줄바꿈되지 않게 하고 싶으면 줄바꿈 하고 싶지 않은 form을 감싸는 요소의 class에 form-inline 주기
• form-control : input 하는 영역이 화면에 꽉 차게 되고 줄바꿈이 됨
• input 태그의 id와 label 태그의 for 값 일치시 체크박스 클릭해도 클릭되고 라벨 글 클릭해도 클릭됨

5. 네비게이션

• 상단의 로그인, 로그아웃, 메인페이지로 이동, home, hosts 등 이런 네비게이션 바 구현
• 네비게이션에 바에 있던 가로로 있던 메뉴들이 모바일 화면에 전환(화면 사이즈 감소되었을 때)되었을 때 한 버튼안에 또다른 메뉴로 들어가는 것은 js로 구현 가능하다.(navbar header에 축소된 메뉴버튼을 넣어야 함)
• 메뉴 button 클릭시 메뉴들 나오게 하려면 button의 data-type 값과 메뉴들의 가장 상위 요소(class=” collapse navbar-collapse”인 요소)에 id 값을 동일하게 해야 한다.
• jQuery를 먼저 선언 후 그 하단에 부트스트랩 js(bootstrap.min.js)선언(무조건 이 순서대로!)
• jQuery 가져오기
  : https://code.jquery.com/ 에서 jQuery 3.x의 minified 클릭 후 나온 코드 복사해서 head 태그 안에 붙여 넣기
• 부트스트랩 js(bootstrap.min.js)선언
  :
• 크게 보면 navbar-header와 navbar-collapse 두가지로 나눠져 있다
• class 값
• navbar-default : 네비게이션 바 기본
• navbar-inverse : 네비게이션 바 색상 반전
• active : 활성화

---

실습

1. 로그인

• 패널 중앙 정렬 위해 col-md-4 col-md-offset-4를 panel 감싸는 요소에 class로 부여
• 패널 body에 로그인 폼 구현
• form-control: input 가로 너비가 panel body 꽉차게 설정
• placeholder: input요소 치기 전 힌트 텍스트

2. font-awesome(페이스북 로그인 만들기)

• font awesome 4의 css 문서 불러오기
  

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">​

• font awesome 4 icon 불러오기: https://fontawesome.com/v4.7/icons/
• icon을 필요하는 경우(facebook 아이콘, github icon 등 여러 사용자들의 아이콘)
• 아이콘을 복사하거나 이미지를 다운로드 해서 그 다운로드 받은 경로 지정해서 버튼을 만들 수 있다. 하지만 이렇게 하지 않고 font awesome라는 css를 상단에 선언해서 거기 있는 아이콘을 가져다 쓸 수 있는 방법이다. 좀 더 편리하게 사용할 수 있다.

3. 게시판

• 상단에 네비게이션 바를 만들고 왼쪽에 패널이 들어가고 오른쪽에 게시판, 아래 쪽에 페이지네이션(pagination)이랑 작성하기 버튼 배치
• 페이지네이션 위치 중앙 정렬 : nav 태그 안에 class=”text-center”
• 화면 줄어들 경우 왼쪽에 있던 패널이 가운데 두번째로 위치하게 됨

---

Bootstrap 활용

1. summernote

• 부트스트랩의 플러그 인 중 하나이다.(부트스트랩 파일 플러그 인 검색해보는 것을 추천)
• summernote는 위지윅(WYSIWY) 에디터의 한 종류이다. 부트스트랩 3 기반이다. 색상, 정렬, 테이블 등 다룰 수 있음
• jQuery 기반이어서 summernote 사용시 id를 jQuery로 지정해야 함(script 태그와 textarea id 동일하게 지정)
• summernote 모듈은 스타일, 자바스크립트, 한글 관련 모듈이 필요하다.
• 위지윅 에디터에서 글 작성 시 html 태그로 바꿔주는 기능도 가능하다.
• 다음 에디터, 네이버 에디터 등이 해당한다.
• 파일 업로드의 경우는 백엔드에서 처리해줘야 함
• 이 라이브러리는 국내 분들이 유지 보수 해주는 중이다.
• 모바일에서도 사용 가능

2. Bootstrap Template

• 템플릿을 가져오고 그 템플릿에 html과 css 모두 지정되어 있으니 그것을 수정하거나 있는 요소들을 조금씩 바꿔 쓰면 사이트를 좀 더 예쁘게 꾸밀 수 있다.
• 버전 간의 변경사항 살펴보기
• 부트스트랩 기반 관리자 페이지 필요할시 : https://startbootstrap.com/template/sb-admin
• 구매 사이트
  https://themeforest.net/
• 무료 사이트
  https://startbootstrap.com/themes

---

Tips

• 실습 최종 완성 소스 : https://github.com/parkjunyoung/bootstrap-online 의 ex-로그인.html
• placeholder: input요소 치기 전 힌트 텍스트

---

참고

https://github.com/parkjunyoung/bootstrap-online
http://bootstrapk.com/

---

5주차 후기: 5주차에서 배우는 부트스트랩은 너무 재미었다. 부트스트랩을 써본 적은 있지만 이렇게 다양하게는 활용은 못해봤었다. 역시 사람은 계속해서 배워야한다. 본격적으로 SCSS 문법도 듣고 해서 눈에 보여지는 게 많아서 그런지 배우는 하루하루가 재밌다. 다음주는 실제로 홈페이지를 만드는데 기대된다. 이번주 과제는 5문제중 4문제 이상은 풀 수 있었다. 과제 풀면서 내 실력이 향상된게 느껴져서 뿌듯하기도 하고 재밌었다. 시험 또한 90퍼센트는 다 아는 문제여서 내가 이정도야~~하면서 엄청 나 자신이 자랑스러웠던게 느껴졌던 이번주였다!