본문 바로가기

IT_Developers/Bootstrap5

부트스트랩 - 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.