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

           getbootstrp.com에 접속해 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. 마무리

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



댓글을 달아 주세요