728x90
https://www.w3schools.com/Html/html5_semantic_elements.asp
Semantic 태그는 여길 참고????????????????????????????????????????????
Bootstrap : CSS/JavaScript 기반 웹 프레임워크
반응형 웹 지원
브라우저 호환성
부트스트랩 ver.4
영어로 쳐야 ver4가 나옴 bootstrap v4https://getbootstrap.com/
여기~
home - CDN 보고!
documentation 다양한 Components 보면 됨
홈페이지 - Documentation
1) 부트스트랩 사용하기
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
되도록 다 가져오자. dropdown가져올때 link rel만 가져왔더니 dropdown이 안되더라...ㅜㅜㅜ
이제 사용할 수 있다~~~
헐~~~~
2) container
저기에 container 검색하면 container 나옴 그거 써보자
<div class="container">
<h1> hello </h1>
<button type="button" class="btn btn-secondary">Secondary</button><br>
<button type="button" class="btn btn-outline-warning">Warning</button>
</div>
3)
메뉴바 - nav 바 시멘틱 태그???? 나중에 참고하기
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>4) form 태그
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>다 검색해서 쓰면 돼~~~~~~
==================
홈페이지 - Examples
6) 웹 전체 차용
페이지 소스 보기 하면 됨~
ctrl + a 하고 body에 넣어주면 됨
// + 부트스트랩 사이트 더 추천
https://startbootstrap.com/template-categories/all/
'Development > Django(멋쟁이사자처럼 7기 운영진)' 카테고리의 다른 글
| [멋사7기] 4주차 - 3. blog project 1, 2 (0) | 2019.01.30 |
|---|---|
| [멋사7기] 4주차 - 1,2 . pk, path converter, get_object_or_404 (0) | 2019.01.30 |
| [멋사7기] 3주차 - 2. model&admin 이론, 실습 / 3. queryset & method (0) | 2019.01.24 |
| [멋사7기] Django에 Css/Bootstrap 적용하기 (0) | 2019.01.17 |
| [멋사7기] vscode -> github에 올리기 (wordcount project) (0) | 2019.01.16 |