반응형
1. Bootstrap : CSS/ Javascript 기반 웹 프레임 워크 -> 반응형 웹 지원 /브라우저 호환 /다소 낮은 성능 /양산형 디자인
<실습>
-https://getbootstrap.com/ -> example template/ components(개별 디자인)
-BootstrapCDN(content delivery network) -> 온라인 상에 있는 콘텐츠 효율적으로 전달/head에 삽입 후 컨텐츠 복사, 삽입
1 2 3 4 5 6 7 8 | <head> #css <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> #js,jquery,popper.js <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> | cs |
-설정 순서
-> CDN설정 : Bootstrap CDN 복사,붙여넣기
->디자인 요소 끌어오기 : Documentation -> components에서 디자인 요소 선택, 복사, 붙여넣기
Examples 에서 템플릿 선택 -> 복사 , 붙여넣기
->다양한 템플릿 : https://startbootstrap.com
#semantic 태그 참고 주소: https://www.w3schools.com/Html/html5_semantic_elements.asp
#웹 전체 차용 시 페이지 소스 보기 -> cltr +a -> body 삽입
반응형
'Web > Django' 카테고리의 다른 글
| [4주차]2.blog-(1) (0) | 2019.03.04 |
|---|---|
| [4주차]1.pk, path converter, get_object_or_404 (0) | 2019.03.03 |
| [3주차]model & admin (0) | 2019.03.03 |
| [2.5주차]GIT (0) | 2019.03.03 |
| [2주차]word counter 이론 & 실습 (0) | 2019.03.03 |