15. Twitter Bootstrap 2/2 (생활코딩 작심40시간)

코딩

by Skema Shark 2017. 1. 26. 17:15

이번엔 실제로 해보는 실습 강의.

라이브러리 로드.. (영어 주로 지원이라) -- HTML 템플릿 복사

Hello world (더 크고 진하게 나옴)

- Scaffolding (건축 구조물)

Software는 건축에서 많이 가져왔음.

Grid System (중요)

레이아웃 결정.

화면을 분할 하는게 그리드임. (디자인)

총 12등분.

Span

Low

레이아웃 만들었다는 것.

아티클(article) 삼각형 모양 누르면 피고 접을 수 있음.

레이아웃 박스.

콘테이너 - 고정, 가운데 정렬

훨씬 깔금..

ex

<nav>

</nav>

</div>

라이브러리 - 사용법 익히기.

- 하나의 행은 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