15. Twitter Bootstrap 2/2 (생활코딩 작심40시간)
이번엔 실제로 해보는 실습 강의.
라이브러리 로드.. (영어 주로 지원이라) -- HTML 템플릿 복사
Hello world (더 크고 진하게 나옴)
- Scaffolding (건축 구조물)
Software는 건축에서 많이 가져왔음.
Grid System (중요)
레이아웃 결정.
화면을 분할 하는게 그리드임. (디자인)
총 12등분.
Span
Low
레이아웃 만들었다는 것.
아티클(article) 삼각형 모양 누르면 피고 접을 수 있음.
레이아웃 박스.
콘테이너 - 고정, 가운데 정렬
훨씬 깔금..
ex
<div class="container">
<div class = row>
<div class = "span 4">
<nav>
</nav>
</div>
</div>
</div>
라이브러리 - 사용법 익히기.
- 하나의 행은 row 클래스 안에 묶인다.
<div class = "row">
<h1>Javascript</h1>
</div>
하나의 행이 생김.
Component
하나의 클래스 안에 여러 클래스 가능 (여러 속성)
<div class = "row hero-unit"
- <div class="hero-unit">
- <h1>Heading</h1>
- <p>Tagline</p>
- <p>
- <a class="btn btn-primary btn-large">
- Learn more
- </a>
- </p>
- </div>
body{
padding top; 30px
}
링크
반응형 동작? 아직 안됨.
Responsive Design (body)
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
문서안의 체계로 맞춰야함.
<head>
</head>
<body>
</body>
head 먼저 랜더링 되어야 body가 됨.
즉, 어디를 넣냐는 판단을 잘해야함.
비트나미 : 나중에 서버를 운영하게 되면, 여러 서버 소프트웨어를 깔아야 하는데
이걸 한방에 하게 해주는 것임.
Come on gateway Interface
내 컴퓨터에 웹서버가 깔릴 수 있다.
'코딩' 카테고리의 다른 글
| 17 인터넷과 웹의 역사 (생활코딩 작심40시간) (0) | 2017.01.26 |
|---|---|
| 16. 서버수업 개요 (0) | 2017.01.26 |
| 14. TwitterBootstrap 1/2 (생활코딩 작심40시간) (0) | 2017.01.25 |
| 13. jQuery (0) | 2017.01.25 |
| 12. JavaScript 3/3 (생활코딩 작심40시간) (0) | 2017.01.24 |
댓글