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

Publication

Statistics Graph

Category

Recent Comment

2015.10.31 17:24 HTML5, CSS3/CSS

10월 마지막날 유난히 차가운 공기를 마시며 사당역에서 지하철을 타고 구로디지털단지에서 내렸다. 익숙한 풍경이 한눈에 들어왔고 갈곳의 골목을 헤아려 보지도 않고 찾아갔다. 오늘은 처음으로 CSS강좌를 듣는날이다. CSS 를 강좌로 들어보질 않았고 어떤 내용일지 하나하나 따져보고 싶기 때문에 프론트 앤드 개발을 위해 수강하게 되었다. CSS는 디자인 영역이기도 하지만 개발자 영역에 들어와 함께 고려해야할 사항이다. 총 4일간의 일정으로 CSS 배우게 된다. 실습을 통해 보고 느껴보자. CSS는 사랑. Love is Touch~~~ 




Web Components의 세상


늦어도 5년 후에는 웹 컴포넌트로 통일 된다. 컴포넌트의 구성요소는 HTML, CSS, DOM, JavaScript 이고 이들은 분리해서 생각할 수 없고 개발자는 각 요소를 확실히 알고 가야 한다. 최근 인기있는 프레임워크인 Angular, React, Polymer등의 기본은 웹 컴포넌트이다. CSS는 HTML, SVG 콘텐츠의 시각적 표현을 담당한다. 





CSS Specification


CSS 스펙 진행사항

  - Level1 : 1996.12.17

  - Level2 : 2011.06.07 종료

  - Level3, 4 : 진행중


CSS 스펙 한글버전


W3C는 표준이 아니라 권고(Recommendation)을 사용

  - 표준은 모든 브라우저(5대 브라우저)가 사용해야 표준이 된다.

  - 표준 진행 상태 단계

    WD: 초안

    LC, LCWD: 최종 초안

    CR: 권고 후보

    PR: 권고안 

    REC: 최소 2개 브라우저에서 지원





CSS 룰셋


Selector와 Property 에 값을 설정한다. (참조)




Value 설정

  |, ||, && 사용

  modifier: 정규표현식으로 [] * + ? 기호 사용


그외

  shorthand 사용   

  벤더 식별자(prefix) 사용: -ms- mso- (MicroSoft), -moz- (Mozilla), -o- -xy- (Opera Software), -webkit- (Google Chrome, Apple) - 참조

  @import "xxx.css"; 처럼 뒤에 반드시 ; 세미콜론 넣는다. @안에 @을 넣을 수 없다. 

  Default Style Sheet : selector에 기본 적용된 스타일이 있다. - 스펙

  길이 단위: px, em 이다. 0일 경우 px 붙이기는 옵션





단위


  절대 단위 

    - mm(밀리미터) 

    - cm(센치미터)

    - 1in(인치) === 2.54cm

    - pt(포인트) === 1in/72

    - pc(피카) === 12pt

    - 1px(픽셀) === 0.75pt


 상대 단위

    - em: font-size가 상댓값의 기준 예) font-size em을 작성하면 부모 엘리먼트의 font-size가 기준이 된다. 반응형 웹 사이트의 경우 유용

    - ex: 영문 소문자 x의 높이가 상댓값 기준. x-height라 부름

    - %: font-size 50% 형태로 작성. 부모값 기준

JS Bin on jsbin.com


  



Cascade


케스케이딩은 3가지 스타일시트를 적용하는 규칙이다. 


스타일 시트 원천(origin) 타입

 - Author: 개발자가 작성한 것

 - User: 콘텐츠 사용자가 직접 핸들링 가능

 - User agent: 브라우저 디폴트 스타일시트 적용

   (스펙)


개발자 스타일(Author)

  <link href="xxx.css" rel="sytlesheet" type="text/css">

  <p style="property: value">


사용자 스타일

  - IE에서 적용가능


케스케이딩 사전 준비

  - 스타일을 적용을 위해 먼저 DOM(Document) Tree를 만들어야 한다. 

  - DOM트리를 읽으며 CSS 적용을 위한 박스 모델을 생성(generate)한다. 

    즉, HTML에 DOM tree처럼 CSS는 Box 모델이 있다. HTML/CSS는 둘다 DOM, Box와 같이 오브젝트 모델을 갖는다. 

  - 생성된 박스 모델에 따라 프로퍼티 값 추가

  - 박스 모델

    



엘러먼트에 스타일시트 프로퍼티 적용 우선 순위

  - 밑으로 갈 수록 우선순위가 높음: 되도록 !important는 사용치 말자. 

    1. 브라우저 디폴트 스타일 시트

    2. 사용자 스타일 시트

    3. 개발자 스타일 시트

    4. 개발자 !important

    5. 사용자 !important

  - selector에 따른 적용 순위

    우선 순위 계산 방법에 따라 적용 (참조)

    CSS 스펙에서 #wrap은 id="wrap" 이고, .wrap은 class="wrap"을 표현한다. 

  - 적용 방법

    <link>

    @import

    <style>: head 또는 body 작성가능 

    inline: <p style="xxx">


@import

  - 파일을 분리해서 관리 

  - @import  url("xx.css");





Box Model


박스 모델을 통해 컨텐츠의 위치와 이웃과의 경계를 만든다.  (참조)


- line box

  margin, border, padding, 컨텐츠를 가진 박스생성하고 엘리먼트에 연결(링크)

  DOM트리의 논리적 순서(Logical Order) 중심


- inline box 

  style 중심의 시각적인 순서(Visual Order)로 각 엘리먼트를 정리함


- border-color

  border-<top, right, bottom, left>-color

Border Color on jsbin.com


- border-style

  디폴트 none

JS Bin on jsbin.com


- border-width

  thin, medium, thick

JS Bin on jsbin.com

- border-shorthand

  border-width, border-style, border-color 지정

  TRBL 지정불가

Border Shorthand on jsbin.com


- border-radius

  모서리 둥글게

Border radius on jsbin.com


- padding

  table에서는 패딩은 제외된다. 

  1개 모두

  2개 위/아래, 좌/우

  3개 위/좌/우, 아래

  4개 위/우/아래/좌


- margin, margin-collapse(상쇄) 

  margin-top, margin-bottom, margin-left, margin-right

  2개 이상의 box(엘리먼트)가 연속되어 있을 때 마진이 상쇄된다. 한쪽으로 접힌다. 하나는 10이고 다른 하나가 10이면 20이 아니라 10이 된다. 

  수직(위/아래) 마진 상쇄가 기본이다.  (밑의 값이 마진으로 잡히고 위의 값이 상쇄된다.)

  수평방향은 상쇄하지 않는다. 

JS Bin on jsbin.com


- outline

  자리를 차지 하지 않고 콘텐츠 위에 표현

  width, height에 영향을 주지 않는다. 

  TRBL 지정 불가 

  

- outline-style

  border-style과 유사


- outline-width

- outline-color  

outline on jsbin.com





Formatting 


DOM 트리 구조를 시각적 형태와 구조로 만들려면 규칙이 필요하다. 이를 위한 규칙을 정의한것이 시각적 형태 모델(Visual Formatting Model)이다. 

박스 생성 레이아웃 조건

  - 박스 치수 : w, h

  - 타입: block level, inline level

  - 위치 결정: flow, float 절대 위치

  - DOM 트리에서 엘리먼트 간의 관계 

  - 외부 정보, 예) viewport size, 이미지 본래 사이즈


사용할 프로퍼티 

  - display: 박스 표시

  - position: 박스 위치 

  - float: 박스 정렬

  - clear: float 삭제

  - z-index: 3차원 레이어 


Viewport

  브라우저가 제공하는 window 또는 다른 형태의 스크린 영역, viewport에 다큐먼트의 콘텐츠 표현

  CSS의 Canvas는 정형화된 구조로 렌더링되는 공간을 의미

  뷰포트 사이즈가 변경되면 브라우저는 다큐먼트 레이아웃을 변경

  

포함블록(Containing Block)

  안에 Child 엘리먼트가 들어갈 수 있는 엘리먼트로 박스 위치와 크기는 시각형 가장자리를 기준으로 계산된다. 이때 사각형을 포함 블록이라 한다. 

  - 블록 레벨 엘리먼트 : <p>, <div>

  - 블록 레벨 박스 : display 프로퍼티를 이용. 의도적으로 블록 레벨 박스를 만들고 싶을 경우 display 속성을 이용하는 것이다. 

     display: block, list-item, table 

  - 블록 컨테이너 박스 : 블록 박스로 보자

  - 블록 : 블록 레벨 박스, 블록 컨테이너 박스, 블록 레벨 엘리먼트 3가지를 총칭해 블록이라 한다.  

  * 부모 블록 박스내에 텍스트는 익명 블록 박스로 만든다. 


inline-level box

  <em>, <strong> 인라인 엘리먼트는 새로운 콘텐츠 블록을 형성하지 않고 라인안에 콘텐츠를 분리. 인라인 엘리먼트는 인라인 레벨 박스를 생성한다.  

  display: inline 설정 

  

display

  inline, block, list-item ... 종류가 많음. 기본값 inline 이다. 

  상속 안됨 

formatting on jsbin.com





위치 결정 체계


3가지 체계로 포지셔닝 한다. 

  - Normal Flow: 일반적인 포지셔닝. block level box의 블록 포맷팅. inline-level box의 포멧팅

  - Float : Normal Flow로 포지셔닝한 후 박스를 왼쪽 또는 오른쪽으로 이동

  - Absolute :  지정한 위치로 이동, Normal Flow와 연동안함 


Position

  - 종류: static, relative, absolute, fixed, inherit 

  - static 

    디폴트 값으로 Normal Flow의 일반적 포지셔닝

    top, right, bottom, left 적용 안 됨 

  - relative

    Normal Flow로 박스 위치 계산. 해당 위치에서 상대 offset 값을 구해 포지셔닝, 

    relative 박스의 다음 박스는 relative 박스 공간을 유지한다. 

Position relative on jsbin.com


  - absolute

    TRBL지정위치로 이동

    Normal Flow와 완전히 단절 된다. 

  - fixed 

    absolute와 같은 방법으로 포지셔닝이나 창 스크롤해도 지정한 위치에 고정

Position absolute on jsbin.com

   

  - relative 부모와 absolute 자식을 혼합할 때

    relative 부모는 body가 되어 absolute 자식이 움직인다. 

    이때 offset 기준으로 relative 값이 반영된다. 

Position relative absolute on jsbin.com


  - fixed

    스크롤에도 박스가 그대로 위치한다. 

Position fixed on jsbin.com



Box offset 

  - position static이 아닐 때 지정가능 

  - top, right, bottom, left로 지정: %로 지정 가능

  - 부모의 width 에 대한 %만큼 위치 offset을 한다. 

Box Offset on jsbin.com



float

  - 포함 블록 행을 기준으로 박스를 좌우로 이동한다. 

  - float된 박스가 있으면 겹치지 않고 좌우로 이동한다. 이동할 공간이 없으면 수직으로 이동한다. 

  - float 해제를 위해 clear를 사용한다. 

float on jsbin.com




신고
posted by peter yun 윤영식
2013.11.28 09:32 HTML5, CSS3/CSS

Bootstrap은 CSS Framework으로 프리젠테이션을 담당하고 jQuery UI 와 Angular.js는 자체 컨트롤도 가지고 있지만 DOM 핸들링을 한다. 만일 서비스를 만드는데 Bootstrap + jQuery UI 조합일 때 또는 Bootstrap + Angular.js 조합일 때 그리고 Bootstrap + jQuery UI + Angular.js 조합 일때 프리젠테이션을 통합하는 방법은 어떤 것들이 있을까? 각 조합에 대해 어떻게 사용할지 알아보자.



1. Twitter Bootstrap 만 사용할 경우 

  - 부트스트랩만 놓고 보면 CSS Framework으로써 기본적인 Fluid Layout 형태와 기본 HTML 컨트롤의 모양을 정의하고 있다

    또한 JavaScript 기반 다양한 component들도 포함한다 

  - 부트스트랩의 CSS 부분을 향상시키고 extra component를 추가한 부분 변경모델은 Bootflat, Bootplus, FlatStrap, LeapStrap

  - 또는 다양한 완성체 템플릿을 startBootstrap같은 곳에서 만들어 제공도 한다 

    



2. Twitter Bootstrap + jQuery UI  함께 사용할 경우 (이제 없어졌다)

  - 문제는 여기서 부터 시작한다 

  - Bootstrap의 CSS 스타일이 존재하고 jQuery UI 도 자체 theme을 CSS로 정의하고 있다

  - Boottrap의 CSS를 jQuery UI에 접목하여 사용할 경우는 jQuery UI Widgets 에 대해서 Bootstrap theme을 입힌 것을 사용한다

    http://addyosmani.github.io/jquery-ui-bootstrap/

    



3. Twitter Bootstrap + Angular.js 함께 사용할 경우

  - Angular에 JavaScript component를 포팅하기 위하여 Directive로 감싸야하는 문제가 있다

  - jQuery UI와 Bootstrap theme을 결합하였다면 Angular.js 와 Bootstrap theme 을 결합하고 있다

  - 하지만 이것은 Bootstrap v2.3.* 버전의 component를 Angular.js Directive로 구현하는 것이다

    http://angular-ui.github.io/bootstrap/

    



4. Twitter Bootstrap + jQuery UI + Angular.js 함께 사용할 경우 

  - 해당 형태는 3번의 연장선으로 보면 된다 

  - Twitter Bootstrap의 javascript component를 Angular.js Directive화 하였듯, jQuery UI component들도 Directive화 한것이다 

    http://angular-ui.github.io/

     

   - 소스 : https://github.com/angular-ui/


기존의 JavaScript Component를 처리하려면 Directive화 과정을 거쳐야 하는데 이런 번거로운 과정을 해소하고자 Bootstrap의 JavaScript Component를 Directive로 만들어 놓은 Angular UI Bootstrap이 나왔다. jQuery UI를 지원하기 위하여 Angular UI 에 상당부분 즐겨 사용하는 JavaScript Component를 포함시켰으나 이 또한 jQuery UI의 모든 것을 커버하고 있지는 못하다. 


이래저래 문제되는 것은 Angular.js를 기반으로 개발할 때 UI를 담당하는 JavaScript Component를 Angular.js의 Directive화를 잘 해야 한다는 것이다. 



<참조>

  - Bootstrap ToolBox : 다양한 UI 컴포넌트들 

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

개발자들이 서비스를 만들면서 어렵게 여기는 부분이 디자인이다. 특히 웹 서비스를 만들라 치면 어디서 부터 시작해야 할지 난감할 때가 있는데 이를 해소하고자 CSS Framework를 오픈소스로 제공하는 업체들이 늘어나고 있다. 가장 유명한 Twitter Bootstrap 부터 Pure까지 그 종류도 많은데 어떤 것들이 있는지 정리해 본다. 정리하면서 느끼는 것은 Bootstrap을 확장한 framework인 Bootflat, Maxmertkit같은 것이 좀 더 다양한 느낌의 모듈을 제공하고, Metro UI스타일의 Flat 디자인을 언젠가 꼭 써보고 싶다. 그리고 GroundWork, Foundation, Pure 도 테스트해 볼 필요가 있겠다. 그외의 웹 모듈은 선택한 CSS Framework에 Add할 수 있는지 확인 후 쓰면 되겠다 



Twitter Bootstrap

  - http://getbootstrap.com/

  - CSS 화면 레이아웃과 스타일 제공

  - 화면 구성을 위한 jQuery 접목된 JavaScript 컴포넌트 제공 

  - RWD (반응형 웹디자인) 제공 : RWD 25개 도구들

  - 다양한 곳에서 많이 사용하나 개인적으로 색감이 이젠 식상할 때가 된 듯함

  - Bootstrap 확장 툴박스들 소개  그외 정리한 툴들 (강추)

  - OpenTutorial 동영상으로 배우기

  - Bootstrap v3 으로 화면 만들기

  - 다양한 도구와 컴포넌트 목록 *강추

  - BootStrap Theme 바꾸는 방법




Semantic UI

  - http://semantic-ui.com/

  - Bootstrap같은 기계적인 용어보단 인간친화적인 CSS Class 명칭

  - 좀 더 상업적인 UI 제작에 필요한 다양한 웹 모듈 제공

  - 개인적으로 인간친화적인 따뜻한 색감을 좋아함




Zurb Foundation 

  - http://foundation.zurb.com/

  - 다양한 화면 레이아웃 템플릿 제공으로 빠른 포로토타입핑 가능

  - RWD 제공

  - 웹서비스 페이지 만들기 적합




BootSnipp

  - http://bootsnipp.com/

  - Bootstrap에서 사용하는 코드 템플릿 제공

  - 다른 Template 리소스 사이트들



Start Bootstrap Template

  - http://startbootstrap.com/

  - template을 가지고 시작해 보자 

  - BootPlus에서도 제공함 

  - CodeStrap 또 다른 변형

  - http://bootswatch.com/ 에서는 다양한 Theme 색감의 bootstrap 선택가능



Bootflat

  - http://www.flathemes.com/

  - Bootstrap v3.0 확장판이다 

  - Bootstrap css 파일과 확장된 css를 링크하므로 Bootstrap에서 모자란 부분을 보완할 수 있다

  - https://wrapbootstrap.com/ 의 테마들처럼 Bootstrap 확장 느낌이 난다 



BootPlus

  - http://aozora.github.io/bootplus/

  - Bootflat과 유사한 기능을 제공

  - CSS의 느낌을 좀 더 간결하게 표현함 



FlatStrap

   

  - http://flatstrap.org/index.html

  - Bootflat과 유사함 



LeapStrap

  - http://wilkesalex.github.io/leapstrap/

  - touch smart device 고려 



FuelUX

  - http://exacttarget.github.io/fuelux/

  - Bootstrap 스타일의 다양한 컨트롤러 



PixelKit 

  

  - http://pixelkit.com/

  - 프리미엄 UI Kits 을 Theme별로 제공을 한다 

  - 예제 Sweet Candy

  - 소스 : https://github.com/Pixelkit/PixelKit-Bootstrap-UI-Kits

  - 상용이다 



Maxmertkit

  - http://www.maxmert.com/

  - Bootstrap 과 유사한 느낌을 전달 CSS class가 항시 "-" 또는 "_"로 시작하여 다른 CSS Framework와 충돌방지 

  - Bootflat에서 제공하지 않는 3D 적인 디자인과 효과 좋음 

  - Bootstrap css 파일과 혼용하여 사용할 수 있는지 체크 필요



Metro UI CSS

  - http://metroui.org.ua/

  - MS의 Metro Flat 디자인 제공

  - Bootstrap에서 느끼지 못하는 깔끔함이 있음 

  - RWD 제공




GroundWork

  - http://groundwork.sidereel.com/

  - 웹페이지, 이미지 겔러리, 커머스사이트 레이아웃 예제 제공

  - 다양한 화면사이즈에 대한 테스트 제공 (RWD)

  - 개인적으로 좋아하는 약간 따뜻한 색감 

  - 웹 모듈은 많지 않고 다른 UI 툴과 연계해서 사용하면 좋을 듯함



Pure

  - http://purecss.io/

  - Yahoo 에서 만듦

  - 사이즈 작고 flat한 디자인으로 간결한 맛이 있음 



Ink v.2

  - http://ink.sapo.pt/

  - 빠르게 웹 인터페이스를 개발할 수 있는 툴이다 

  - RWD 제공

  - Bootstrap과 거의 유사

  - Drap 컴포넌트 제공 



UIKit

  - http://getuikit.com/

  - 30가지의 UI 모듈을 제공

  - 다른 CSS Framework엔 없는 효과를 준 모듈 존재



Amazing Web Library

  - http://a-web.me/

  - UIKit과 유사하지만 차트와 그리드에 대한 부분이 강력함 




Brick

  - http://mozilla.github.io/brick/

  - 모질라에서 제공

  - 모바일에 특화된 UX적인 효과 제공

  - 모바일 예제 데모를 충실히 보여줌 



MicroJS

  - http://microjs.com/ (강추)

  - 다양한 웹 컴포넌트 검색 

  - 파일 크기 명시



<참조>

  - 원문 : 10 Free UI Kit

  - 원문 : 18개의 CSS Framework

  - 50개의 Web Developer를 위한 리소스와 툴들

  - Twitter Bootstrap v3 이해하기

  - Yahoo Pure에 대하여

  - HTML5 free Layout Template을 얻고 싶다면

  - UI Kit Maker

  - 유용한 CSS 도구들 (필독)

저작자 표시 비영리 변경 금지
신고
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.05.09 23:19 HTML5, CSS3/CSS

RWD는 Responsive Web Design (반응형 웹 디자인)을 일컸는다. 어떻게 시작해야 할지 경험한 내용을 정리해 본다. 먼저 http://www.unitedpixelworkers.com 사이트를 들어가서 브라우져 사이즈를 모바일 기기 크기 - 스마트폰, 테블릿 - 로 변경하여 본다. 반응형 웹 디자인이 무엇인지 감상해 보시길...



1. 개념잡기 

  - RWD의 기초 개념이해

    + Fluid images  : img{ max-width: 100%, height: auto }

    + Fluid Grid : fluid-container안에서 움직임. 해상도에 따라 floating 

    + Media Queries : @media screen and {max-width: 980px} , 다양한 기기의 해상도에 따른 화면 사이즈 변경

  - Font Responsively : 폰트를 픽셀로 할지 %로할지 em으로 할지에 대한 반응형 폰트. %로 한다 

  - Fluid Layout : Fixed 에서 Fluid(Liquid) 로 변화 이젠 Hybrid layout으로 간다 

  - Custom Grid Layout : div[ float: left, width:200px }, header, content, sidebar, footer의 구분예

  - Responsive Imagery : 모바일 속도 향상을 위하여 이미지도 minify

  - Browser Compatibility : 브라우져 호환도 중요


  반응형 웹 디자인은 각 경우에 충족하는 디자인이 되었는지 살펴 보아야 한다. 



2. 반응형 패턴

  - 반응형으로 만들기 위한 패턴을 익힌다 : Responsive Patterns

    + Layout : 전체 위치 잡기

    + Navigation : 메뉴 구조화 하기 

    + Image : 이미지

    + Media : 비디오

    + Forms : 입력 제출

    + Modules : 기타 위젯들

  - Creating a Mobile-First Responsive Web Design : 실제 간단한 실습을 해본다  



3. 개발자가 사용할 도구 & 소스

  - Twitter Bootstrap

    + 가장 많이 사용하는 CSS, Widget 이면서 Responsive 지원 

    + 부트 스트랩 어떻게 사용하는지 프로토 타입핑해 본다  

    + Wrap Bootstrap 사이트에서 Bootstrap을 어떻게 확장했는지 보자 (상업용 구매 사이트) : 전부 반응형 웹 디자인 템플릿

       외국의 퍼블리셔는 그래픽 작업 및 RWD를 위한 HTML5 & CSS3 그리고 기본 jQuery 자바스크립트 코딩을 한다!!!

       솔루션 개발에 많이 참조하고 있는 사이트이다. 

    + Bootstrap 가지고 서비스를 만드는 회사들이 존재 : http://www.layoutit.com/

  - Zurb Foundation

    + 사이트 제작에 적합하다고 판단 됨

  - Gumby Framework 

    + RWD를 기반의 웹사이트 제작 프레임워크 

  - 그외 RWD를 위한 도구들 (필독)

  - 깃헙에서 rwd 또는 Responsive 로 검색하면 개발자들이 만들어 놓은 간혹 괜찮은 RWD들이 올라와 있다

    + Iacien Collapsible Menu

  - 15개의 신규 CSS Frameworks



<참조> 

  - 반응형 웹 디자인의 이슈 : 우리나라 어느 퍼블리셔 발표 자료 

  - 10 가지 쥑이는 RWD 예제 사이트

  - Responsive Design 프리젠테이션

  - ViewPort에 대한 이해

  - ViewPort와 Media Queries의 적용 예제 및 데모

  - RWD 연재 글 2편 : RWD 어디에 사용할까?

  - SpeckyBoy - RWD 웹사이트 만들기 with Gumby

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

Sass의 반복 작업을 더욱 깔금하게 만들어주는 Compass에 대해서 알아보자



1) 개요

  - Compass에 대한 전반적인 개요

  

  - Ruby로 개발되어진 툴이기 때문에 Ruby 설치가 필요하다 

2) 설치 및 사용법
  - 설치 : gem install compass
  - 생성 : compass create <MyProject>  
    + 프로젝트 밑으로 .sass-cache 폴더와 sass/.sass-cache 폴더가 생성된다 
    + config.rb : 환경설정 내경이 반영되어 있다 
$ tree
.
├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

2 directories, 7 files

////////////////////////////////////////////////////////////
// config.rb
$ cat config.rb
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
.. 중략..


   + 생성시의 옵션 : --help

$ compass create sass-bootstrap --help


Usage: compass create path/to/project [options]


Description:

Create a new compass project at the path specified.


Options:

        --using PATTERN              A framework's pattern to use when creating the project.

    -x, --syntax SYNTAX           Specify the syntax to use when generating stylesheets.

                                              One of sass or scss. Defaults to scss.

        --prepare                         Prepare the project by only creating configuration files.

    -r, --require LIBRARY            Require the given ruby LIBRARY before running commands.

                                              This is used to access compass plugins without having a

                                              project configuration file.

    -l, --load FRAMEWORK_DIR         Load the framework or extensions found in the FRAMEWORK directory.

    -L, --load-all FRAMEWORKS_DIR    Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.

    -I IMPORT_PATH                   Makes files under the IMPORT_PATH folder findable by Sass's @import directive.

    -q, --quiet                           Quiet mode.

        --trace                            Show a full stacktrace on error

        --force                            Allows compass to overwrite existing files.

        --dry-run                        Dry Run. Tells you what it plans to do.

        --boring                          Turn off colorized output.

    -c, --config CONFIG_FILE     Specify the location of the configuration file explicitly.

        --app APP                      Tell compass what kind of application it is integrating with. E.g. rails

        --sass-dir SRC_DIR          The source directory where you keep your sass stylesheets.

        --css-dir CSS_DIR            The target directory where you keep your css stylesheets.

        --images-dir IMAGES_DIR  The directory where you keep your images.

        --javascripts-dir JS_DIR     The directory where you keep your javascripts.

        --fonts-dir FONTS_DIR      The directory where you keep your fonts.

    -e, --environment ENV          Use sensible defaults for your current environment.

                                              One of: development (default), production

    -s, --output-style STYLE       Select a CSS output mode.

                                             One of: nested, expanded, compact, compressed

        --relative-assets              Make compass asset helpers generate relative urls to assets.

        --no-line-comments         Disable line comments.

        --bare                            Don't generate any Sass or CSS files.

    -?, -h, --help                       Show this message


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
TAG compass
2013.04.20 12:19 HTML5, CSS3/CSS

Sass는 CSS를 재미있게 만들어준다. 개발자에겐 접근하기 쉽겠지만 디자이너에겐 개발에 대한 고민을 하게 만드는 것같다. 하지만 현대적인 웹개발을 위하여 이제는 피할 수 없는 대세(?)인 Sass를 익혀야 한다.



1) 개요

  - 만들어진 배경에 대해서 이해하자 

  


  - 여러 기능들의 본질은 간결하고 반복작업을 없애주는 웹 개발 흐름을(Web Development Workflow) 만들어준다

    + Nested Rules : 들여쓰기 가능 - 상위 개체에 대한 정의를 줄인다 

// CSS

table.hl {

  margin: 2em 0;

}

table.hl td.ln {

  text-align: right;

}


// SCSS (Sassy CSS)

table.hl {

  margin: 2em 0;

  td.ln {

    text-align: right;

  }

}


// SASS

table.hl

  margin: 2em 0

  td.ln

    text-align: right


    + Variables : 변수를 사용하여 반복적인 상수를 줄인다 ($를 사용)

// CSS

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}


// SCSS

$blue: #3bbfce;

$margin: 16px;


.content-navigation {

  border-color: $blue;

  color:

    darken($blue, 9%);

}


// SASS

$blue: #3bbfce

$margin: 16px


.content-navigation

  border-color: $blue

  color: darken($blue, 9%)


    + Mixins : 반복적인 입력을 함수화하는 것처럼 이용하여 코드를 줄인다 (@mixin @include 이용)

// CSS

#data {

  float: left;

  margin-left: 10px;

}

#data th {

  text-align: center;

  font-weight: bold;

}

#data td, #data th {

  padding: 2px;

}


// SCSS

@mixin table-base {

  th {

    text-align: center;

    font-weight: bold;

  }

  td, th {padding: 2px}

}


@mixin left($dist) {

  float: left;

  margin-left: $dist;

}


#data {

  @include left(10px);

  @include table-base;

}


// SASS

@mixin table-base

  th

    text-align: center

    font-weight: bold

  td, th

    padding: 2px


@mixin left($dist)

  float: left

  margin-left: $dist


#data

  @include left(10px)

  @include table-base


    + Selector Inheritance : 상속 개념으로 기존 코드를 줄인다 (@extend 사용)

// CSS

.error, .badError {

  border: 1px #f00;

  background: #fdd;

}


.error.intrusion,

.badError.intrusion {

  font-size: 1.3em;

  font-weight: bold;

}


.badError {

  border-width: 3px;

}


// SCSS

.error {

  border: 1px #f00;

  background: #fdd;

}

.error.intrusion {

  font-size: 1.3em;

  font-weight: bold;

}


.badError {

  @extend .error;

  border-width: 3px;

}


// SASS

.error

  border: 1px #f00

  background: #fdd


.error.intrusion

  font-size: 1.3em

  font-weight: bold


.badError

  @extend .error

  border-width: 3px


  - Sass는 두가지 문법으로 작성을 할 수 있다 

    + Scss : .scss 이고 {} 와 ; 가 존재, CSS3 의 확장자이다 (Sassy CSS)

    + Sass : .sass 이고 {} 와 ; 가 없고 대신 들여쓰기로 구분을 하여 간결함을 추구한다 (Haml 영향을 받음)

   


  - Sass는 색에 대한 Functions을 제공한다 (참조)

   예) 

   



2) 설치 및 사용법

  - gem install sass

  - 예제 코드 : dowon.scss

#dowon {

  width : 20%;

  height : 120px;

}

  - css 파일 변환하기 : sass --watch dowon.scss:dowon.css


  - Partials & Concatenation : @import 를 사용하고 분할된 파일의 컨벤션은 _partialFile.scss 즉 앞에 _ (underbar)를 붙여서 import 되는 파일을 따로 관리한다 그리고 컴파일을 하게 되면 지정한 하나의 파일 .css로 합쳐진다 


<참조>

  - Sass Tutorial

  - Sass References

  - Sass 온라인 테스트

  - Sass 개요 설명 - 한글

  - Sass 기능 설명 - 한글

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

JavaScript에 CoffeeScript가 있다면 CSS에는 Stylus같은 CSS-Preprocessor가 있다고 할까? DRY(Don't Repeat Yourself)를 통하여 반복되는 구문을 없애주고 , {} 의 사용이 필요없다. 그외 다양한 기능이 있으니 자신에게 맞는 것을 선택하여 쓰자. 



1. Stylus 

  - Stylus 만든 분의 소개 동영상


  - 하지만 Stylus말고도 Less, Sass등이 있었으니 이제 결정할 때가 된것 같다



2. Sass

  - Sass 와 Compass에 대해 자세히 알아보자 


  - 이젠 Modern Web Development Workflow에 CoffeeScript + Sass 를 접목하자 



3. Less 

  - 좀 더 간단하게 사용할 수 있다 
  - 사용방법과 문법 소개 



<참조>

  - CSS에 대한 기초

  - Sass & Compass 배우기 35개 리소스 목록

저작자 표시 비영리 변경 금지
신고
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

티스토리 툴바