appmaster

템플릿을 이용해서 메인페이지를 만들어보자. 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..

간단하게 웹사이트를 꾸며보는걸 해보자. 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..

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로 하..

네이게이션 바는 상단에 로그인, 로그아웃 또는 메인페이지로 이동 등등 을 표현해야할때 사용할 수 있다. jQuery + bootstrap.min.js 두가지를 필요로 한다. jquery cdn을 검색해 본다. code.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever l..

회원가입 페이지나 로그인 페이지 같은 입력양식이라고 보면 된다. 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 ut id elit. bootstrapk.com "입력 그룹" 부분을 찾아서 참고하면 된다. 아이디 : 비밀번호 : 생년월일 : 년도 19..

이것은 로그인창을 만들때 굉장히 유용하다. panel-heading과 panel-body로 나누어져서 작성이 된다. 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 ut id elit. bootstrapk.com 여기서 panel 부분을 찾아서 참고하..

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 ut id elit. bootstrapk.com 이것도 또한 부트스트랩 컴포넌트에 들어가서 확인하면된다. table부분을 찾아서 사용법을 참고하면 될것같다. 제목 작성일 삭제 안녕하세요 2019-03-2..

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 ut id elit. bootstrapk.com 이곳에서 컴포넌트를 어떻게 사용하는지 확인해본다. 일단, 가장 기본인 버튼을 사용하는걸 보겠다. 우선 link태그에서 bootstrap 3.4.1 버전을 ..

한줄은 12개 레이아웃으로 이루어져 있다. 1번 레이아웃 2번 레이아웃 3번 레이아웃 여기서 col-sm-6은 한줄에 6개씩 보이게 하겠다라는 뜻이다. 그래서 한줄에 "2번 레이아웃"까지 나오고 그 다음줄에는 "3번 레이아웃"이 출력되게 된다. col-sm-6에서 sm은 small device라는 뜻을 가지고 있다. md은 medium display라는 뜻을 가지고 있다. 그래서 sm을 사용했을떄 768px 크기보다 줄어들었을때 반응이 일어나는것이다. **한번 생각해보자** 레이아웃이 768px보다 작을때는 1개만 768px 이상에서는 2개 970px 이상에서는 3개가 보이게 만들어보자. 1번 레이아웃 2번 레이아웃 3번 레이아웃