AI Convergence

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% 형태로 작성. 부모값 기준

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-style

  디폴트 none

- border-width

  thin, medium, thick

Selector는 패턴에 매치되는 노드를 추출하는 것이다. Selector를 배워보자 

Selector

패턴사용은 div[class] 이다. 스펙 참조. 

"querySelector vs querySelectorAll" : finding element

엘리먼트를 추출한다. querySelector는 하나만 찾고, querySelectorAll은 모두 찾아준다. 

"Selector Attribute, Selector-Pseudo"

li:nth-child 같은 것은 Selector-Pseudo 이다. 

CSS

Cascading Style Sheet. 콘텐츠의 표현. HTML 엘리먼트에 CSS 적용. 모바일에서 SVG의 용도는 Zoom In/Out해도 깨지지 않는 해상도를 지원한다. 

"Rule Set"

CSS를 설정하는 규칙 

"HTML 엘러먼트에 스타일 적용 순서"

디폴트 스타일 < 사용자 스타일 < 개발자 스타일

개발자 스타일이 가장 높음.

"Default Style"

<h1>이 <h2>가 큰 것은 디폴트 스타일에서 적용되어 있기 때문이다. (스펙 참조)

"사용자 Style"

브라우저에 스타일 지정이 가능하다. IE에서만 가능 (옵션에서 사용자 스타일 파일을 지정해 주면 된다.) 예로 만일 파란색을 강제로 브라우저레벨에서 노란색으로 보고 싶을 경우 사용한다. 

"개발자 Style"

개발자 Style 에서 !important 사용은 많이 고려한다. 가장 우선하기 때문이다. 

"DOM View는 최종적으로 스타일이 적용된 상태이다."

최종으로 적용된 스타일 추출로 DocumentView, AbstractView 인터페이스가 있다. 

"getComputedStyle() 은 우선순위에 의해 최종적으로 스타일이 적용된 결과값을 준다."

IE는 currentStyle이다. 

Ajax

"Asynchronous JavaScript + XML"

Jesse James Garrett이 2005년 2월 18일 블로그에 썼다. 제목은 A New Application to Web Application으로 웹 애플리케이션이라 말을 처음 거론함. 이전은 마크업으로 말함. 

"JJG의 원문 블로그를 읽자" 

AJAX는 기술이 아니다. = "XHTML/CSS" + "XML/XLST" + "XMLHttpRequest(XHR)" + "DOM" + "JavaScript" 현재는 "XHTML/CSS"는 "HTML5"가 되고, "XML/XLST"는 사용 안한다. 각 요소기술을 AJAX라고 부른다. 

"XMLHttpRequest는 HTTP 통신 오브젝트이다."

비동기 통신을 하여 데이터 송수신 한다. XMLHttpRequest가 Ajax가 아니라 Ajax라 통칭하는 개념의 일부 요소기술이다. 

"Ajax Web Application Model"

비동기로 받은 데이터를 DOM 제어를 통해 반영한다. Web Application이 복잡해 지면서 MVC, MV* 패턴들이 나온다. 

"동기, 비동기 통신의 차이"

동기는 요청을 보낸 후 응답이 오기전까지 사용자의 액티비티를 할 수 없다. 비동기는 요청과 상관없이 사용자 액티비티가 가능하다. 

피곤할 때는 술 한잔을 하고 자면 풀릴까 하고 두잔을 하고 잤더니 피곤이 풀리기는 커녕 눈꺼풀만 무겁다. 7시 알람이 휴대폰에서 요란하게 울리지만 20분을 뒤척인 끝에 DOM생각에 벌떡 일어나 냉동실에 얼려 놓은 찹쌀떡을 하나 먹고 길을 나썼다. 관악산의 산바람이 시원하게 얼굴을 스치고 반바지 아래로 차가움이 감싼다. 2일차 DOM강의실로 삼양 컵라면 하나를 들고와서 따끈한 국물을 마시고 손놀릴 준비를 한다. 

Event

"다큐멘트에서 발생하는 이벤트를 설정하고 작용한다."

이벤트 설정에는 이벤트 타입이 있다. 이벤트 처리는 핸들러/리스너라 부르지만 리스너가 표준(스펙)용어이다. 캡쳐/버블은 DOM Tree와 관련이 있다. 이벤트의 버블링은 document 밑의 html 객체까지 올라간다. 기본이 이벤트 전파이기 때문에 적절히 방지를 해주어야 한다. 

"스펙을 보자. 이벤트 스펙"

이벤트 전체 스펙을 읽어보자 

Target : 이벤트가 발생한 곳

1, 2, 3 : 이벤트의 발생 Phase

"캡쳐, 버블링"

window부터 캡쳐링 된다. DOM의 path구조를 메모리상에 만들어 놓고 캡쳐/버블링 phase로 찾아간다. 예로 아래와 같이 파란색의 tr을 클릭하면 먼저 밑으로 간 후 위쪽으로 버블링된다. 3번의 버블링은 막을 수 있지만 1번 단계는 막을 수 없다. 왜 버블링을 발생하고 막게 할 수 있을까?

                                         그림에 대한 참조 사이트

"이벤트 설정은 element.addEventListener() 이다."

버블/캡쳐가 기본이고 캡쳐링은 모든 리스너가 무시(false) 한다. IE 6,7,8은 attachEvent() 이고 파라미터가 2개이다. 그리고 IE 6,7,8에서는 캡쳐/버블링을 하지 않는다. HTML5는 on을 넣어 이벤트 리스너를 표현한다. 예) onclick

"이벤트 리스너 사용 예제"

clickNode.addEventListener('click', handleClick, false); 소스에서 세번째 파라미터가 false 이면 버블링을 리스너가 처리하고 true이면 캡쳐링을 리스너가 처리한다. 전파(propagation)에 대해 버블링 막기는 event.stopPropagation() 호출한다. 태그에 할당된 이벤트를 막기위해 예로 <a> 태그의 화면 이동을 막기위해 event.preventDefault() 호출한다. 

토요일 이른 아침 부슬부슬 비가 내리고 있다. 요즘들어 늦게 잠이 들기 때문에 7시가 되어도 이른 아침의 피곤함을 느낀다. 하지만 오늘은 기대하던 DOM 사상을 배우는 날이라 아침까지 챙겨먹으며 몸단장하고 지하철에 올랐다. 주말이라서 사람들이 없어서 다행이다. 사람들이 눈을 감고 잠을 자는지 명상을 하는지 생각하고 있는 사이 가산 디지털단지에 도착. 창업진흥원을 찾아 20층에 올라왔다. 강의장은 아래 모습으로 마치 헤커톤에 온듯 자유로운 공간을 가지고 있다. 바로 앞에 사자머리 제임스 고슬링 코스프레 아저씨가 버티고 있어서 시야를 방해한다. 그래도 React가 Virtual DOM을 만들어 지원하고 있는데 DOM을 알 수 있다면 이쯤이야... 

시작하기 

"DOM은 사용자를 고려한다" 

기술중심의 언어가 아닌 사용자 중심의 언어이다. DOM은 UI/UX를 제공하고 사용자의 접점이기 때문이다. 웹페이지 구성을 보면 HTML은 구조 CSS는 표현 DOM은 구조와 표현의 CRUD를 담당하고 통신은 HTTP, Socket, Ajax가 하고 Javascript는 컨트롤을 한다. 

"DOM은 동적이다."

동적 페이지를 제공하고, UI(User Interface)는 사용자 행동, 시스템 응답 중심이라면 UX(User eXperience)는 사용자 경험, 습관, 관습 중심이며 이벤트(Event)는 사용자 행동 인식 및 요구/요청에 응답한다. 이 모든 것은 DOM 기본으로 알아야 이해할 수 있다. 

"DOM은 도큐먼트로 작성한 것을 객체 개념으로 다양한 언어에서 접근토록 모델을 제공한다."

Document : "<!DOCTYPE html> ~ </html> 이 DOM 영역이다."

Object : 객체 개념으로 접근하고 객체 요소에는 행동과 속성이 있다. 이들은 key: value형태이다. 

Model : 다수의 언어에서 사용하기 위해 Interface 행태로 DOM을 제공한다. DOMString 형태로 표기한다. 

"Model을 바탕으로 Object를 만든다."

개발자 입장에서 중요한 것은 객체이고, 객체를 핸들링하는 것이다. 모델은 엔진이 사용해서 객체를 만들어 주는 시스템적인 것이다. Object로는 Document, Element, DOM Traversal, DOM/마우스/키보드/HTML/Mutation 이벤트, Selector, DOM View, CSSOM ( CSS Rule Set ) 등이다. 참조

DOM API/Level

"DOM의 기술적 의미는 API를 다루는 것이다."

DOM은 버전이라 하지않고 레벨이라 한다. DOM Level1은 마크업만 DOM Level2에서 CSS가 들어오고, 마우스 이벤트, DOM Traversal and Range가 들어옴. DOM 2부터 MS가 참여를 하지 않으므로 Cross Browsing 문제가 발생하기 시작한다. 관련된 iExplorer 버전은 6,7,8 이다. DOM 3는 XHTML 1.1 기준으로 나온다. 

"DOM Level 1, 2, 3 에서 HTML 5 로 넘어왔다."

많은 이벤트 타입이 생기고, CSSOM (CSS Object Model) 분리가 된다. 예로 CSS, Media Query, Selector 등이다.  

"HTML5의 핵심은 플랫폼이다."

오픈 플랫폼이며 표준을 바탕으로 하고, 최종 목적은 컨텐츠 제공이다. 브라우져 하나만 가지고 모든 것을 하겠다는 플랫폼의 의미가 들어왔다. 예로 Indexed DB 임베드. 네트워크가 끊어져도 작동을 할 수 있다. (스티브 잡스가 iPhone 4 발표때 HTML5를 이야기했다.)

"HTML5 분류는 마크업과 API이다."

마크업은 <video> <section>, 콘텐츠 모델이 새로 들어오고, <menu>, <i>, CSS 등이 재정이 된다. 

API는 <canvas> <svg>로 직접 표현이 가능하고, Web Socket, IndexedDB등을 JS로 제어해 간접 표현이 가능하다. 

* DOM 4는 HTML5 에서 분리되어 진행중이다. 

DOM 구성 요소 

"!doctype 최상위 요소 #document 이다."

Document -> Element -> Node

엘리먼트는 Element Interface를 Object로 생성한 것이다. 노드는 12개의 타입이 있다. 노드는 엘러멘트보다 더 작은 레벨이다. 노드도 오브젝트이다. 

크롬 DevTools를 통해 head의 Node목록을 보면 엔터(enter) 키가 있는 text까지 해서 총 7개의 노드가 존재한다. 

Document 객체의 속성을 살펴보자.

- doctype

- implementation : 브라우저에서 지원하는 기능. 자바스크립트에서 사용할 일이 별로 없다. 

document 메소드

getElemntsByName : 반환값 배열

getElementsByTagName : 태그의 이름, 반환값 배열 

getElementsByClassName : class 스타일 이름, 반환값 배열 

getElementById : id 이름. DOM Tree에서 가장 먼저 나온 id의 값을 리턴함 (만일 id가 중복되어 있다면), 객체

createElement / createTextNode / createAttribute / createDocumentFragment / createRange / importNode / adoptNode  ==> innerHTML 로 사용

createAttribute

Element

"엘리먼트 노드와 엘리먼트는 틀리다."

- 엘리먼트 노드 = <div id="sports">

- 엘리먼트 = <div> ~ </div> 

"엘리먼트는 오브젝트 관점과 Data 관점으로 보아야 한다."

HTML은 오브젝트이고 데이터가 있다로 인식을 변환한다. (DOM Spec Element Interface), 엘러먼트(div)에는 기본 13개의 속성이 존재한다. 노드의 명칭(nodeName)은 일반적으로 #을 붙여준다. 예로 #document로 표현한다. 

엘러먼트의 다양한 속성들 : nodeName, attributes와 classList 많이 사용한다. <!doctype> 때문에 tagName 대신 nodeName 을 사용한다. 

"Element-client 는 CSS BoxModel과 관계한다."

clientHeight : scrollBar, border, margin을 미포함한다. 즉, 엘리먼트 높이와 padding만 포함. 

clientWidth : 엘리먼트 넓이와 padding만 포함.

- Element Client

"CSS BoxModel은 margin padding border 이다."

Margin은 내집의 울타리 밖으로 다른 집과의 공통 구역. Padding은 내 울타리안이다. Border는 내 울타리의 넓이이다. 

clientHeight, clientWidth, clientLeft, clientTop 예제 

- Element Offset

"offset은 엘리먼트가 부모와 떨어진 거리이다."

position 속성(absolute, relative, fixed, static)에 따라 부모와의 offset 값이 틀려진다. 예로 마우스 클릭의 좌표값을 구할 때 사용. 

offsetHeight : 엘러먼트 높이 padding, scrollBar, baroder를 포함하고 margin 미포함 한다. 

offsetParent는 CSS offset과 관련이 있고 DOM tree에서 가장 가까운 선조 엘리먼트이다. 항상 offsetParent와 offsetElement가 같지는 않음 

- Element Scroll

scrollHeight : 엘리먼트 높이, padding 포함, scrollBar, border, margin 미포함 

- Element Child, 그외 것들 

childElementCount, childNodes : text 노드 포함 , children: text 노드 미포함 (Collection 타입)

childNodes는 7개이고 children은 3개이다. text는 엔터키 값을 갖는다. 

페이스북 같은 앱에서 사용하는 좌/우측 스라이딩 사이드 메뉴를 Angular.js 기반으로 만들어진 컴포넌트에 대해 알아보자. 

Angular-Snap.js

  - http://jtrussell.github.io/angular-snap.js/

  - 드래그하여 메뉴를 열수 있다 

  - 버튼 클릭으로 메뉴를 열수 있다 

  - IE8 지원하나 snap.js 가 IE8 미지원이므로 미지원

Angular-SlideNav

  - https://github.com/sthomp/angular-slidenav.js

  - 버튼 클릭으로 메뉴를 열수 있다 

  - IE8 미지원

jPanelMenu

  - http://jpanelmenu.com/

  - jQuery 기반 메뉴

  - IE8 ?

Sidr

   - http://www.berriart.com/sidr/

   - left, right 슬라이딩 메뉴 

   - IE8 지원

Nexus Style Side

  - http://www.jqueryscript.net/menu/Google-Nexus-Page-Like-Sidebar-Menu-with-CSS3-javascript.html

  - 작은 아이콘에서 큰 아이콘과 텍스트가 펼치는 효과 (강추)

  - IE8 미지원

Multi-Level Side Menu

  - http://www.jqueryscript.net/menu/Multi-Level-Slide-Push-Menu-with-CSS3-Javascript-MultiLevelPushMenu.html

  - 또 다른 멀티 레벨 메뉴 (강추) : 메뉴로 사용하기 괜찮음

  - IE8 미지원

Blueprint Side

  - http://tympanus.net/Blueprints/SlidePushMenus/

  - 왼쪽, 오른쪽, 위, 아래로 메뉴가 펼쳐진다

  - 스타일은 푸른색  

  - IE8 지원 

MMenu

  - http://mmenu.frebsite.nl/

  - 또 다른 jQuery MMenu (강추)

  - 모바일에 잘 맞는 슬라이딩 메뉴

  - 다른 컴포넌트도 있음 

  - IE8 미지원

Tegansnyder

  - https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu

  - jQuery Mobile Slide Menu : 페이스북 형태 

  - 페이스북과 유사한 Slide Menu 만들기 블로그 : 이것이 좀 더 괜찮음

  - IE8 지원

Snap.js

  - https://github.com/jakiestfu/Snap.js

  - left, right 메뉴 제공

  - 드래그 제공

  - 페이스북 스타일 제공

  - IE8, 9 미지원 

Meny

  - http://lab.hakim.se/meny/

  - IE8 지원

<참조> 

  - 원문 : Slide Out Sidebar Navigations

  - 원문 : jQuery Side Menu 목록

  - Angular Snap.js

  - Angular SlideNav

  - Angular Datatable

  - 15개의 RWD Menu 

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 컴포넌트들 

개발자들이 서비스를 만들면서 어렵게 여기는 부분이 디자인이다. 특히 웹 서비스를 만들라 치면 어디서 부터 시작해야 할지 난감할 때가 있는데 이를 해소하고자 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 도구들 (필독)

jQuery UI 스타일로 작성된 내역을 AngularJS 스타일의 개발방식으로 변형하는 방법을 알아보자

1. AngularJS 길을 가다 

  - jQuery에서 UI 컴포넌트를 모아 놓은 것이 jQuery UI라면 AngularJS기반으로 UI 컴포넌트를 모아 놓은 것이 AngularJS UI 이다

    사실, Angular UI는 jQuery UI를 AngularJS를 가지고 확장한 것이다

  - jQuery UI를 통하여 DOM을 조작하여 화면을 보여주는 것과 AngularJS를 통하여 UI를 조작하는 방법은 틀리다

  - AngularJS Way를 먼저 살펴본다  

  - AngularJS를 사용하여 SoC(Separate Of Concern) 관심분리를 수행하여 테스트 및 모듈화가 가능해 진다 

    + Controller : $scope를 통한 view와 two way binding 

    + Service : view와 분리된 비즈니스 로직 구현

    + Directive : 재사용 가능 컴포넌트이며 model 값을 DOM 프러퍼티와 연결해주고, DOM 이벤트 반응하여 model 값을 업데이트한다  

2. jQuery UI Plugin 방식을 보자 

  - datepicker에 대한 사용을 본다 

  - 자바스크립트 코드 : 비즈니스 로직과 DOM 조작이 합쳐져 있다. 날짜를 선택하면 해당 날짜의 값을 span에 표현함 

3. datepicker를 AngularJS 방식으로 SoC 분리해 보자

  - 위의 jQuery 방식을 angularjs 방식의 model, controller, directive로 분리해 본다 

  - AngularJS 접근법

   Step 1) Model을 먼저 생각하고 Service를 만든다

   Step 2) Model이 표현될 View에 대해 생각해 보고 template을 만들고, 필요하면 자동 모델 바인딩되는 Directive도 만든다.

   Step 3) 각 View 를 Controller에 연결한다 (ng-view and routing, ng-controller)

  - AngularJs 의 Step1), Step 2), Step 3) 수행

4. my-datepicker Directive 만들기 

  - AngularJS Directive 만들기에 따른 myDatepicker

    + compile 첫번째 phase : DOM 변경

    + compile 두번째 phase : DOM value 조작 

<참조>

  - 원문 : 존재하는 컴포넌트를 AngularJS의 Directives로 만들기

  - AngularJS Way

  - AngularJS Directive 만들기 

  - datepicker에서 $parse를 사용하게된 이유

jquery grid 플러그인 jqGrid를 사용하는 방법과 jquery-ui의 custom theme을 입히는 방법을 알아보자 

1. jqGrid 이해

  - jQuery Grid Plugin 이다 

  - Open Source, MIT License 이다. 즉, 상업적인 용도로 사용해도 된다 

  - jqGrid 설명을 보자

2. 테스트 환경 만들기 

  - Angular + Express 프레임워크를 Node.js 기반으로 테스트 할 것이다 (방법-3 Yeoman Generator FullStack 사용 통합)

3. jqGrid 설정하기 

  - 먼저 jqGrid 를 다운로드 한다 (bower install jqgrid 로 설치할 수 있으나 이상하게 에러 발생하여 직접 다운로드 설치 사용함)

  - 다운로드한 파일은 app/bower_components/jqgrid 폴더로 풀어 놓는다 

    + css 는 jquery-ui의 ThemeRoller에서 선택한 css를 적용하면 jqGrid의 theme 이 변경된다 

    + jquery-migrate를 반드시 설정한다 $.browser.msie 체크 기능은 jquery 1.4*버전에만 존재하여 최신버전에 없어졌다

    + jquery-ui.js 를 설정하고 언어패키지와 jqGrid.js를 최종 설정하게 된다 

  - app/view/main.html 수정

  - jqGrid 자바스크립트 코드 내역 

<참조>

  - jqGrid Homepage

  - jquery-migrate 하기

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 의 내용

  - smoothness theme을 선택했을 경우

3. 사용자 정의하기

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

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

4. 동작방식 이해하기 

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

  - Widget Life Cycle

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

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

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

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

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 만들기 

  - 디렉토리 구조 만들기 

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

8. Widget Factory 사용하기 

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

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

    + Context Object 이다. DOM은 아니다

    + Single Object로 생성된다 

  - 사용하기 

  - 그외 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

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)

  - 설정

  - 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도 좋다

요즘 들어 솔루션, 서비스를 만들때 늘 구글의 UX를 떠올린다. UI 보다 먼저 UX를 생각하게 되고 어떻게 하면 좋은 사용자 경험을 줄 수 있을까 생각한다. 구글의 10가지 디자인 원칙이라는 글이 있어서 잠시 요약해 본다. 제품/서비스 UX 설계시 이와 같은 관점에서 다시 생각해 보자. 

구글의 UX팀 목표

  - 실용적이면서 빠르고

  - 단순하면서 매력적이고

  - 혁신적이면서 보편적이고

  - 유익하면서 아름답고

  - 신뢰할 수 있으고 품위있는 

  디자인을 창작하는 것을 목표로 하고 있다. 

1. Useful

  - 사람을 향합니다. 그들의 삶과 일과 꿈을 위하여 

  - 사람이 원하지 않는 것을 강제하지 않는다

  - 보다 빠르고 창의적으로 일하게 한다

2. Fast

  - 천분의 일초까지 헤라린다

  - 구글의 페이지를 날씬한 코드와 주의깊게 선택된 이미지를 사용한다 

  - 불필요한 클릭, 타이핑, 단계 활동들을 제거된다

  - 필수 기능과 문자들은 가장 찾기 쉬운 위치에 배치된다

  - 단 한번의 정보만을 요청하고 단순한 기본값을 포함한다 

3. Simple

  - 단순함은 사용성, 속도, 시각적 호소력과 접근성을 포함하여 디자인의 많은 소요들에 작용한다

  - 단순함은 제품의 근본적인 기능에 대한 설계로 시작하지 풍부한 기능을 창작하는것으로부터 시작하지 않는다

4. Engaging

  - 많은 사람들을 위한 설계는 최소한의 공통분모를 위한 디자인을 의미하지 않는다

  - 고급 사용자들이 제품을 소개하는 동안 초심자가 가슴벅찬 첫 경험을 하도록 이끄는 것이다 

5. Innovative 

  - 혁신을 두려워하지 않는다 

  - 사용자의 욕구를 만족시켜주기만 한다면 혁신적이고 모험적인 디자인을 장려한다 

6. Universal 

  - 모두를 위한 설계를 한다 

  - 어떤 장치나 방법으로도 접근 가능하게 하며 현실에 대응 가능한 의미있는 제품을 디자인한다

  - 정보의 보편적 접근에 대한 사명은 구글의 제품이 보조기술을 지원토록 한다 

7. Profitable 

  - 사업계획에 도움이 된다 

  - 사용자들의 목표와 사업적인 고려를 한결같이 통합한다

  - 구글의 사용자를 감소시킨다면 제품으로부터 수익을 증가시키려고 노력하지 않는다. (광고)

8. Beautiful 

  - 주의를 산란시키지 않고 눈을 즐겁게 한다

  - 긍정적인 첫인상은 사용자를 편안하게 하고 믿음을 주며 자신들의 제품으로 만들 수 있다는 확신을 갖게 한다 

  - 최소한의 장식, 군더더기 없는 디자인은 빠르게 로드되고 사용자들의 목표달성에 방해를 주지 않는다 

  - 고상한 단순함 : 심미적 디자인은 사용성을 증가시키고 사용자를 즐겁게 한다 

9. Trustworthy

  - 사람들에게 확신을 주어야 한다 

  - 제품을 사용하는 사람들로부터 장기적인 신뢰를 얻어야 한다 

  - 경쟁자와 공헌자들의 링크 또한 포함시키며 세상을 향해 열려 있다 

  - 사용자들의 데이터를 보호한다 

10. Personable

  - 인간미를 보탠다 

  - 문자와 디자인 요소들은 친근하고 빠르고 재치가 있으면서 지겹지 않고 거만하지 않다 

  - 텍스트는 사람들에게 직관적이고 동일한 경험을 제공한다 

사용자들의 피드백에 열려있고 이에 반응하여 실행합니다. 그에 따라 혁신과 개선은 지속될 것입니다.  

<참조>

  - 원문 : http://fillrider.egloos.com/254736

  - UI 와 UX 차이 : 수화물 예제를 통한 설명 (필독)

  - 모바일에서의 UX 고려 사항 10가지 

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를 위한 도구들 (필독)

    + Iacien Collapsible Menu

  - 15개의 신규 CSS Frameworks

<참조> 

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

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

  - Responsive Design 프리젠테이션

  - ViewPort에 대한 이해

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

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

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

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

1) 개요

  - Compass에 대한 전반적인 개요

   + 생성시의 옵션 : --help

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

1) 개요

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

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

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

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

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

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

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

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

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

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

   예) 

2) 설치 및 사용법

  - gem install sass

  - 예제 코드 : dowon.scss

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

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

<참조>

  - Sass Tutorial

  - Sass References

  - Sass 온라인 테스트

  - Sass 개요 설명 - 한글

  - Sass 기능 설명 - 한글

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개 리소스 목록

자바스크립트 코드에서 이벤트 핸들러처리가 끝난 후 preventDefault() 와 return false 등의 코드를 본적이 있을 것이다. 간혹 stopPropagation() 호출도 보이는데 이들의 차이점을 알아보자 

1) preventDefault vs return false, stopPropagation : jQuery를 사용하지 않은 경우 

  - stopPropagation 은 사용자 정의 이벤트의 bubbling up 되는 것을 막아준다 

    + 이벤트와 이벤트 핸들러를 찾기 위한 캡쳐링과 버블링에 대해 이곳을 참조한다.

    + 사용자 정의 이벤트는 개발자가 직접 이벤트 핸들러를 작성할 경우

    + 즉, 사용자가 작성한 이벤트 핸들러의 동작을 막아준다

  - preventDefault 는 기본 정의 이벤트의 동작을 막아준다 

    + <a href..> 앵커 태그와 같은 기본 제공 이벤트 (사이트로 이동하는 것) 

    + 즉, 기본 이벤트의 동작을 막아준다 

  - return false 는 jQuery 사용할 때와 안할 때의 반응이 틀리다

    + jQuery 사용안할 때는 preventDefault와 동일하게 동작한다 

  - 주석 a, b, c 케이스 테스트 : 화면의 "[Click me]" 레이블을 클릭할 경우

   + e.stopPropagation() 만 주석 제거

      "click label1" 경고창 뜨고 "mobicon.tistory.com" 사이트로 이동 ("click div1" 경고창 안뜸. 즉, 버블링 업 막아줌)

   + e.preventDefault() 만 주석 제거

      "click label1" 경고창 뜨고 "click div1" 경고창 뜸 그러나 "mobicon.tistory.com"으로 이동하지 않음 (즉, 기본 이벤트 막아줌)

   + return false 만 주석 제거

      "click label1" 경고창 뜨고 "click div1" 경고창 뜸 그러나 "mobicon.tistory.com"으로 이동하지 않음 (즉, 기본 이벤트 막아줌)

  - jQuery를 사용하지 않은 e.preventDefault와 return false 의 동작은 동일하다

2) preventDefault vs return false, stopPropagation : jQuery를 사용할 경우 

  - stopPropagation 상동

  - preventDefault 상동

  - return false 는 jQuery 사용할 때와 안할 때의 반응이 틀리다

    + jQuery 사용할 때는 preventDefault와 동일하게 동작한다 

   + e.stopPropagation() 만 주석 제거

      상동

   + e.preventDefault() 만 주석 제거

      상동

   + return false 만 주석 제거

      "click label1" 경고창 뜨고 "click div1" 경고창은 안 뜸 그리고 "mobicon.tistory.com"으로 이동하지 않음 

  - 결론적으로 jQuery를 사용하여 return false를 쓸 경우 stopPropgation() 와 preventDefault() 가 동시에 적용됨 

<참조>

  - stopPropagation()과 preventDefault() 차이

  - preventDefault() vs return false 차이

  - 자바스크립트 이벤트 핸들링

트위터의 개발자와 디자이너는 웹 디자이너나 개발자에게 좀 더 나은 삶을 주고자 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]"

    });

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 제공

jQuery를 통하여 DOM 조작을 할때 HTML안에 span 또는 div의 id 또는 class의 조작을 하면 편하게 할 수 있다. 이때 span과 div는 어떤 차이가 있을까 알아보자. 

1) Span & Div 차이점

  - div 가로폭을 전부 차지함. span 태그안의 내용만 차지함

  - div 폭과 넓이 지정가능, span 못함

  - div 필연적으로 줄 바꿈을 동반, span 줄 바꿈 없고 문장 중간에 들어갈 수 있음

  - table 태그 대신 div와 span 태그로 더욱 간결한 html을 구성할 수 있다.

<참조>

- http://chatii.tistory.com/45 : div와 span 태그의 차이점 비교 

- http://ccoma.tistory.com/746 : table 태그를 대신하여 div 와 span 태그를 사용하여 화면 구성을 어떻게 하는가?

- http://yongja.tistory.com/15 : div/span 과 id/class에 대한 이해.

대학교 다닐때 학교의 홈페이지를 방학동안 200만원 받고 프로젝트를 하던 생각이 난다. 그땐 웹에디터도 없던 터라 Notepad에서 HTML을 직접 코딩하여 화면을 구성하였다. 그러기 위해 후배들 5명가량을 알바시키면서 100만원을 벌어 5개월짜리 종일반 학원을 다니던 생각이 난다. 그 당시에는 장기 컴퓨터교육 기관이 거의 없고, 정부 지원도 없던 때였다. 

이제 세월이 흘러 HTML은 HTML5 라는 훨씬 간편하며 컨텐트에 집중할 수 있는 마크업 랭귀지로 발전하고 있다. 결국 모자람과 혼합된 기능들이 주변 기술의 발전에 따라 분리되고 자신의 일에 집중할 수 있는 SOLID의 SRP(Single Response Principle) 처럼 HTML5 도 발전한것 같다. 

OLD HTML = HTML5 + CSS3 + JavaScript

  - HTML5 = Content에 집중

  - CSS3 = Presentation에 집중

  - JavaScript = Action에 집중

  - Flash를 대체하자 : HTML5의 기능 간단 목록

  - HTML5 역사를 보자 : 그림과 함께 기능이 되는 브라우져 테스트 내역이 잘 설명되어 있다

  - HTML5 배우기 : 블로그 중에서 가장 잘 정리된 듯하다. 

  - HTML5 + CSS3 : HTML5로 slide를 만듦

  - Essentail : HTML5 기능에 대해서 코드와 결과를 보자 (html5demo)

  - HTML5 API : API들에 대하여 기능별 상세 코드 설명 (좀 더 심플)

  - 게임만들기 : 자바스크립트와 적절히 사용해야 한다

  - Real-time message : websocket에 대한 이야기