Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
응답하라 반응형웹
3.부트스트랩
Speaker
Server-side Engineer
강환기 (http://www.facebook.com/xangfi)
Server-side Engineer
변용훈 (http://www.facebook.com/yhbyun)
반응형 웹 개발자를 위한
가장 인기 있는
프론트엔드 프레임워크
http://www.getbootstrap.com
Bootstrap
Everyone
Every device
All sizes
make front-end web development
easier & faster
Hello Bootstrap
basic template
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=...
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=...
<meta http-equiv = "X-UA-Compatible"
content = "IE=edge,chrome=1">
<meta name = "viewport"
content = "width=device-width, ...
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=...
Supported browsers
8-11
그림의 브라우저는 모두 마지막 버전을 기준으로 지원하고 있다.
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap ...
Install Bootstrap
Download
CDN
Bower Install
Download
bootstrap-3.1.1-dist.zip
현재 부트스트랩 버전 3은 MIT라이센스를 따르고 있다.
CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/b...
Bower Install
$ bower install bootstrap
or
$ bower install bootstrap-css
DEMO
부트스트랩 설치
헬로 부트스트랩
Bootstrap includes a
Responsive
Grid system
Responsive
tables & images
Responsive utilities
@media
Grid system
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as ...
table(table)
<table>
</table>
tr(table row)
<tr>
</tr>
td(table data)
<td>
</td>
.container(컨테이너)
<div class=”container”>
</div>
.row(로우)
<div class=”row”>
</div>
.col-*-*(컬럼)
<div class=”col-sm-12”>
</d...
<div class="container">
<div class="row">
<div class="col-xs-12">12</div>
</div>
<div class="row">
<div class="col-xs-3">0...
이제 끝났나….
Magic Number 12
❏ container는 여러 개의 row를 수직으로 쌓아 구성
❏ row를 동일한 크기의 12개의 column으로 나누어 관리
.container
.row
.col-md-*(column)
.col-md-*(column)
.row
.col-md-*(column)
.col-md-*(column)
.col-md-*(column)
❏ .containe...
Grid options 구조
.col device prefix
(디바이스 크기)
숫자
- -
.col-*-* Extra small
(초소형)
Medium
(보통)
Large
(대형)
Small
(소형)
없음(auto) 750px 970px 1170px
auto 60px 78px 95px
.col-xs-* .co...
Grid options
prefix
offset
nesting
ordering
prefix
.col-*-*
.col-xs-6
.col-sm-4
.col-md-3
.col-lg-2
.col-*-offset-*
.col-xs-offset-6
.col-sm-offset-4
.col-md-offset-3
.col-lg-offset-2
offset
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</...
.container
.row
.col-md-*(column)
.row
.col-md-*(column)
.col-md-*(column)
.row
.col-md-*(column)
nesting
ordering
.col-*-push-* .col-*-pull-*
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">....
fluid container
<div class="container-fluid">
<div class="row">
...
</div>
</div>
column resets
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.c...
Responsive
tables & images
Responsive tables
<div class="table-responsive">
<table class="table">
...
</table>
</div>
디바이스의 넓이가 768px 보다 작은 경우 테이블에 가...
Responsive images
<img src="..."
class="img-responsive"
alt="Responsive image">
max-width : 100%;
이미지는 부모 엘리멘트에 꽉차게 표시.
반응...
Responsive utilities
.visible-*
.hidden-*
@media
.visible-xs
.visible-sm
.visible-*
Extra
small
Small
Medium
Large
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-*
Extra
small
Small
Medium
Large
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.hidden-print
Browser Print
PrintBrowser
.visible-print
DEMO
그리드 시스템
반응형 테이블과 이미지
반응형 유틸리티
Add more
@media
http://upgrade-bootstrap.bootply.com/
http://code.divshot.com/bootstrap3_upgrader/
Migrating from 2.x to 3.x
Disabling Responsiveness
❏ viewport 메타 태그 삭제
❏ .container의 width 오버라이드
width:970px !important;
❏ 그리드는 .col-xs-* 클래스만 사용
❏ ...
Helper Classes
.clearfix
.pull-left
.pull-right
Customizing
CSS코드를 직접 수정 및 추가하여 확장하거나
CSS 부분수정
Less code 직접 수정
Bootstrap 사이트에서 제공하는 커스터마이즈 & 다운로드를 통하여 수정.
Customizer를 이용
Conclusion
프론트엔드 개발 누가 ?
Everyone
All sizes
Responsive utilities
@media
Grid system
Bootstrap
아!
반응형
Reference url
Bootstrap
http://getbootstrap.com/getting-started/
Bootstrap Grid 동작 원리
http://www.helloerik.com/the-subtle-...
Upcoming SlideShare
Loading in …5
×

응답하라 반응형웹 - 3. bootstrap

7,799 views

Published on

응답하라 반응형 웹 발표 세번째 시간 - 부트스트랩

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

응답하라 반응형웹 - 3. bootstrap

  1. 1. 응답하라 반응형웹 3.부트스트랩
  2. 2. Speaker Server-side Engineer 강환기 (http://www.facebook.com/xangfi) Server-side Engineer 변용훈 (http://www.facebook.com/yhbyun)
  3. 3. 반응형 웹 개발자를 위한 가장 인기 있는 프론트엔드 프레임워크
  4. 4. http://www.getbootstrap.com Bootstrap
  5. 5. Everyone
  6. 6. Every device
  7. 7. All sizes
  8. 8. make front-end web development easier & faster
  9. 9. Hello Bootstrap basic template
  10. 10. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> basic template
  11. 11. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> Mobile first 모바일 환경에서 보여지는 컨텐츠의 처리를 최우선으로 하자.
  12. 12. <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1"> <meta name = "viewport" content = "width=device-width, initial-scale=1"> meta tag http-equiv(전처리구문) : http-equiv를 먼저 실행하고 페이지를 로딩 viewport : 뷰포트 : 장치의 화면에 출력되어 보여지는 영역
  13. 13. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> Internet Explorer 8 and Respond.js (Polyfills) 부트스트랩 버젼 2에서는 IE 7까지 지원을 했었다. 버젼 3도 IE7에서 동작은 한다. 버젼3에서는 HTML5 , CSS3 요소를 많이 사용하여 IE9 이하에서는 동일하게 보여지지 않을 수 있다. 때문에 html5shiv.js , respond.js를 링크 시켜야 한다.
  14. 14. Supported browsers 8-11 그림의 브라우저는 모두 마지막 버전을 기준으로 지원하고 있다.
  15. 15. <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> makes faster & easier 부트스트랩에 포함되어있는 플러그인들은 제이쿼리 기반으로 동작한다. 플러그인이 정상 동작하기 위해서 제이쿼리를 링크시켜야 한다. 부트스트랩의 사용환경 설정은 빠르고 쉽다.
  16. 16. Install Bootstrap Download CDN Bower Install
  17. 17. Download bootstrap-3.1.1-dist.zip 현재 부트스트랩 버전 3은 MIT라이센스를 따르고 있다.
  18. 18. CDN <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> Content delivery network 네트워크 상황을 고려하여 사용한다.
  19. 19. Bower Install $ bower install bootstrap or $ bower install bootstrap-css
  20. 20. DEMO 부트스트랩 설치 헬로 부트스트랩
  21. 21. Bootstrap includes a Responsive
  22. 22. Grid system
  23. 23. Responsive tables & images
  24. 24. Responsive utilities @media
  25. 25. Grid system Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. ❏ 모바일을 우선으로 ❏ 12개의 컬럼을 통하여 ❏ 미리지정된 CSS를 사용하는 ❏ 쉬운 레이아웃 옵션
  26. 26. table(table) <table> </table> tr(table row) <tr> </tr> td(table data) <td> </td>
  27. 27. .container(컨테이너) <div class=”container”> </div> .row(로우) <div class=”row”> </div> .col-*-*(컬럼) <div class=”col-sm-12”> </div>
  28. 28. <div class="container"> <div class="row"> <div class="col-xs-12">12</div> </div> <div class="row"> <div class="col-xs-3">03</div> <div class="col-xs-6">06</div> <div class="col-xs-3">03</div> </div> <div class="row"> <div class="col-xs-4">04</div> <div class="col-xs-4">04</div> <div class="col-xs-4">04</div> </div> <div class="row"> <div class="col-xs-6">06</div> <div class="col-xs-6">06</div> </div> <div class="row"> <div class="col-xs-8">08</div> <div class="col-xs-6">06</div> </div> </div> Grid System Demo http://codepen.io/kangki/pen/Jvwtq
  29. 29. 이제 끝났나….
  30. 30. Magic Number 12 ❏ container는 여러 개의 row를 수직으로 쌓아 구성 ❏ row를 동일한 크기의 12개의 column으로 나누어 관리
  31. 31. .container .row .col-md-*(column) .col-md-*(column) .row .col-md-*(column) .col-md-*(column) .col-md-*(column) ❏ .container (컨테이너) ❏ .row (로우) ❏ .col-md-* (컬럼 [* = 숫자] ) ❏ column 숫자 합 = 12 Grid system 구성
  32. 32. Grid options 구조 .col device prefix (디바이스 크기) 숫자 - -
  33. 33. .col-*-* Extra small (초소형) Medium (보통) Large (대형) Small (소형) 없음(auto) 750px 970px 1170px auto 60px 78px 95px .col-xs-* .col-sm-* .col-md-* .col-lg-*접두어 container 크기 column 최대크기 언제나 수평 배열 수평 중단점(container의 최대크기)보다 작으면 그리드가 하단으로 떨어져 내린다. 그리드 배치
  34. 34. Grid options prefix offset nesting ordering
  35. 35. prefix .col-*-* .col-xs-6 .col-sm-4 .col-md-3 .col-lg-2
  36. 36. .col-*-offset-* .col-xs-offset-6 .col-sm-offset-4 .col-md-offset-3 .col-lg-offset-2 offset
  37. 37. <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-8 col-md-offset-4">.col-md-8 .col-md-offset-4</div> </div> .col-md-4 .col-md-4 .col-md-offset-4 .col-md-8 .col-md-offset-4
  38. 38. .container .row .col-md-*(column) .row .col-md-*(column) .col-md-*(column) .row .col-md-*(column) nesting
  39. 39. ordering .col-*-push-* .col-*-pull-*
  40. 40. <div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> .col-md-3 .col-md-pull-9 .col-md-9 .col-md-push-3 .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9
  41. 41. fluid container <div class="container-fluid"> <div class="row"> ... </div> </div>
  42. 42. column resets <div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
  43. 43. Responsive tables & images
  44. 44. Responsive tables <div class="table-responsive"> <table class="table"> ... </table> </div> 디바이스의 넓이가 768px 보다 작은 경우 테이블에 가로 스크롤 할 수 있다.
  45. 45. Responsive images <img src="..." class="img-responsive" alt="Responsive image"> max-width : 100%; 이미지는 부모 엘리멘트에 꽉차게 표시. 반응형 이미지는 max-width : 100%;와 height : auto;를 적용.
  46. 46. Responsive utilities .visible-* .hidden-* @media
  47. 47. .visible-xs .visible-sm
  48. 48. .visible-* Extra small Small Medium Large .visible-xs .visible-sm .visible-md .visible-lg
  49. 49. .hidden-* Extra small Small Medium Large .hidden-xs .hidden-sm .hidden-md .hidden-lg
  50. 50. .hidden-print Browser Print PrintBrowser .visible-print
  51. 51. DEMO 그리드 시스템 반응형 테이블과 이미지 반응형 유틸리티
  52. 52. Add more @media
  53. 53. http://upgrade-bootstrap.bootply.com/ http://code.divshot.com/bootstrap3_upgrader/ Migrating from 2.x to 3.x
  54. 54. Disabling Responsiveness ❏ viewport 메타 태그 삭제 ❏ .container의 width 오버라이드 width:970px !important; ❏ 그리드는 .col-xs-* 클래스만 사용 ❏ 네비게이션 바의 접히거나 펼쳐지는 동작 제거
  55. 55. Helper Classes .clearfix .pull-left .pull-right
  56. 56. Customizing
  57. 57. CSS코드를 직접 수정 및 추가하여 확장하거나 CSS 부분수정
  58. 58. Less code 직접 수정
  59. 59. Bootstrap 사이트에서 제공하는 커스터마이즈 & 다운로드를 통하여 수정. Customizer를 이용
  60. 60. Conclusion
  61. 61. 프론트엔드 개발 누가 ?
  62. 62. Everyone
  63. 63. All sizes
  64. 64. Responsive utilities @media Grid system
  65. 65. Bootstrap
  66. 66. 아! 반응형
  67. 67. Reference url Bootstrap http://getbootstrap.com/getting-started/ Bootstrap Grid 동작 원리 http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works http://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/ Bootply Online Editor http://www.bootply.com/ Bootstrap Theme http://bootswatch.com/ (Free) https://wrapbootstrap.com/ Bootstrap Resources http://bootsnipp.com/resources

×