블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2017.09.06 17:55 Angular/Prototyping

Clarity CSS 프레임워크는 VMWare에서 만들어 진 오프소스로써 Twitter Bootstrap 과 같은 업무용 스타일 프레임워크이다. 부트스트랩에 식상한 터라 Clarity의 깔끔함을 JHipster에 적용해 본다. 




Clarity 사용해 보기

clarity가 어떻게 동작하는지 알기 위해 clarity-seed 프로젝트를 다운로드해서 확인해 보자.

$> git clone https://github.com/vmware/clarity-seed.git

$> cd clarity-seed

$> yarn install

$> yarn start

yarn start v0.18.1

$ ng serve

** NG Live Development Server is listening on localhost:4200,


http://localhost:4200 접속 화면




JHipster 설치

JHipster는 Spring Boot + ORM + Angular를 합쳐놓은 Generator이다. JHipster는 과거 yo 기반의 generator-jhipster 를 제공한다.

$> yarn global add yo

$> yarn global add bower

$> yarn global add gulp-cli

$> yarn global add generator-jhipster


generator-jhipster가 설치되었다면 특정위치로 이동해서 jhipster명령을 수행한다. 

- Monolithic으로 선택

- 프로젝트명칭 입력

- JWT 선택

- SQL 선택: MariaDB, development시에는 H2선택

- ehcache 선택

- Maven 선택

- WebSocket 선택

- Angular 4 선택

- libSass 선택

- i18N 선택: ko, en

$> jhipster

Welcome to the JHipster Generator v4.7.0

Documentation for creating an application: https://jhipster.github.io/creating-an-app/

Application files will be generated in folder: /Users/dowonyun/prototyping/jhipster/jamong-admin-seed

? (1/16) Which *type* of application would you like to create? (Use arrow keys)

Monolithic application (recommended for simple projects)

  Microservice application

  Microservice gateway

  [BETA] JHipster UAA server (for microservice OAuth2 authentication)


선택을 완료하면 yarn install이 자동 실행되어 한참을 설치한다. 





Eclipse 설치 및 설정

JHipster 는 Java와 Typescript 코드로 이루어져 있으므로 Eclipse 최신 버전인 Oxygen을 다운로드해 사용한다. JDK8을 기본 사용하므로 사전 설치하고, Eclipse설치가 끝나면 Help메뉴 맨 아래에 있는 Marketplace에서 다음을 설치한다.


- STS (Spring Tool Suite)

- Angular IDE 2017 CI 7

- Dark Theme 설치


테마를 Sublime Text나 Monoaki 를 입히고 싶다면 테마를 검색해서, Eclipse > General > Appearance에서 theme XML 파일을 import 한다. 아래 이미지는 테마를 입힌 후 상태로 "Editor Colors" 밑줄에 "Import a theme..." 이 있다.



설정이 끝났으면 eclipse > file > Import Projects from File System를 통해 생성된 소스를 import 한다.





JHipster 수행

JHipster를 수행하기 위해서는 두개의 명령을 필요로 한다. 서버 수행시 mvnw은 maven이 설치되어 있지 않으면 자동 설치하고 수행하는 명령을 담고 있다. 서버는 8080으로 Listen 을 하고 Angular 클라이언트는 NodeJS기반 Proxy를 통해 8080 포트로 요청을 보낸다.


- 서버 수행: .mvnw

- 클라이언트 수행: yarn start


$> mvnw

... 중략 ...

----------------------------------------------------------

Application 'JamongAdmin' is running! Access URLs:

Local: http://localhost:8080

External: http://218.38.137.28:8080

Profile(s): [swagger, dev]

----------------------------------------------------------


$> yarn start

[Browsersync] Proxying: http://localhost:9060

[Browsersync] Access URLs:

 ---------------------------------------

       Local: http://localhost:9000

    External: http://192.168.202.38:9000

 ---------------------------------------

          UI: http://localhost:3001

 UI External: http://192.168.202.38:3001

 ---------------------------------------


브라우져에서는 9000 로 접속한다. 아래 화면을 이제 Clarity css 프레임워크로 바꿔보자.





Twitter Bootstrap을 Clarity 로 교체하기

Clarity-seed와 JHipster 둘 다 @angular/cli를 기본으로 하고 있기 때문에 루트에 있는 .angular-cli.json에 Clarity 관련 설정을 한다. (설정 사항 참조)


- JHipster는 @ng-bootstrap 모듈을 사용하고, @ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js를 사용한다.

- Clarity-seed는 clarity-angular 모듈을 사용한다.


일단, JHispter 프로젝트에서 Clarity관련 Icon 및 UI 설정을 해보자. 


Step 1) 설치

icon은 webcomponent를 사용하기 때문에 웹컴포넌트를 지원하지 않는 브라우져를 위해 polyfill을 설치한다. 

// icon 설치

$> npm install clarity-icons --save

$> npm install @webcomponents/custom-elements@1.0.0 --save


// ui 설치

$> npm install clarity-ui --save

$> npm install clarity-angular --save


Step 2) @angular/cli 설정

JHipster 프로젝트에 별도의 css

"apps": [{

... 중략 ...

       "styles": [

                "../../../node_modules/clarity-icons/clarity-icons.min.css",

                "../../../node_modules/clarity-ui/clarity-ui.min.css",

                "content/scss/vendor.scss",,

                "content/scss/global.scss"

        ],

        "scripts": [

                "../../../node_modules/@webcomponents/custom-elements/custom-elements.min.js",

                "../../../node_modules/clarity-icons/clarity-icons.min.js"

         ],

}]


Step 3) Angular Module 설정

clarity-angular를 사용하기 위해 Angular 모듈에 clarity 모듈을 설정한다. 

// src/main/webapp/app/app.module.ts 안에 

import { ClarityModule } from 'clarity-angular';


@NgModule({

    imports: [

        ...

        // jhipster-needle-angular-add-module JHipster will add new module here

        ClarityModule

    ],

    ...

})



Step 4) yarn start를 하면 @angular/animations 모듈일 없다는 오류가 뜬다. Clarity icon에서 animation 모듈을 사용하기 때문이다.

@angular/animations v4.3.2 버전을 추가한다.

$> npm install @angular/animations@4.3.2 --save






Clarity 컴포넌트 사용하기









<참조>

Clarity 시작하기

- Clarity Icons

신고
posted by peter yun 윤영식
2015.08.15 12:26 React

서비스를 개발할 때 만들어 놓은 CSS 프레임워크를 사용한다면 보통 트위터 부트스트랩을 많이 선택한다. 앵귤러 프레임워크를 사용할 때 트위터 부트스트랩을 앵귤러 컴포넌트로 만들어 놓은 모듈을 사용하는데, 리액트에서는 어떤 것을 사용할 수 있는지 정리해 보자. 




트위터 부트스트랩

http://react-bootstrap.github.io/

  + v1.0.0 이 릴리즈 되었다. 

  + 부트스트랩의 기능을 충실히 구현




머터리얼 디자인

http://material-ui.com/

  + 구글의 머터리얼 디자인을 충실히 구현

  + 모바일 first 디자인




그외 프레임워크 

http://elemental-ui.com/

  + 가장 기본적인 부분들을 리액트 컴포넌트로 제공


http://nikgraf.github.io/belle/

  + elemental-ui와 유사


http://semantic-ui.com/

  + 리액트 컴포넌트로 만들어져 있지 않지만 앞으로 만들어 보고 싶은 css 프레임워크

  + v1.* 보다 다양한 실용적인 Theme을 제공하고, 컴포넌트가 다양하다. 

  + 향후 직접 React UI Component로 만들어 사용할 예정!





모바일 전용 프레임워크 

http://touchstonejs.io/

  + ionic 의 css 와 유사하게 native 느낌을 준다. 





<참조>

- 리액트 12가지 css 프레임워크

- 리액트로 만든 관리자 화면 예제 : ClojureScript를 사용해서 React 컴포넌트를 개발했음

- 다양한 React UI Components 목록



신고

'React' 카테고리의 다른 글

[React] Semantic-UI를 React 컴포넌트로 만들기 - 1  (0) 2015.08.23
[React] CSS Framework 선정하기  (0) 2015.08.15
[Flux] Flux 배우는 방법  (0) 2015.07.04
[React] AngularJS와 ReactJS 비교  (0) 2015.07.01
[React] 배우는 방법  (0) 2015.05.15
posted by peter yun 윤영식
2013.12.15 13:38 AngularJS/Start MEAN Stack

개발자들이 가장 힘들어 하는 부분은 UI 개발이라 생각한다. 더 나아가 UX(User eXperience)를 어떻게 UI속에 녹여내어 편의성과 제품의 가치에 맞는 감성을 넣을 수 있을지도 고민해 보아야 한다. 막상 클라이언트 개발을 시작하였지만 마땅히 디자이너의 도움 없이도 완성도 있는 서비스를 만들고 싶다면 CSS Framework을 사용해 보자. 


요즘 추세는 크게 두가지 측면으로 움직이는 것 같다. 하나는 웹의 모양과 색감등 보여지는 부분을 담당하는 CSS를 프레임워크화하여 일관된 UX를 전달해주고 있고 이를 공개하고 있다. 이중 가장 유명한 것이 트위터 부트스트랩이다. 버전 3.0 에서는 반응형 웹 디자인(RWD, Responsive Web Design)이 기본으로 적용되어 모바일 스마트기기의 해상도에 따라 화면이 최적화되어 표현될 수 있도록 하는 기능을 제공한다. 둘째는 플랫디자인이다. 구글이나 애플에서 주도를 하고 있고 간결하면서 사용성을 늘린 디자인으로 보인다. 기본 트위터 부트스트랩을 확장하여 플랫디자인 CSS를 적용한 다양한 CSS 프레임워크를 제공하고 있다. 


따라서 트위터 부트스트랩을 기본으로 하여 확장한 CSS 프레임워크를 사용하게 되면 '반응형 웹 디자인' 과 '플랫디자인'을 동시에 충족하여 적용할 수 있게 된다. 두가지 요소에 대해서는 이곳의 주제와 약간 벗어나므로 좀 더 전문적인 서적을 통해 개념과 상세 기능을 익히기 바란다. 여기서는 선택한 CSS 프레임워크를 어떻게 적용하고 활용하는지 중점적으로 보도록 하겠다. 



1. 반응형 웹 디자인 고려

  - Fluid Layout : 화면 사이즈에 따라 배치된 요소들의 정렬을 재 배치하는 것이다. 화면이 작아진다고 하여 좌우 스크롤이 생기는 것이 아니라 요소가 밑으로 흘러들어 간다. 이를 위하여 부트 스트랩은 Grid 12 컬럼으로 요소 배치 및 플루이드 정렬을 할 수있다 

  - Responsive Menu : 부트 스트랩은 상단에 메뉴를 놓고 해상도에 따라 메뉴의 형태를 자동 변경해 준다 

서비스 개발이 위의 두가지를 먼저 유념하여 사용하도록 한다. 기본적인 사용법은 트위터 부트스랩의 홈페이지를 참조하자 



2. 플랫 디자인에 대한 고려

애플은 iOS7에서 플랫디자인을 선보이고, 구글은 전사 서비스를 플랫디자인으로 도배하고 있습니다. 프러덕트 디자이너가 Visual 단계에서 바라본 플랫디자인의 요소 5가지를(참조) 유념하여 개발자가 UI와 UX를 플랫 디자인으로 진행할 때 고려해야할 사항에 대해 미리 알아두면 좋을 것 같습니다.

     + Use of simple elements 

        심플한 아이콘 : 사각, 원형의 단순 모형에 배치, 컬러, 형태로 표현 -> 사용자가 UI 를 쉽게 인식하고 사용토록 만든다 

     + Absence of depth 

        배제된 효과 : 그림자, 입체감, 그라데이션등의 현실감있게 하는 3D적 효과를 배제하여 직관적으로 만든다  

     + Typography

        타이포그래피 : 화려한 폰트를 배제하고 간결한 폰트를 사용한다. 예) 산세리프 

     + Color

        단순한 칼라 : 2~3가지 또는 5~6가지의 색상만을 사용하여 간결하고 과감하고 표현한다. 핑크그린블루가 대세  

     + Minimalism

        미니멀리즘 : 미니멀리즘과 부합 - 간단하고 심플하게 표현으로 다양한 웹, 모바일에 적응이 쉽다  



3. 서비스 디자인으로 나아가야 한다 

  서비스을 만들 때 개발자는 어떻게 접근을 하고 있을까요? 아마도 대부분 디자이나 웹 퍼블리셔가 만들어준 화면에 코딩을 하는 정도를 경험했으리라 봅니다. 하지만 자신의 웹앱 서비스를 만들기 시작한다면 단지 디자인이 문제가 아니라 UX라는 사용자 경험을 고려하여 사람과 컴퓨터의 상호작용을 생각해 보아야 하고, 우리가 만들려는 프로덕트의 가치를 서비스에 어떻게 녹여 내야 하는지 연구하고 새롭게 창조하는 과정을 거쳐향 합니다. 이를 줄이면 서비스 디자인이라고 말하며 서비스 개발전 우리가 사용하는 도구와 프레임워크들이 가치를 창출하기 위하여 어떻게 쓰여야하는지 큰 뷰에서 설명을 해주고 있습니다. 인식의 전환을 통하여 중요한 가치를 찾고 반응형 웹 디자인이나 플랫 디자인이 왜 나왔는지 이해하여 보는 것도 재미날 것같습니다. 한국디자인진흥원의 윤성원님이 이야기하는 서비스 디자인 개념 자료를 한번 보시면 쉽게 이해 되리라 생각합니다. 


  - 서비스 디자인 이란 무엇인가? - 개념 이해


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.11.12 01:45 HTML5, CSS3/jQuery

jQueryUI는 jQuery를 기본으로 하면서 뷰를 표현하는 다양한 컴포넌트, 위젯을 모아놓은 User Interface를 모아 놓은 것이다. 어떻게 시작할 수 있는지 알아보자 




1. 사전 지식

  - 먼저 데모페이지에서 어떤 종류의 컴포넌트가 있는지 보자 

  - 여러 종류의 컴포넌트중 사용하길 원하는 부분만 Download Builder 를 통하여 다운로드한다



2. 파일 다운로드하기 

  - Download Builder에서 필요한 컴포넌트 -Core, Interactions, Widgets, Effects - 를 선택한다. 

  - 사용할 테마(Theme)를 선택한다. ThemeRoller 에서 사용자 정의도 가능하고 이미 만들어진 것을 선택할 수 있다

  - jQuery UI 버전 - 1.10.3/1.9.2 - 을 선택한다. jQuery 버전은 1.6 이상을 요구한다

  - 마지막으로 download 버튼을 클릭한다. 다운로드 파일 예) jquery-ui-1.10.3.custom.zip

// 압추을 풀면 폴더와 파일 존재한다. index.html 를 브라우져에서 확인해 볼 수 있다

/css

/development-bundle

/ js

index.html 

  - index.html 의 내용

// css를 추가

<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />

// jquery를 먼저 위치시킴

<script src="js/jquery.min.js"></script>

// jquery-ui를 위치시킴

<script src="js/jquery-ui.custom.min.js"></script>

  - smoothness theme을 선택했을 경우




3. 사용자 정의하기

  - JSON 형태로 옵션 객체를 전달한다. API를 확인하고 설정한다

$( "#mySliderDiv" ).slider({

    orientation: "vertical",

    min: 0,

    max: 150,

    value: 50

});

  - jQuery UI 개발에 참여하고 싶다면 Development Center로...



4. 동작방식 이해하기 

  - jQuery UI widgets은 공통 API를 제공하는 Widget Factory 기반으로 생성된다

  - Widget Life Cycle

    + Initialization : 플로그인을 펑션을 호출한다. 옵션이 없으면 default 옵션이 적용된다 

$( "#elem" ).progressbar();

또는

$( "#elem" ).progressbar({ value: 20 });

    + Methods : 최기화 된 후 상태를 조회하거나 액션을 수행할 수 있다. 메소드 이름 "value" 호출하여 40을 설정. 체이닝 호출 가능함.

$( "#elem" )

    .progressbar( "value", 90 )

    .addClass( "almost-done" );

    + Command Methods : option, disable, enable, destroy, widget 

$( "#elem" ).progressbar( "disable" );

$( "#elem" ).progressbar( "enable" );

$( "#elem" ).progressbar( "distroy" );

    + Events : 모든 동작에 대한 위젯별 이벤트 콜백 펑션을 설정한다. 공통 이벤트는 위젯 생성후 호출되는 create 이 존재함

// bind 호출 후 위젯명+이벤트명 연결하여 호출 

$( "#elem" ).bind( "progressbarchange", function() {

    alert( "The value has changed!" );

});


// 위젯 호출 후 change에 콜백 펑션 정의

$( "#elem" ).progressbar({

    change: function() {

        alert( "The value has changed!" );

    }

});

 


5. 테마 설정하기 

  - 기본적으로 jQuery UI CSS Framework - ui.theme.css - 와 plugin 별 CSS가 조합되어 만들어진다

    + ui.theme.css는 ThemeRoller 를 통하여 변경하는 경우

    + ui.theme.css 또는 widget plugin css를 직접 CSS를 변경하는 경우

    + 완전히 새로운 CSS를 만드는 경우 예) Twitter Bootstrap CSS를 jQuery UI에 적용 

    



6. CSS Framework API 이해 

  - ui.core.css 와 ui.theme.css 두개로 분리된다  

  - Layout Helpers : .ui-helper-*

  - Widget Containers : .ui-widget-*

  - Interaction States/Cues : .ui-state-*

  - Icon : .ui-icon 형식) .ui-icon-{icon type}-{icon sub description}-{direction}

  - Corner Radius : .ui-corner-*

  * jQuery UI Theme Base 깃헙 소스



7. 직접 Theme 만들기 

  - 디렉토리 구조 만들기 

// 1. themename 폴더 만들기 

/themename


// 2. 기본 css 파일 만들기

/themename/themename.css


// 3. 플러그인 css 파일 만들기 

/themename/themename.pluginname.css


// 4. 이미지 포함하기 

/themename/img.png

  - 스타일링 : .ui-themename 으로 한다면 하기와 같이 사용한다 

<html>

<head>

    <title>My Site</title>

    <link rel="stylesheet" href="themename/themename.css" />

    <link rel="stylesheet" href="othertheme/othertheme.css" />

    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />

</head>

<body class="ui-themename">

    <div class="ui-othertheme">

        <div class="ui-dialog">This is a modal dialog.</div>

    </div>

</body>

</html>



8. Widget Factory 사용하기 

  - 위젯 만드는 일관성을 보장하기 위함 

  - jQuery.widget 또는 $.widget 호출을 통하여 만든다

    + Context Object 이다. DOM은 아니다

    + Single Object로 생성된다 

// 1) namespace 는 한개의 depth만 허용하여 만들 수 있다. 여기서는 custom 이 namespace 이다 

$.widget( "custom.progressbar", {

 

   // 2) instance의 option내역 및 default 값 정의 

    options: {

        value: 0

    },

 

   // 3) 위젯 생성

    _create: function() {

        var progress = this.options.value + "%";

        // jQuery Object 

        this.element

            .addClass( "progressbar" )

            .text( progress );

    },

 

    // 4) 사용할 메소드 생성

    // Create a public method.

    value: function( value ) {

 

        // No value passed, act as a getter.

        if ( value === undefined ) {

            return this.options.value;

        }

 

        // Value passed, act as a setter.

        this.options.value = this._constrain( value );

        var progress = this.options.value + "%";

        this.element.text( progress );

    },

 

    // Create a private method. _ 즉 underscore를 하면 private 메소드가 된다 

    _constrain: function( value ) {

        if ( value > 100 ) {

            value = 100;

        }

        if ( value < 0 ) {

            value = 0;

        }

        return value;

    }

});

  - 사용하기 

var bar = $( "<div></div>" )

    .appendTo( "body" )

    .progressbar({ value: 20 });

 

// Get the current value.

alert( bar.progressbar( "value" ) );

 

// Update the value.

bar.progressbar( "value", 50 );

 

// Get the current value again.

alert( bar.progressbar( "value" ) );

  - 그외 Option 동작, Triggering CallBack Function, CleanUp with Destroy방법은 링크 참조한다



<참조>

  - jQuery UI Getting Start 

  - jQuery UI How to Work 

  - Theming jQuery UI

  - jQuery UI CSS Framework API

  - jQuery UI Theme Base 깃헙 소스

  - Twitter Bootstrap CSS를 jQuery UI에 적용

  - How to Use Widget Factory

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.08.07 14:17 HTML5, CSS3/CSS

Bootstrap을 사용하는 것이 너무 식상하다면 새로나온 CSS Framework인 GroundWorkCSS를 사용해 보자. Bootstrap이 도시적 간편함이 묻어 있다면 GroundWorkCSS는 인간미 있는 편안한 전원생활을 즐기는 느낌이랄까? 




1. 설정

  - 홈페이지 상단 우측 "Templates" 옆에 다운로드 아이콘 클릭 (GitHub Repository)

  - 중요파일

    + css/groundwork.css

    + js/groundwork.all.js

  - 옵션파일

    + css/groundwork-ie.css (IE Compatibility)

    + js/libs/html5shiv.min.js (IE Compatibility)

    + css/font-awesome-ie7.min.css (IE Compatibility)

    + js/plugins/jquery.cycle2.js (Required for Cycle2)

  - 설정

// HTML head 안에 

<link type="text/css" rel="stylesheet" href="/css/groundwork.css">

<!--[if IE]><link type="text/css" rel="stylesheet" href="/css/groundwork-ie.css"><![endif]-->

<!--[if lt IE 9]><script type="text/javascript" src="/js/libs/html5shiv.min.js"></script><![endif]-->

<!--[if IE 7]><link type="text/css" rel="stylesheet" href="/css/font-awesome-ie7.min.css"><![endif]-->


// HTML 최하단에 

<script type="text/javascript" src="/js/plugins/jquery.cycle2.js"></script>

<script type="text/javascript" src="/js/groundwork.all.js"></script>

  - jquery.cycle2.js 는 뭐지? 이미지 슬라이드 기능이다



2. 기능

  - Bootstrap에서 제공하는 font typography, button, tab, menu, grid, etc등은 기본 제공한다

  - RWD (Responsive Web Design) 를 지원한다

  - 웹화면을 위한 Template Layout도 제공한다 

  - 단 Bootstrap의 Javascript로 첨부한 기능을 전부 만족하진 못하지만 jQuery Plugins 통해서 보충하면 될듯함 

  - 제공하는 Components

    

 


<참조>

  - 홈페이지 : http://groundwork.sidereel.com/

  - 저장소 : https://github.com/groundworkcss/groundwork

  - 다양한 CSS Framework 들 비교 : 개인적으로 Metro UI도 좋다

    

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.01.26 00:53 HTML5, CSS3/CSS

트위터의 개발자와 디자이너는 웹 디자이너나 개발자에게 좀 더 나은 삶을 주고자 Bootstrap이라 불리는 프레임워크를 내놓았다. 원문의 Bootstrap 시작하기를 사용해 보고 원문과 함께 정리해 본다. 역시 Bootstrap 사이트에서 따라하기 해보는 것이 가장 좋겠다. 



1. Bootstrap 활용하기 

  - 반응형 레이아웃의 CSS Grid

  - 서체, 버튼, 폼, 테이블, 이미지에 대한 CSS

  - 네비게이션, 프로그레스바, 경고창등의 사용자 인터페이스 컴포넌트

  - 홈페이지에서 다운로드를 할 수 있다

  - 디렉토리 구조 

  


 - HTML 첨부 하기

  

 

  - 반응형 웹사이트 : width가 줄어들면 메뉴형태가 자동 변경 및 레이아웃 자동 조절됨 (데모사이트)

    + 넓이가 넓을때 메뉴 예

     

    + 넓이가 줄어들때 메뉴 변경 예

     



2. CSS Base: Button 

  - <button type="button" class="btn">Default Button</button>

  


  - <button type="button" class="btn btn-success">Button</button>

    <button type="button" class="btn btn-warning">Button</button>

    <button type="button" class="btn btn-danger">Button</button>


  - Bootstrap 스타일은 LESS로 빌드되었다.

   @btnSuccessBackground:              #bce895; //#62c462;

   @btnSuccessBackgroundHighlight:     #a0cd78; //#51a351;


 - 그룹 버튼

  <div class="btn-group">

   <button type="button" class="btn btn-success">Button</button>

   <button type="button" class="btn btn-warning">Button</button>

   <button type="button" class="btn btn-danger">Button</button>

  </div>



3. JQuery Plugin

  - $('#container').tooltip({

      selector: "a[rel=tooltip]"

    });

  <p id="container">Jujubes icing oat cake 

<a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop tiramisu</a>. 

Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum 

jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi 

bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.</p>




4. Bootstrap으로 만들어진 괴안은 사이트 

  - leanIX

  - 프리미엄 테마 구매 사이트 (강력추천)

  - 오픈소스 약간 메트로 스타일 사이트



<참조>

  - 원문 : http://www.hongkiat.com/blog/twitter-bootstrap/

  - Bootstrap 시작하기

  - 적은 자원으로 훌륭한 웹사이트를 만들기 위한 9가지 아이디어

  - Bootstrap+Node.js로 SPA 만들기

  - Bootstrap 267 리소스

  - CSS Layout 기초 배우기

  - Bootstrap에 대한 다양한 사용예제 블로그

  - 최근 version 3이 나왔다. 마이그레이션 관련내용

  - Twitter Bootstrap을 확장한 Jasny Bootstrap

  - Facebook 스타일의 Bootstrap 제공

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next