2021/01/19 4

Bootstrap 활용 - Template

템플릿을 이용해서 메인페이지를 만들어보자. themeforest.net/ WordPress Themes & Website Templates from ThemeForest Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email templates & HTML templates. themeforest.net 이곳에 들어가서 템플릿을 찾아보자. 이곳에 검색창에 bootstrap을 입력해준다. 그런데 거의다 유료일거다. 우리는 실습하기 위해서 무료를 찾아보자. startbootstrap.com/themes Free Bootstrap Them..

Bootstrap활용 - Summernote WYSIWYG editor 사용해보기

간단하게 웹사이트를 꾸며보는걸 해보자. Summernote의 위지윅에디터 적용해보자. 이것도 부트스트렙 기반이다. 우리는 개발자라서 html태그를 다 쓸줄 알지만, 일반사람들은 모르기때문에 이렇게 바꿔주는 에디터를 많이 이용한다. summernote.org/getting-started/ Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org summernote사이트에 들어가서 getting-started를 클릭하고 Inlcude js/css에서 ..

실습 - 게시판 (네비게이션바, 패널, 게시판, 페이지네이션, 버튼 사용)

1. 상단에 네비게이션 바를 만든다. 2. 왼쪽에 패널이 들어가고 3. 오른쪽에 게시판 들어가고 4. 아래쪽에 페이지네이션 들어가고 5. 가장 아랫쪽에 작성하기 버튼을 만들어보자. 페이지네이션추가방법 bootstrapk.com/components/ 콤포넌트 · 부트스트랩 Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula u..

실습 - 로그인, font-awesome

1. 로그인창 만들기 이미 배웠던 버튼, 네비게이션, 레이아웃을 토대로 간단하게 로그인 만드는 실습을 할 것이다. Toggle navigation bootstrap 강의 HTML CSS PYTHON Javascript 로그인 로그인 소스코드 일부해석 : 우선 jquery, bootstrap, 폰트어썸을 추가한다. nav태그가 끝난 후에 div태그 중, class="col-md-4 col-md-offset-4" 중에 col-md-offset-4를 추가한 이유가 중앙 정렬을 하기 위해서이다. (하지만 왜 col-md-offset-4를 추가해서 중앙정렬됬는지 나한테는 아직까지 미스테리다...) panel-heading에는 사용할 기능의 제목을 입력해준다. panel-body에서는 input방식은 text로 하..