본문 바로가기

IT_Developers/Bootstrap6

무료 부트스트랩 테마 사이트 - bootswatch.com 부트스트랩 무료 css 안녕하세요. 고코더 입니다. 세상에서 가장 인기 있는 HTML 라이브러리라고 자칭하는 부트스트랩 테마를 무료로 배포하는 사이트를 소개합니다. 미리 완성된 테마를 사용하면 사이트 만들기가 매우 용이합니다. 간단한 사이트라면 무료 테마를 이용하여 빠르게 개발해보시길 바랍니다. ● 1. 해당 사이트를 접속합니다. https://bootswatch.com/ ● 2. 그리고 원하는 무료테마를 다운로드하면 css 가 다운로드됩니다. 스크롤을 내리면 유료도 있으니 참고 바랍니다. ● 3. 프리뷰를 통해서 미리 사용할 부트스트랩의 디자인을 확인해보시길 바랍니다. https://bootswatch.com/cerulean/ 2021. 6. 30.
부트스트랩 - bootstrap 테마 다운로드 사이트 / startbootstrap.com 무료 템플릿 다운받기 좋은 사이트 안녕하세요. 고코더 입니다. ● 1. 부트스트랩을 가장 빠르게 사용하는 방법은 테마를 다운로드 하여 사용 하는 것입니다. 이런 무료 템플릿을 배포하는 사이트중에 가장 많이 사용 되는 사이트가 있습니다. https://startbootstrap.com/ ● 2. 해당 페이지에 접속하면 4가지 버전을 다운로드 할 수 있습니다. 테마로 접속합니다. ● 3. 그리고 원하는 테마를 입력하면 라이브로 볼 수도 있고 다운로드가 가능합니다. ● 4. 다운받은 템플릿은 즉시 무료로 사용 가능합니다. 요즘 일반적인 작은 사이트에 들어가면 이런 모양을 많이 보실 수 있습니다. 예전에는 디자인때메 사이트 만들기를 포기하는 경우가 많았지만 이제 무료로 제공하는 부트스트랩 디자인을 사용하여 홈페.. 2019. 12. 17.
Bootstrap | 강의 | 04 - 부트스트랩으로 이미지를 다루어 보자. / caption을 달아보자. 1. 부트스트랩으로 이미지를 다루어 보자 - 초보 개발자들에게는 어렵게 CSS와 HTML 조합으로 홈페이지 디자인을 만들어도 이미지 다루기 어려웠던 기억이 있을 것입니다. - 부트스트랩은 이 이미지 마저 쉽게 다룰수 있도록 각종 방법을 만들어 놓았습니다. - 이번 시간에는 가볍게 이미지를 다뤄 보겠습니다. 2. 우선 이미지를 노출 시켜보자 1. 이미지를 아래처럼 추가시켜 보자 - 위치는 게시판에 맨위다. - div 안에 img 태그로 이미지를 첨부해보자. - 이미지는 이걸 다운 (무료이미지) ▼ 위치는 게시판에 맨위다. 이름 나이 주소 지브이 26 상수동 하이리 26 태릉입구 래부기 26 망원동 글쓰기 1 2 3 ▼이런 웹에서 확인해보니 엉망이다. 반응형 웹에서 이미지만 반응하지 않고 있습니다.멋진 이미.. 2017. 7. 9.
Bootstrap | 강의 | 03 - 버튼을 달고 전체 폭을 조종 / Button / container 1. 이번 시간에는 - 게시판이 생겼으니 "글쓰기"와 같은 버튼이 필요하겠죠? - 그리고 좌우로 가득찬 게시판도 좋지만 보통은 좌우에 적당한 폭이 있어 - 한눈에 보기 편한 모양으로 만들어 볼것입니다. - 역시나 이번에도 부트스트랩 매력에 푹 빠져봅시다.! 2. 버튼을 다뤄보자 2.1 버튼을 만들어 보자 ▼ 아래처럼 코딩해보겠습니다. 버튼 버튼 ▼ 화면에 띄워보니 기본 버튼, 부트스트랩 버튼이 보입니다. 딱 봐도 부트스트랩 버튼은 디자인 들어갈 준비가 되어 있네요.이제 디자인을 입혀 봅시다. ▼ 아래 코드를 입력하고 웹으로 봐볼까요? Basic Default Primary Success Info Warning Danger Link Large Medium Small XSmall ▼ 디자인을 보는 직관적인 .. 2017. 7. 2.
Bootstrap | 강의 | 02 - 게시판 모양을 만들어 보자! / 테이블 / 페이징 1. 깔끔한 게시판 모양을 한방에! 부트스트랩 매력 느껴보자! - 홈페이지를 꾸미려다가 CSS와 HTML을 작성하다. 포기해버린 경험들이 있으실 겁니다. (저부터..) - 기본 뼈대는 나와도 디자인 입힐려면 디자이너 퍼블리셔가 아닌 이상 고역일거고 정작 프로그램 공부가 뒷전 입니다. - 이전 강의에서도 말했듯이 부트스트랩은 아주 훌륭한 디자이너와 퍼블리셔가 제공한 CSS입니다. - 이번 강의에서 부트스트랩 매력에 푹 빠져 보시죠!!! 2. 테이블을 만들어 보자! 2.1 Table 이란 - 실무에서 혹은 좋은 강의를 제공하는 곳에서 선행 되신분들은 보단 태그가 많이 활용되는걸 알고 있을 겁니다. - 데이터를 FM으로 나타내는 요소는 이므로 두번째 시간이니 부트 스트랩으로 이쁜 을 만들어 보는 시간을 가지겠.. 2017. 7. 2.
Bootstrap | 강의 | 01 - 부트스트랩 이란? / 설치 / 다운로드 1. 부트스트랩이란 1.1 제작사 http://getbootstrap.com/ (한글 번역 개인사이트 http://bootstrapk.com/) - 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다. - 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 개발하였습니다. (둘이 안사귐 게이아님) 1.2 목적 - 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리 - 디자인으로 인한 개발시간을 단축하기 위한 개발도구 2. 부트스트랩 설치 2.1 설치설명 - 부트스트랩 설치는 압축을 풀기만 하면 됩니다. - 프로젝트 할때 디자인과 퍼블리셔가 css,js 폴더를 만들어주고 나서 개발을 시작할텐데 바로 그 CSS 폴더를 제공해주는 것 입니다. - 웹스톰 같은 IDE를 프로젝트.. 2017. 7. 1.