웹과인터넷활용및실습 - kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 ·...
TRANSCRIPT
![Page 2: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/2.jpg)
Intelligent Software Lab.
Bootstrap
![Page 3: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/3.jpg)
Intelligent Software Lab.
Bootstrap
• HTML5, CSS3 UI 프레임 워크
• CSS3, Javascript
• 트위터에 근무하는 두 명의 엔지니어가 개발
• Mark Otto
• Jacob Thornton
• 트위터 홈페이지와 비슷한 디자인을 빠르게 구현해낼
수 있음
• http://getbootstrap.com/
3
![Page 4: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/4.jpg)
Intelligent Software Lab. 4
![Page 5: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/5.jpg)
Intelligent Software Lab.
Bootstrap 기본 파일구조
5
![Page 6: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/6.jpg)
Intelligent Software Lab.
Bootstrap 사용
• <head>…</head> 내에 다음을 추가• <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 포함
• <body>…</body> 내의 마지막 부분에 다음을 추가• <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
• <script src="bootstrap/js/bootstrap.min.js"></script>
• jQuery• 자바스크립트 라이브러리
6
![Page 7: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/7.jpg)
Intelligent Software Lab.
Menu, Dropdown
7
![Page 8: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/8.jpg)
Intelligent Software Lab.
Menu, Dropdown
8
![Page 9: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/9.jpg)
Intelligent Software Lab.
Buttons
9
![Page 10: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/10.jpg)
Intelligent Software Lab.
Buttons
10
![Page 11: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/11.jpg)
Intelligent Software Lab.
Table
11
![Page 12: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/12.jpg)
Intelligent Software Lab.
Table
12
![Page 13: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/13.jpg)
Intelligent Software Lab.
Table
13
![Page 14: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/14.jpg)
Intelligent Software Lab.
Login
14
![Page 15: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/15.jpg)
Intelligent Software Lab.
Login
15
![Page 16: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/16.jpg)
Intelligent Software Lab.
Jumbotron
16
![Page 17: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/17.jpg)
Intelligent Software Lab.
Jumbotron
17
![Page 18: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/18.jpg)
Intelligent Software Lab.
Sidebar
18
![Page 19: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/19.jpg)
Intelligent Software Lab.
Sidebar
19
![Page 20: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/20.jpg)
Intelligent Software Lab.
Modal
20
![Page 21: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/21.jpg)
Intelligent Software Lab.
Modal
21
![Page 22: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/22.jpg)
Intelligent Software Lab.
Carousel
22
![Page 23: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/23.jpg)
Intelligent Software Lab.
Carousel
23
인터넷에서다운받은이미지사용
![Page 24: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/24.jpg)
Intelligent Software Lab.
Progress Bar
24
![Page 25: 웹과인터넷활용및실습 - Kangwoncs.kangwon.ac.kr/.../7_bootstrap.pdf · 2017-03-01 · Intelligent Software Lab. 웹과인터넷활용및실습 박천음. I. ntelligent](https://reader033.vdocuments.net/reader033/viewer/2022041602/5e31cc5f82f2656d4c43d63f/html5/thumbnails/25.jpg)
Intelligent Software Lab.
Progress Bar
25