무료 템플릿 다운받기 좋은 사이트


안녕하세요.
고코더 입니다.


 1. 부트스트랩을 가장 빠르게 사용하는 방법은 테마를 다운로드 하여 사용 하는 것입니다. 이런 무료 템플릿을 배포하는 사이트중에 가장 많이 사용 되는 사이트가 있습니다.


 2. 해당 페이지에 접속하면 4가지 버전을 다운로드 할 수 있습니다.
테마로 접속합니다.


 3. 그리고 원하는 테마를 입력하면 라이브로 볼 수도 있고 다운로드가 가능합니다. 


 4. 다운받은 템플릿은 즉시 무료로 사용 가능합니다.
요즘 일반적인 작은 사이트에 들어가면 이런 모양을 많이 보실 수 있습니다.
예전에는 디자인때메 사이트 만들기를 포기하는 경우가 많았지만 
이제 무료로 제공하는 부트스트랩 디자인을 사용하여 홈페이지 만들기가 쉬워졌습니다.



마무리


부트스트랩에 최대 장점은 누구나 만들기 쉽고
쉬운 배포에 있습니다.


댓글을 달아 주세요



1. 부트스트랩으로 이미지를 다루어 보자 


     - 초보 개발자들에게는 어렵게 CSS와 HTML 조합으로 홈페이지 디자인을 만들어도 이미지 다루기 어려웠던 기억이 있을 것입니다.
     - 부트스트랩은 이 이미지 마저 쉽게 다룰수 있도록 각종 방법을 만들어 놓았습니다.
     - 이번 시간에는 가볍게 이미지를 다뤄 보겠습니다.



2. 우선 이미지를 노출 시켜보자

     1. 이미지를 아래처럼 추가시켜 보자
          - 위치는 게시판에 맨위다.
          - div 안에 img 태그로 이미지를 첨부해보자.

          - 이미지는 이걸 다운 (무료이미지) tree.zip


          ▼ 위치는 게시판에 맨위다.
<div class="container"<!--container-fluid-->

    <div>
        <img src="./images/tree.jpg" alt="숲" >
    </div>

    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <td>이름</td>
            <td>나이</td>
            <td>주소</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>지브이</td>
            <td>26</td>
            <td>상수동</td>
        </tr>
        <tr class="text-success bg-danger">
            <Td>하이리</td>
            <Td class="text-warning">26</td>
            <Td class="text-info">태릉입구</td>
        </tr>
        <tr class="text-left bg-info">
            <td>래부기</td>
            <Td class="text-center">26</td>
            <Td class="text-right">망원동</td>
        </tr>
        </tbody>
    </table>

    <button class="btn btn-primary pull-right">글쓰기</button>
    <div class="text-center">
        <ul class="pagination pagination-lg">
            <li><href="#">1</a></li>
            <li><href="#">2</a></li>
            <li><href="#">3</a></li>
        </ul>
    </div>
</div>

▼이런 웹에서 확인해보니 엉망이다. 반응형 웹에서 이미지만 반응하지 않고 있습니다.멋진 이미지가 짤려버렸습니다.우린 이제 이 이미지를 반응형 웹으로 만들고 부트스트랩으로 꾸며 볼것입니다.





3. 이미지를 반응형으로 부트스트랩으로

     1. 반응형으로 만들어보자
          - 아래  코드를
img-responsive : 이미지를 반응형으로 만들어준다.

          ▼ img class 에 추가한다.
<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive">
</div>

          ▼ 웹에서 확인해보니. 와! 이미지가 반응형으로 돌아왔습니다.
  사이트의 크기를 따라 이미지도 축소 확대 됩니다.




     2. 이미지를 꾸며보자
          - 아래  코드를 이미지에 넣어보자 역시 직관적입니다.
img-circle : 이미지를 둥글게
img-rounded : 모서리를 둥글
img-thumbnail : 이미지를 액자처럼 테두리가 있게

          ▼ 코드에 합은 이렇습니다. 테스트를 위해 Div를 복사해서 붙혀놓은 것입니다.
<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-circle"<!--이미지를 둥글게-->
</div>

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-rounded"<!--모서리를 둥글게-->
</div>

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-thumbnail"<!--이미지를 액자처럼 테두리가 있게-->
</div>


          ▼ 이미지가 아주 깔끔하고 간결하게 수정이 되었습니다.. 각 속성에 맞는 이미지 모양이 속상 하나로 수정이 가능합니다.(사실 이쁘기 만들려면 이미지를 수정하는게 좋긴하죠)
          ▼ 저는 첫번째에 있는 동그란 이미지를 좋아합니다. 우리가 만드는 게시판에 맨위 디자인 요소만 남겨놓고 계속 진행해봅시다.



4. Caption을 달아보자.

     - 이전시간에 달았어야 하는 간단한 요소인데 까먹어서 지금 추가하겠습니다. 

caption : 테이블에 제목을 보여주는 태그

     ▼ 방법은 table 아래에 caption 태그를 입력 해보자
<table class="table table-striped table-bordered table-hover">
    <caption>부트스트랩으로 만들어 보는 게시판</caption>

     ▼ 테이블에 제목이 입력 되었다. 캡션에 장점은 한번 지정하면 변도에 디자인 필요없이 게시판 이름을 지정할 수 있다. 실무에서도 게시판 제목은 Caption으로 지정해 사용하자 (은근히 Caption 요소를 안쓰는 경우가 많더군요)






5. 마무리

     - 이미지까지 다루어보았다. 사실 크게 어려운 부분은 없다.
     - 부트스트랩 다양한 편의는 물런 신뢰할만 하다는걸 느끼게 됩니다.





댓글을 달아 주세요



1. 이번 시간에는

     - 게시판이 생겼으니 "글쓰기"와 같은 버튼이 필요하겠죠?
     - 그리고 좌우로 가득찬 게시판도 좋지만 보통은 좌우에 적당한 폭이 있어
     - 한눈에 보기 편한 모양으로 만들어 볼것입니다.
     - 역시나 이번에도 부트스트랩 매력에 푹 빠져봅시다.!



2. 버튼을 다뤄보자


     2.1 버튼을 만들어 보자
          ▼ 아래처럼 코딩해보겠습니다.
<!--부트스트랩 버튼 class="btn"-->
<button type="button" id="goButton"  class="btn">버튼</button>
<!--기본버튼-->
<button type="button">버튼</button>

          ▼ 화면에 띄워보니 기본 버튼, 부트스트랩 버튼이 보입니다. 딱 봐도 부트스트랩 버튼은 디자인 들어갈 준비가 되어 있네요.이제 디자인을 입혀 봅시다.

          ▼ 아래 코드를 입력하고 웹으로 봐볼까요?
<!--버튼의 디자인-->
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

<!--버튼의 크기-->
<button type="button" class="btn btn-default btn-lg">Large</button>
<button type="button" class="btn btn-default btn-md">Medium</button>
<button type="button" class="btn btn-default btn-sm">Small</button>
<button type="button" class="btn btn-default btn-xs">XSmall</button>

          ▼ 디자인을 보는 직관적인 부분이라 설명이 필요 없겠네요. 간단한 클래스명으로 다양한 디자인을 손쉽게 쓸수 있습니다.
          ▼ 크기도 조절 가능합니다. 

     2.2 게시판의 글쓰기 버튼을 만들어 보자
          - 이번엔 우리 게시판에 쓸 글쓰기 버튼을 만들어보겠습니다.
          ▼ 아래의 코딩을 
pull-right : 버튼이 위치함으로 인해 디자인하 한단계 내려가는 걸 방지하고 오른쪽 정렬 
pull-left :                 ''                                      왼쪽 정렬
         
          ▼ 코딩의 합은 아래와 같습니다. 저번 시간에 만든 페이징 디자인 위에 위치시키겠습니다.
          ▼ btn으로 버튼으로 지정해주고, btn-primary로 디자인을 설정하고, pull-right로 정렬 하였습니다.
<button class="btn btn-primary pull-right">글쓰기</button>
<div class="text-center">
    <ul class="pagination pagination-lg"<!--부트스트랩에서 제공하는 페이징 마법사(?)-->
        <li><href="#">1</a></li>
        <li><href="#">2</a></li>
        <li><href="#">3</a></li>
    </ul>
</div>
     
          ▼ 그림처럼 이쁜 글쓰기 버튼이 안정적인 위치 하네요.!!
          ▼ 이로써 우리 게시판에 글쓰기 버튼까지 완료하였습니다.




3. container로 폭을 조정하자

     - 지금까지 잘 따라 온 분들은 디자인이 좌우로 100% 웹에 찰싹 달라붙어 있는걸 볼수 있을것입니다. 저는 이 디자인을 아주 좋아합니다.
     - 그런데 보통 좌우에 적당한 공백을 만들어 게시판이 좀더 안정적으로 보이게 하는거 대다수죠. 그걸 해결해주는 놈이 바로
     - container 이놈입니다. 

     ▼ div 해당 속성을 입력하면 디자인에 폭을 조정할 수 있습니다.
container, container-fluidr : 폭에 공백을 준다. 둘의 공백 크기는 다르다.

     ▼ 해당 요소로 우리가 만든 게시판을 감싸 주세요
<div class="container">[게시판]</div<!--container-fluid-->

     ▼ container의 폭의 공백

     ▼ container-fluid의

     ▼ 속성을 주지 않았을 때의 폭의 공백 


3. 마무리


     - 간단한 방법으로 우리의 게시판에 양쪽 폭의 느낌을 정해줄수 있었습니다.
     - 저는 개인적으로는 속성을 주지 않는 좌우로 100프로 가득찬 디자인을 좋아합니다.
     - 이젠 정말 게시판 같은 게시판이 완성 되었습니다.
     - 아직까진 어렵고 복잡한 내용이 없습니다. 다음 강의는 이미지에 대해 나가겠습니다.
     - 이미지 이후에는 살짝 어려워 질 수 있으니 개인적으로 더 연습하고 준비하시길!


     ▼ 지금까지 소스 입니다.

index.html


댓글을 달아 주세요



1. 깔끔한 게시판 모양을 한방에! 부트스트랩 매력 느껴보자!

     - 홈페이지를 꾸미려다가 CSS와 HTML을 작성하다. 포기해버린 경험들이 있으실 겁니다. (저부터..)
     - 기본 뼈대는 나와도 디자인 입힐려면 디자이너 퍼블리셔가 아닌 이상 고역일거고 정작 프로그램 공부가 뒷전 입니다.
     - 이전 강의에서도 말했듯이 부트스트랩은 아주 훌륭한 디자이너와 퍼블리셔가 제공한 CSS입니다. 
     - 이번 강의에서 부트스트랩 매력에 푹 빠져 보시죠!!!


2. 테이블을 만들어 보자!


     2.1 Table 이란
          - 실무에서 혹은 좋은 강의를 제공하는 곳에서 선행 되신분들은 <Table> 보단 <UL> <LI> 태그가 많이 활용되는걸 알고 있을 겁니다.
          - 데이터를 FM으로 나타내는 요소는 <Table>이므로 두번째 시간이니 부트 스트랩으로 이쁜 <Table>을 만들어 보는 시간을 가지겠습니다.

     2.2 준비사항
          - http://gocoder.tistory.com/8 이전 강의가 선행 되어야 합니다.

     2.3 테이블을 만들어 봅시다!!
          - 저번 강의에 함께 만들었던 index.html Body 태그안에 짜봅니다. 중학교 HTML 실습 시간이 기억나네요 
          - 아래와 같이 테이블 기초적인 태그가 나왔습니다. 혹시 이게 이해가 안된다면 검색엔진에! HTML 강의를 찾아서 보고 오세요!!
          - 그래도 겁먹지 마세요 몰라도 그냥 하다보면 아시니 이 강의를 지켜보셔도 문제가 없을 겁니다.

          ▼ 웹페이에 실행시켜 보시면  웹스톱에선 alt+f2 를 누르시면 되고 홈에디터 플러스에서는 Ctrl+B를 누르시면 됩니다.
<Table>
    <thead>
    <tr>
        <Td>이름</Td>
        <Td>나이</Td>
        <Td>주소</Td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <Td>지브이</Td>
        <Td>26</Td>
        <Td>상수동</Td>
    </tr>
    <tr>
        <Td>하이리</Td>
        <Td>26</Td>
        <Td>태릉입구</Td>
    </tr>
    <tr>
        <Td>래부기</Td>
        <Td>26</Td>
        <Td>망원동</Td>
    </tr>
    </tbody>
</Table>

          ▼ 디자인이 없는 순수 <table>이 나타났네요. 
  이게 Class 속성 한방으로 얼마나 변하는지해봅시다.

          ▼ 변한건 없습니다. class="table" 이 테이블 속성에 추가 되었습니다.
<Table class="table">   <!--table 속성을 지정해보자-->
    <thead>
    <tr>
        <Td>이름</Td>
        <Td>나이</Td>
        <Td>주소</Td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <Td>지브이</Td>
        <Td>26</Td>
        <Td>상수동</Td>
    </tr>
    <tr>
        <Td>하이리</Td>
        <Td>26</Td>
        <Td>태릉입구</Td>
    </tr>
    <tr>
        <Td>래부기</Td>
        <Td>26</Td>
        <Td>망원동</Td>
    </tr>
    </tbody>
</Table>

          ▼ class 지정 한방에 완벽한 반응형 디자인이 되었습니다. 왼쪽은 일반적인 1920 사이즈고 오른쪽은 모바일 해상도로 줄여봤습니다. 
          ▼ 놀라울 정도로 깔끔하네요 여기서 끝이 아닙니다. 이외에도 많은 디자인 요소를 제공합니다.

     ▼ 아래와 같이 입력하고 다시 웹에서 실행해봅시다.
<table class="table table-striped table-bordered table-hover">
<!--table 속성을 지정해보자-->

     ▼ 벌써 이쁜 게시판이 보이기 시작합니다.  속성에 대한 설명입니다.
table-striped : 얼룩말처럼 라인에 홀수 짝수를 다르게 보여주게 합니다.
table-bordered : 이름에도 보이듯이 라인을 칠해줍니다. 세로선이 생겨있네요
table-hover : 마우스를 올리면 하일라이트 됩니다. 지브이라는 이름 위가 조금 더 진하죠? 마우스가 올라간 상태입니다.

     ▼ 홈페이지 만들겠다고 Css 건들이다 집어 치울일이 없겠네요 ㅎㅎ

     ▼ 이번엔 <Tr>과 <Td>에 아래처럼 입력해봅시다.

text-warning, text-success, text-info : 텍스트 색깔을 이름에 맞게 바꿉니다. 자연스럽고 이쁘네요
text-center, text-left, text-right : 텍스트를 정렬합니다. 
bg-danger, bg-info : 바탕화면 색깔을 바꿉니다. 

     ▼ 말도 안되는 모양으로 나오겠지만 연습하는것이므로 해당처럼 코딩 합니다.
<tr class="text-success bg-danger">
    <Td >하이리</Td>
    <Td class="text-warning">26</Td>
    <Td class="text-info">태릉입구</Td>
</tr>
<tr class="text-left bg-info">
    <Td>래부기</Td>
    <Td class="text-center">26</Td>
    <Td class="text-right">망원동</Td>
</tr>

     ▼ 해당 모양처럼 나옵니다. 간단하고 직관적인 CSS 명명으로 여러가지 모양으로 바뀌었습니다. 다양하게 사용하면 됩니다. 


     2.4 페이징을 만들어 봅시다.

          - 잘따라왔습니다. 이번엔 게시판에 꽃 페이징을 만들어 봅시다. 
          - 부트스트랩은 페이징 디자인도 가볍게 만들수 있습니다.

          ▼ 테이블 아래 해당 클래스를 추가해주세요 
pagination : 페이징 디자인을 쉽게 할수 있는 클래스명
pagination-lg , pagination-sm : 페이징 디자인 속성중 하나 크게, 작게 
<div class="text-center">
    <ul class="pagination pagination-lg"<!--부트스트랩에서 제공하는 페이징 마법사(?)-->
        <li><href="#">1</a></li>
        <li><href="#">2</a></li>
        <li><href="#">3</a></li>
    </ul>
</div>

          ▼ 뚝딱 페이징 까지 있는 게시판 디자인이 다 만들어졌습니다. 완벽합니다!!!




3. 마무리

     - 가볍게 게시판 디자인을 만들어봤습니다. 
     - 간단한 class 명만 대입하고 명명규칙만 이해하면 아주 가볍고 직관적으로 반응형 웹을 만들어 낼 수 있습니다. !
     - 2과를 하면서 자신감이 붙었을꺼라 믿습니다. 다음 시간에는 이 디자인에 버튼을 추가해보겠습니다. 


댓글을 달아 주세요



1. 부트스트랩이란

     1.1 제작사 http://getbootstrap.com/ (한글 번역 개인사이트 http://bootstrapk.com/)
          - 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다.
          - 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 개발하였습니다. (둘이 안사귐 게이아님)            




     1.2 목적
          - 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리
          - 디자인으로 인한 개발시간을 단축하기 위한 개발도구   


2. 부트스트랩 설치

     2.1 설치설명
- 부트스트랩 설치는 압축을 풀기만 하면 됩니다. 
- 프로젝트 할때 디자인과 퍼블리셔가 css,js 폴더를 만들어주고 나서 개발을 시작할텐데 바로 그 CSS 폴더를 제공해주는 것 입니다.
- 웹스톰 같은 IDE를 프로젝트시 자동으로 다운로드 하여 환경을 제공해주고 있지만, 일부 에디터툴은 홈페이지에서 다운로드 하여 압축을 풀어 배치 하면 완료 됩니다.
          - 설치 과정을 살펴보겠습니다.

     2.2 설치방법 / webstrom
          - 웹스톰은 훌륭한 개발 도구입니다. jetbrain IDE중 하나입니다. 이 툴의 사용법은 나중에 올려보겠습니다.
          - 이 IDE는 부트스트랩을 자동으로 설정해줍니다. 
          - 방법은 너무 간단해 글로만 남기려다. 처음 접하는 코더분들도 있으니 그림도 남겨봅니다.

          ▼ 프로젝트를 create 합니다. 해당 화면이 바로 안나오면 file->new project 클릭

           그리고 중간에 있는 Twitter Bootstrap을 클릭합니다. 로케이션에 폴더를 지정하고 버전은 새로고침 버튼을 누르면 최신버전까지 릴리즈 되어 있습니다.         
           최신 버전을 선택하고 오른쪽 아래에 Create 

 
          ▼ 아래화면 처럼 완성 되어 있습니다. 네 이게 다입니다. 앞서 말했다 시피 그냥 css , js 폴더를 제공 받은것입니다. 
           웹스톰으로 설치가 완료하였습니다.



     2.3 설치방법 / Home Edit Plus      
          - 이번엔 전 국민에 사랑을 받는 홈에디터플러스 사용자를 위한 설치 방법입니다.
          - 파일 복사가 전부이고 홈에디터플러스 설치라고 하기엔 어색하지만 아직 개념이 잡히지 않은 코더들을 위해 설명하겠습니다.

           http://bootstrapk.com/getting-started/에 접속해 Download Bootstrap 을 클릭합니다.

           맨위에 있는 Download Bootstrp을 클릭하여 zip 파일을 다운로드 합니다.
           Less로 구성된 source code는 시간이 나면 다시 리뷰하겠습니다.


           그리고 압축파일을 풀어 그대로 사용할 폴더에 이동시킵니다. 
           압축 푸는법은 아시죠??? 개발자라면 7z 도 가능한 반디집을 추천 합니다.


           에디터 플러스에 해당 폴더를 이동하면 역시 Css, JS폴더가 보입니다. 설치(?)가 완료되었습니다.
           웹스톰으로 설치시 보이지 않던 fonts 폴더가 있네요. 해당 부분은 차차 알아가보도록 합니다.


     

3. 부트스트랩 실행


     ▼ index.html 파일을 루트(/) 경로에 만듭니다. (이제부턴 jetbrain으로)
     ▼ OK 버튼을 눌러 생성하고


▼ 그리고 해당 파일에 아래 코드를 입력합니다.
▼ 부트스트랩을 쓰기 위한 아주 기초적인 형태입니다. 
▼ 맨 아래쪽에 보시면 jquery.min.js 를 다운로드 하여 참조하였습니다. 구글 API서버도 훌륭하겠지만 다운로드 받아 참조하는게 이롭겠습니다.
▼ 그리고 자신만에 was로 실행해봅니다. (가장 쉬운건 IIS 서비스로 실행시키는거지요. 이부분도 어려운 코더라며 추후에 블로그를 남기겠습니다. )
▼ 하지만 IDE가 제공하는 환경을 사용해도 무방 합니다 웹스톰 alt+f2 에디터플러스는 ctrl+b 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>

    <!-- 부트스트랩 -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>Hello, Bootstrap!</h1>

<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="js/jquery.min.js"></script> 위 js를 다운받아 폴더에 참조하였습니다. 이렇게 하는게 더 좋겠죠? -->
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>


     - 드디어 Hello Bootstrap를 찍었군요. 
     - Hello를 보면 또 새로운 공부의 시작이라 생각이 듭니다.!! 


5. 마무리

     - 쉬운 부트스트랩 설치 과정이었습니다. 
     - 다음강좌부턴 본격적인 부트스트랩 강의에 들어가겠습니다.



댓글을 달아 주세요