XECon+PHPFest2014 발표자료 - 효율적인 css...
-
Upload
xpressengine -
Category
Software
-
view
3.994 -
download
1
description
Transcript of XECon+PHPFest2014 발표자료 - 효율적인 css...
![Page 1: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/1.jpg)
효율적인 CSS 개발 방법 이야기
@ID 최대영
In-Comms
2014.11.08 Session 1-1XECon + PHPFest 2014
![Page 2: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/2.jpg)
1. CSS 개발의 어려움 .
2. OOCSS.
3. SMACSS.
4. 맺음말 .
TOC
![Page 3: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/3.jpg)
![Page 4: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/4.jpg)
CSS 개발의 어려움과 해결 방법에 대한 이야기- 효율적인 CSS 개발 방법론
![Page 5: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/5.jpg)
이미지 + 간단한 Style sheet 사용 .Ex) Font, Border, Back-ground..
<table style="border:1px solid red"><tr><td style="color:yellow;font-size:17px"> 나는 누구 여긴 어디 ..</td></tr></table>
inLine
Past
![Page 6: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/6.jpg)
이미지를 대체 하는 ..Ex) @fant-face, border-radius, gradient, text-shadow...
Javascript 를 대체 하는 ..Ex) media query, :nth-of-type(), a[href*=naver]…
동적 요소를 대체 하는 ..Ex) trasition, animation...
Present
![Page 7: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/7.jpg)
하지만 늘어만 가는 코드에 ... 웃을 수 만은 ...도데체 .. 뭐가 .. 문제일까 ..
![Page 8: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/8.jpg)
Issue
CSS Selector ..
![Page 9: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/9.jpg)
Issue
Selector n * 100 n * 10 n * 1 specificity
* 0 0 0 0
LI 0 0 1 1
UL LI 0 0 2 2
UL OL+LI 0 0 3 3
H1 + *[REL=up] 0 1 1 11
UL OL LI.red 0 1 3 13
LI.red.level 0 2 1 21
#x34y 1 0 0 100
#s12:not(FOO) 1 0 1 101
CSS Specificity
불필요한 CSS Selector 사용a.family , #a.family ...
지나치게 복잡한 선택자#content .home .family a
<div id="content"> <div> <div> <a href="#"> 집으로 ..</a> </div> </div></div>
CSS 우선 순위 조정 or !important 사용
CSS Selector ..
![Page 10: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/10.jpg)
Issue
너무 많은 규칙 포함
![Page 11: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/11.jpg)
Issue
<style type="text/css">.widget { overflow:hidden;
position: absolute; top: 20px; left: 20px; width:100px;
height:300px;background-color: red;
font-family:' 돋움 ',dotum;font-size: 15px;
line-height:1.4; color:#fff;
text-transform: uppercase; border-radius:0; text-decoration:none; vertical-align:top} </style>
너무 많은 규칙 포함
![Page 12: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/12.jpg)
Issue
영역의 의미를 갖는 Class 명 사용 ?
![Page 13: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/13.jpg)
Issue
<style type="text/css">.family{border:1px solid #000;background-color:#fff}.family h3{color:#fff;font-size:20px}.family ul{overflow:hidden;border:1px solid red;zoom:1}.family li{float:left}</style>
<div class="family"> <h3> 우리 가족 소개 </h3> <ul> <li> 든든한 아빠 </li> <li> 이쁜 엄마 </li> <li> 귀여운 연우 </li> <li> 씩씩한 혁준 </li> </ul></div>
영역의 의미를 갖는 Class 명 사용 ?
![Page 14: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/14.jpg)
Issue
<style type="text/css">.family{border:1px solid #000;background-color:#fff}.family h3{color:#fff;font-size:20px}.family ul{overflow:hidden;border:1px solid red;zoom:1}.family li{float:left}</style>
<div class="family"> <h3> 우리 가족 소개 </h3> <ul> <li> 든든한 아빠 </li> <li> 이쁜 엄마 </li> <li> 귀여운 연우 </li> <li> 씩씩한 혁준 </li> </ul></div>
<div> <h4> 나의 친구 소개 </h4> <ol> <li> 동구 </li> <li> 상희 </li> <li> 명철 </li> <li> 진호 </li> </ol></div>
+
영역의 의미를 갖는 Class 명 사용 ?
![Page 15: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/15.jpg)
Issue
<style type="text/css">.family{border:1px solid #000;background-color:#fff}.family h3, friend h4{color:#fff;font-size:20px}.family ul, friend ol{overflow:hidden;border:1px solid red;zoom:1}.family li{float:left}</style>
<div class="family"> <h3> 우리 가족 소개 </h3> <ul> <li> 든든한 아빠 </li> <li> 이쁜 엄마 </li> <li> 귀여운 연우 </li> <li> 씩씩한 혁준 </li> </ul></div>
<div class="family friend"> <h4> 나의 친구 소개 </h4> <ol> <li> 동구 </li> <li> 상희 </li> <li> 명철 </li> <li> 진호 </li> </ol></div>
+
영역의 의미를 갖는 Class 명 사용 ?
![Page 16: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/16.jpg)
Issue
<style type="text/css">.family, .friend{border:1px solid #000;background-color:#fff}.family h3, .friend h4{color:#fff;font-size:20px}.family ul, .friend ol{overflow:hidden;border:1px solid red;zoom:1}.family li, .friend li{float:left}</style>
<div class="family"> <h3> 우리 가족 소개 </h3> <ul> <li> 든든한 아빠 </li> <li> 이쁜 엄마 </li> <li> 귀여운 연우 </li> <li> 씩씩한 혁준 </li> </ul></div>
<div class=“friend"> <h4> 나의 친구 소개 </h4> <ol> <li> 동구 </li> <li> 상희 </li> <li> 명철 </li> <li> 진호 </li> </ol></div>
+
영역의 의미를 갖는 Class 명 사용 ?
![Page 17: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/17.jpg)
Issue
<style type="text/css">.family{border:1px solid #000;background-color:#fff}.family h3{color:#fff;font-size:20px}.family ul{overflow:hidden;border:1px solid red;zoom:1}.family li{float:left} .friend{border:1px solid #000;background-color:#fff}.friend h4{color:#fff;font-size:20px}.friend ol{overflow:hidden;border:1px solid red;zoom:1}.friend li{float:left}</style>
<div class="family"> <h3> 우리 가족 소개 </h3> <ul> <li> 든든한 아빠 </li> <li> 이쁜 엄마 </li> <li> 귀여운 연우 </li> <li> 씩씩한 혁준 </li> </ul></div>
<div class=“friend"> <h4> 나의 친구 소개 </h4> <ol> <li> 동구 </li> <li> 상희 </li> <li> 명철 </li> <li> 진호 </li> </ol></div>
+
영역의 의미를 갖는 Class 명 사용 ?
![Page 18: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/18.jpg)
Issue
너무 이른 최적화는 오히려 독 ?!
![Page 19: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/19.jpg)
Issue
너무 이른 최적화는 오히려 독 ?!
기획 디자인 UI 개발 개발
![Page 20: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/20.jpg)
Issue
너무 이른 최적화는 오히려 독 ?!
기획
디자인
UI 개발
개발
![Page 21: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/21.jpg)
Issue
너무 이른 최적화는 오히려 독 ?!
기획
디자인
UI 개발
개발
정보는 부족하지만 ..최적화 진행 ..
![Page 22: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/22.jpg)
Issue
너무 이른 최적화는 오히려 독 ?!
기획
디자인
UI 개발
개발
정보는 부족하지만 ..최적화 진행 ..
수정 . 수정 . 수정 . 수정수정 . 수정 . 수정 . 수정수정 . 수정 . 수정 . 수정수정 . 수정 . 수정 . 수정
![Page 23: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/23.jpg)
Issue
너무 이른 최적화는 오히려 독 ?!
기획
디자인
UI 개발
개발
최적화 따위 .. 다음 플젝에서 보자 ..
정보는 부족하지만 ..최적화 진행 ..
수정 . 수정 . 수정 . 수정수정 . 수정 . 수정 . 수정수정 . 수정 . 수정 . 수정수정 . 수정 . 수정 . 수정
![Page 24: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/24.jpg)
사이트의 규모가 커질수록 .. CSS 는 점점 더 비대해짐 ..
= 유지보수 비용 증가 ..
= 효율적 관리 & 개발 방법 고민 증가 ..
“CSS is simple... It’s simple to under-
stand.
But CSS is not simple to use or main-
tain. ”CSS 는 단순하고 이해하기 쉽다 .
하지만 CSS 를 사용하고 관리하기는 쉽지 않다 ..
http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-mat-ters/
![Page 25: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/25.jpg)
Nicole Sullivan Jonathan Snook
Object Oriented CSS
- 2009 -
Scalable and Modular Archi-tecture for CSS
- 2011 -
![Page 26: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/26.jpg)
OOCSS코드의 재 사용성을 높이고 ,더 빠르고 효율적이며 객체를 추가하기 쉽게 ..
Object?독립적인 요소로 추상화 할 수 있는 반복 패턴
<div class="media"><a href=“#" class="img“><img src=“#" alt="Stubbornella”></a><div class="bd">
<a href=“#">@Stubbornella</a><span class="detail">14 miniutes ago</span>
</div></div>
![Page 27: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/27.jpg)
1. Separate structure and skin 표현과 구조의 분리
2. Separate container and content 컨테이너와 콘텐츠의 분리
Two Main Principles
![Page 28: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/28.jpg)
Two Main Principles
표현과 구조의 분리
![Page 29: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/29.jpg)
Two Main Principles
표현과 구조의 분리
거의 모든 웹사이트는 반복되는 요소를 가지고 있음 .
(ex. 색상 , 그림자 , 선 , 구조 등 ..)
![Page 30: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/30.jpg)
Two Main Principles
표현과 구조의 분리
Positioning(ex. position, float, margin...)
Styling(ex. background, color, border...)
거의 모든 웹사이트는 반복되는 요소를 가지고 있음 .
(ex. 색상 , 그림자 , 선 , 구조 등 ..)
![Page 31: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/31.jpg)
Two Main Principles
표현과 구조의 분리
ObjectPositioning(ex. position, float, margin...)
Styling(ex. background, color, border...)
거의 모든 웹사이트는 반복되는 요소를 가지고 있음 .
(ex. 색상 , 그림자 , 선 , 구조 등 ..)
![Page 32: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/32.jpg)
Two Main Principles
표현과 구조의 분리
Mix & Match
Positioning(ex. position, float, margin...)
Styling(ex. background, color, border...)
거의 모든 웹사이트는 반복되는 요소를 가지고 있음 .
(ex. 색상 , 그림자 , 선 , 구조 등 ..)
Object
![Page 33: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/33.jpg)
Two Main Principles
표현과 구조의 분리
.button {width: 200px;height: 50px;padding: 10px;border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
.box {width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
.widget {width: 500px;min-height: 200px;overflow: auto;border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
![Page 34: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/34.jpg)
Two Main Principles
표현과 구조의 분리
.button {width: 200px;height: 50px;padding: 10px;border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
.box {width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
.widget {width: 500px;min-height: 200px;overflow: auto;border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
Positioning(ex. position, float, margin...)
Styling(ex. background, color, bor-der...)
![Page 35: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/35.jpg)
Two Main Principles
표현과 구조의 분리
.button {width: 200px; height: 50pxpadding:10px
}
.box {width: 400px;overflow: hidden
}
.widget {width: 500px;min-height: 200px;overflow: auto
}
.skin {border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
.button {width: 200px;height: 50px;padding: 10px;border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
.box {width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
.widget {width: 500px;min-height: 200px;overflow: auto;border: solid 1px #ccc;background: linear-gradient(#ccc, #222);box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px
}
![Page 36: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/36.jpg)
Two Main Principles
표현과 구조의 분리
Class + Class =
![Page 37: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/37.jpg)
Two Main Principles
표현과 구조의 분리
Class + Class =
Class X Class
&
Smaller file sizes
![Page 38: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/38.jpg)
Two Main Principles
표현과 구조의 분리
![Page 39: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/39.jpg)
Two Main Principles
표현과 구조의 분리
![Page 40: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/40.jpg)
Two Main Principles
표현과 구조의 분리
<ul class="mod"> <li class="modImg"> <a href="#”> <img src="#" width="140" height="85" alt="" class="modImg-img"> <span class="modImg-title">text</span> </a> </li> <li><a href="#”>text</a></li> <li><a href="#”>text</a></li> </ul>
<style type="text/css">/* Positioning */.mod{overflow:hidden}.modImg{float:left;width:140px;margin-right:10px}.modImg-title{display:block}.mod>li{margin-bottom:7px}.modB-desc{margin:5px 0 10px;display:block}.modImg-img{display:block}.ly-mod{width:250px}.ly-modImg{position:relative;display:block}.ly-modImg-title{position:absolute;bottom:0;left:0;padding:6px 7px 6px 9px}.modlist-clear{clear:left;padding-top:5px}.dualImg{margin-right:22px}</style>
![Page 41: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/41.jpg)
<style type="text/css">/* Positioning */.mod{overflow:hidden}.modImg{float:left;width:140px;margin-right:10px}.modImg-title{display:block}.mod>li{margin-bottom:7px}.modB-desc{margin:5px 0 10px;display:block}.modImg-img{display:block}.ly-mod{width:250px}.ly-modImg{position:relative;display:block}.ly-modImg-title{position:absolute;bottom:0;left:0;padding:6px 7px 6px 9px}.modlist-clear{clear:left;padding-top:5px}.dualImg{margin-right:22px}
/* Styling */.link{color:#000063;font-weight:bold;letter-spacing:-1px}.slink{font-size:14px}.blink{font-size:24px}.blink-desc{color:#4F4F4F;font-size:12px;font-weight:normal;line-height:1.4}.img-link{color:#4f4f4f}.img-link-desc{color:#4f4f4f;line-height:1.4}.ly-link-desc{color:#fff;background-color:#000;opacity:0.65}</style>
Two Main Principles
표현과 구조의 분리
![Page 42: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/42.jpg)
Two Main Principles
표현과 구조의 분리
<ul class="mod"> <li class="modImg"> <a href="#" class="img-link"> <img src="#" width="140" height="85" alt="" class="modImg-img"> <span class="modImg-title img-link-desc">text</span> </a> </li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> </ul>
CSS 추가 없이 조합을 통해 구현 .그리고 더 많은 형태를 표현 가능 ..
![Page 43: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/43.jpg)
Two Main Principles
표현과 구조의 분리
<ul class="mod"> <li class="modImg ly-mod"> <a href="#" class="img-link ly-modImg"> <img src="#" width="250" height="170" alt="" class="modImg-img"> <span class="modImg-title ly-modImg-title ly-link-desc">text</span> </a> </li> <li class="modB"> <a href="#" class="link blink"> text <span class="modB-desc blink-desc">text</span> </a> </li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> </ul>
CSS 추가 없이 조합을 통해 구현 .그리고 더 많은 형태를 표현 가능 ..
![Page 44: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/44.jpg)
Two Main Principles
표현과 구조의 분리
<ul class="mod"> <li class="modImg dualImg"> <a href="#" class="img-link"> <img src="#" width="140" height="85" alt="" class="modImg-img"> <span class="modImg-title img-link-desc">text</span> </a> </li> <li class="modImg"> <a href="#" class="img-link"> <img src="#" width="140" height="85" alt="" class="modImg-img"> <span class="modImg-title img-link-desc">text</span> </a> </li> <li class="modlist-clear"><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> <li><a href="#" class="link slink">text</a></li> </ul>
CSS 추가 없이 조합을 통해 구현 .그리고 더 많은 형태를 표현 가능 ..
![Page 45: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/45.jpg)
Two Main Principles
표현과 구조의 분리
![Page 46: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/46.jpg)
Two Main Principles
컨테이너와 콘텐츠의 분리
![Page 47: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/47.jpg)
Two Main Principles
컨테이너와 콘텐츠의 분리
Dom 의 위치에 상관 없이
객체의 재사용을 허용하기 위한 규칙위치에 의존하지 않고 재사용이 가능한 클래스 기반 모듈 구축 ,
어떤 컨테이너에도 종속되지 않는…
![Page 48: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/48.jpg)
Two Main Principles
컨테이너와 콘텐츠의 분리
Class 명이 영역의 의미를 가지게 되면
재 활용성이 떨어지게 되고 불필요한 코드의 양이 늘어나게 됨 .http://brettjankord.com/2013/02/09/thoughts-on-semantic-html-class-names-and-maintainability/
Class 명은 마이크로 포맷을 제외하고
검색 엔진 또는 스크린리더에서 의미있는 정보를 제공하지 않음 .
유연하고 재 사용이 가능한 형태로 사용하는 것이 좋음 .
![Page 49: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/49.jpg)
Two Main Principles
컨테이너와 콘텐츠의 분리
<style type="text/css">.family{border:1px solid #000;background-color:#fff}.family h3{color:#fff;font-size:20px}.family ul{overflow:hidden;border:1px solid red;zoom:1}.family li{float:left} .friend{border:1px solid #000;background-color:#fff}.friend h4{color:#fff;font-size:20px}.friend ol{overflow:hidden;border:1px solid red;zoom:1}.friend li{float:left}</style>
[As-is]
<div class="family"> <h3> 우리 가족 소개 </h3> <ul> <li> 든든한 아빠 </li> <li> 이쁜 엄마 </li> <li> 귀여운 연우 </li> <li> 씩씩한 혁준 </li> </ul></div>
<div class="friend"> <h4> 나의 친구 소개 </h4> <ol> <li> 동구 </li> <li> 상희 </li> <li> 명철 </li> <li> 진호 </li> <li> 희철 </li> </ol></div>
![Page 50: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/50.jpg)
Two Main Principles
컨테이너와 콘텐츠의 분리
<div class=“mod"> <h3 class=“hd"> 우리 가족 소개 </h3> <ul class=“ls"> <li> 든든한 아빠 </li> <li> 이쁜 엄마 </li> <li> 귀여운 연우 </li> <li> 씩씩한 혁준 </li> </ul></div>
<style type="text/css">.mod{border:1px solid #000;background-color:#fff}.hd{color:#fff;font-size:20px}.ls{overflow:hidden;border:1px solid red;zoom:1}.ls>li{float:left}</style>
<div class=“mod"> <h4 class=“hd"> 우리 가족 소개 </h4> <ol class=“ls"> <li> 동구 </li> <li> 상희 </li> <li> 명철 </li> <li> 진호 </li> <li> 희철 </li> </ol></div>
[To-be]
![Page 51: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/51.jpg)
Implementation
유의 사항
파생된 CSS Selector 는 사용을
금지 ..box aID Selector 사용 금지#box
Element Selector 사용 금지 div.box
!important 사용 금지
유동형으로 객체를 생성하라 .
둥근 코너 박스 사용 주의배경이 가변적이거나 gradient 요소가 있을 경우
![Page 52: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/52.jpg)
Implementation
유의 사항
background-color:red
파생된 CSS Selector 는 사용을
금지 ..box aID Selector 사용 금지#box
!important 사용 금지
유동형으로 객체를 생성하라 .
둥근 코너 박스 사용 주의배경이 가변적이거나 gradient 요소가 있을 경우
Element Selector 사용 금지 div.box
![Page 53: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/53.jpg)
Implementation
유의 사항
파생된 CSS Selector 는 사용을
금지 ..box aID Selector 사용 금지#box
!important 사용 금지
유동형으로 객체를 생성하라 .
둥근 코너 박스 사용 주의배경이 가변적이거나 gradient 요소가 있을 경우
Element Selector 사용 금지 div.box
![Page 54: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/54.jpg)
Implementation
유의 사항
CSS Lint 를 사용하여 쉽게 검증하기 !https://github.com/CSSLint/csslint/wiki/Rules
![Page 55: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/55.jpg)
Case
Media Object
![Page 56: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/56.jpg)
Case
Media Object
<style type="text/css">.media{overflow:hidden;overflow:visible;zoom:1;margin:10px}.media .img{float:left;margin-right:10px}.media .img img{display:block}.media .imgExt{float:left;margin-left:10px}</style>
<div class="media"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella" /> </a> <div class="bd"> <a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 miniutes ago</span> </div></div>
![Page 57: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/57.jpg)
Case
Media Object
<style type="text/css">.media{overflow:hidden;overflow:visible;zoom:1;margin:10px}.media .img{float:left;margin-right:10px}.media .img img{display:block}.media .imgExt{float:left;margin-left:10px}</style>
<div class="media"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella" /> </a> <div class="bd"> <a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 miniutes ago</span> </div></div>
![Page 58: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/58.jpg)
Case
Media Object
![Page 59: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/59.jpg)
SMACSSCSS 의 유연성과 관리의 효율성을 높이자 ..
No Download
No install
No framework
Style Guide!!
![Page 60: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/60.jpg)
![Page 61: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/61.jpg)
1. Base CSS 의 기본 요소
2. Layout 페이지를 분할 요소
3. Module 스타일 재사용을 위한 요소
4. State 상태와 관련된 요소 ( 활성 or 비활성 , 숨김 or 확장 )
5. Theme 사이트의 전반적인 look and feel 의 제어
Core
![Page 62: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/62.jpg)
Naming convention
1. Base 규칙 X
2. Layout l–, layout-, grid-
3. Module 대 다수가 모듈 , prefix 불필요 .
4. State is-
5. Theme override
![Page 63: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/63.jpg)
Naming convention
<style type="text/css">/* Example Module */ .example { }
/* Callout Module */ .callout { }
/* Callout Module with State */ .callout.is-collapsed { } /* Form field module */ .field { } /
/* Inline layout */ .l-inline { } </style>
1. Base 규칙 X
2. Layout l–, layout-, grid-
3. Module 대 다수가 모듈 , prefix 불필요 .
4. State is-
5. Theme override
![Page 64: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/64.jpg)
Naming convention
<style type="text/css">/* Example Module */ .example { }
/* Callout Module */ .callout { }
/* Callout Module with State */ .callout.is-collapsed { } /* Form field module */ .field { } /
/* Inline layout */ .l-inline { } </style>
반드시 지켜야 하는 규칙 X, But...
1. Base 규칙 X
2. Layout l–, layout-, grid-
3. Module 대 다수가 모듈 , prefix 불필요 .
4. State is-
5. Theme override
![Page 65: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/65.jpg)
Core
Base
![Page 66: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/66.jpg)
Core
Base
CSS 의 기본 요소를 정의 , 모든 요소에 적용되는 기본 스타일 .
- ID or Class 없음
- !important 사용 금지
- 단일 element selector 사용 가능
- attribute selectors, pseudo-class selectors, child selectors, sibling selectors
![Page 67: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/67.jpg)
Core
Base
<style type="text/css">html, body, form { margin: 0; padding: 0 }input[type=text] { border: 1px solid #999}a { color: #039}a:hover { color: #03C } </style>
Reset CSS !크로스 브라우징을 위해 일관된 기준을 정의하는 목적으로 사용되는 CSS..
CSS 의 기본 요소를 정의 , 모든 요소에 적용되는 기본 스타일 .
- ID or Class 없음
- !important 사용 금지
- 단일 element selector 사용 가능
- attribute selectors, pseudo-class selectors, child selectors, sibling selectors
![Page 68: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/68.jpg)
Core
Layout
![Page 69: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/69.jpg)
Core
Layout
페이지 분할 요소 , Layout 내 하나 이상의 모듈을 함께 구성하여 사용
- 유일하게 ID 사용 ! ( 재활용이 불가능한 Layout 에만 사용 가능 . 그 외 ..Class 사용 )
- 사이트 내 레이아웃 변경이 필요한 경우 Class 추가하여 제어 Ex) .l-fippde #aside
![Page 70: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/70.jpg)
Core
Module
![Page 71: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/71.jpg)
Core
Module
재사용을 위한 요소 , 독립형 Component 로 설계 필요
- ID Selector 사용 금지
- Element Selector 사용 금지
- 위치 기반의 Styling 금지
<style type="text/css">.pod { width: 100% } .pod input[type=text] {width: 50% }.pod-constrained input[type=text] {width: 100% }.pod-callout {width: 200px }.pod-callout input[type=text] {width: 180px }</style>
![Page 72: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/72.jpg)
Core
State
![Page 73: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/73.jpg)
Core
State
상태와 관련된 요소 ( 활성 or 비활성 , 숨김 or 확장 )
- !important 사용 가능
- Layout or Module 에 사용 가능한가 ?
- 자바 스크립트에 의존적인 스타일인가 ?
<style type="text/css">/* Module */.tab {background-color: purple; color: white}
/* State */ .is-tab-active { background-color: white; color: black }</style>
![Page 74: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/74.jpg)
Core
State
상태와 관련된 요소 ( 활성 or 비활성 , 숨김 or 확장 )
- !important 사용 가능
- Layout or Module 에 사용 가능한가 ?
- 자바 스크립트에 의존적인 스타일인가 ?
<style type="text/css">/* Module */.tab {background-color: purple; color: white}
/* State */ .is-tab-active { background-color: white; color: black }</style>
![Page 75: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/75.jpg)
Core
State
상태와 관련된 요소 ( 활성 or 비활성 , 숨김 or 확장 )
- !important 사용 가능
- Layout or Module 에 사용 가능한가 ?
- 자바 스크립트에 의존적인 스타일인가 ?
<style type="text/css">/* Module */.tab {background-color: purple; color: white}
/* State */ .is-tab-active { background-color: white; color: black }</style>
Class NameJavascript 에 의존적인 방법
Pseudo-classEx) .btn:hover, .btn:focus
Media QueryEx) @media screen and (max-width: 400px)
![Page 76: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/76.jpg)
Core
Theme
![Page 77: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/77.jpg)
Core
Theme
사이트의 전반적인 look and feel 제어 , 대부분의 사이트는 불필요 , XE 는 ?
- Layout, Font, Color...
- Class??? file!!!
- 다국어 사이트 진행 시 폰트 변경 진행
<style type="text/css"> // in module-name.css .mod { border: 1px solid; } </style>
<style type="text/css">// in theme.css .mod { border-color: blue; }</style>
![Page 78: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/78.jpg)
Core
Theme
사이트의 전반적인 look and feel 제어 , 대부분의 사이트는 불필요 , XE 는 ?
- Layout, Font, Color...
- Class??? file!!!
- 다국어 사이트 진행 시 폰트 변경 진행
<style type="text/css"> // in module-name.css .mod { border: 1px solid; } </style>
<style type="text/css">// in theme.css .mod { border-color: blue; }</style>
![Page 79: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/79.jpg)
Core
Theme
사이트의 전반적인 look and feel 제어 , 대부분의 사이트는 불필요 , XE 는 ?
- Layout, Font, Color...
- Class??? file!!!
- 다국어 사이트 진행 시 폰트 변경 진행
<style type="text/css"> // in module-name.css .mod { border: 1px solid; } </style>
<style type="text/css">// in theme.css .mod { border-color: blue; }</style>
![Page 80: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/80.jpg)
Core
Theme
사이트의 전반적인 look and feel 제어 , 대부분의 사이트는 불필요 , XE 는 ?
- Layout, Font, Color...
- Class??? file!!!
- 다국어 사이트 진행 시 폰트 변경 진행
<style type="text/css"> // in module-name.css .mod { border: 1px solid; } </style>
<style type="text/css">// in theme.css .mod { border-color: blue; }</style>
![Page 81: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/81.jpg)
Core
Theme
사이트의 전반적인 look and feel 제어 , 대부분의 사이트는 불필요 , XE 는 ?
- Layout, Font, Color...
- Class??? file!!!
- 다국어 사이트 진행 시 폰트 변경 진행
<style type="text/css"> // in module-name.css .mod { border: 1px solid; } </style>
<style type="text/css">// in theme.css .mod { border-color: blue; }</style>
![Page 82: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/82.jpg)
effect
효과
유형을 체계적으로 정리 유사 유형의 재 사용
코드량 감소 , 유지보수 비용 절감 , UX 의 일관성
유지
![Page 83: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/83.jpg)
1. Element Selector 는 피하라 . .box a
2. ID Selector 는 피하라 . .box a
3. 위치 기반의 Styling 을 피하
라 . .pod . pod-constrained4. Selector 의 Depth 최소화
<style type="text/css">#sidebar div, #footer div { …} #sidebar div h3, #footer div h3 {… } #sidebar div ul, #footer div ul {…}</style>
Implementation
유의 사항
![Page 84: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/84.jpg)
Implementation
유의 사항
<style type="text/css">.pod {... }.pod > h3 { ... } .pod > ul { ... }</style>
1. Element Selector 는 피하라 . .box a
2. ID Selector 는 피하라 . .box a
3. 위치 기반의 Styling 을 피하
라 . .pod . pod-constrained4. Selector 의 Depth 최소화
![Page 85: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/85.jpg)
Implementation
유의 사항
5. right Selector Class 이름
사용 .pod . Ls-pod
1. Element Selector 는 피하라 . .box a
2. ID Selector 는 피하라 . .box a
3. 위치 기반의 Styling 을 피하
라 . .pod . pod-constrained4. Selector 의 Depth 최소화
![Page 86: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/86.jpg)
여기 까지가 무료 ..
![Page 87: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/87.jpg)
여기 까지가 무료 ..
![Page 88: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/88.jpg)
방법론의 공통적인 이야기 ..
common
![Page 89: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/89.jpg)
방법론의 공통적인 이야기 ..
CSS 코드의 재사용 모듈 , 객체
common
![Page 90: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/90.jpg)
방법론의 공통적인 이야기 ..
CSS 코드의 재사용 모듈 , 객체
common
성능 ,
유지보수
![Page 91: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/91.jpg)
10 BEST PRACTICES 1. Create a component
2. Use consistent semantic styles
3. Design modules to be transparent
on the inside.
4. Be flexible.
5. Learn to love grids.
6. Minimize selectors library
7. Separate structure and skin
8. Separate container and content
9. Extend objects by applying multiple
classes to an element
10. Use reset and fonts from YUI
9 PITFALLS 1. Location dependent styles.
2. Avoid specifying what tag a class ap-
plies.
3. Avoid IDs to style inside the main
content areas.
4. Avoid drop shadows and rounded cor-
ners
over irregular backgrounds.
5. Don’t sprite every image together
(unless your has very few pages).
6. Avoid height alignment
7. Text as text, not as images.
8. Redundancy
9. Avoid premature optimization.
방법론의 공통적인 이야기 ..
common
![Page 92: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/92.jpg)
10 BEST PRACTICES 1. Create a component
2. Use consistent semantic styles
3. Design modules to be transparent
on the inside.
4. Be flexible.
5. Learn to love grids.
6. Minimize selectors library
7. Separate structure and skin
8. Separate container and content
9. Extend objects by applying multiple
classes to an element
10. Use reset and fonts from YUI
9 PITFALLS 1. Location dependent styles.
2. Avoid specifying what tag a class ap-
plies.
3. Avoid IDs to style inside the main
content areas.
4. Avoid drop shadows and rounded cor-
ners
over irregular backgrounds.
5. Don’t sprite every image together
(unless your has very few pages).
6. Avoid height alignment
7. Text as text, not as images.
8. Redundancy
9. Avoid premature optimization.
방법론의 공통적인 이야기 ..
common
1. 컴포넌트 라이브러리 제작
2. 모듈은 유동적으로
3. 셀렉터는 간단하게
4. 구조와 표현을 분리
5. 컨테이너와 컨텐츠를 분리
6. class 를 조합을 통해 디자인 구현
7. 위치에 의존하는 스타일 사용을 피하자
8. Element Selector 는 사용을 피하자
9. 메인 컨텐츠 내에 ID Selecotr 사용을 피하자 .
10. 너무 빠른 최적화는 금물 .
![Page 93: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/93.jpg)
방법론의 공통적인 이야기 ..
common
Design Guide..
![Page 94: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/94.jpg)
방법론의 공통적인 이야기 ..
common
Google Material designhttp://www.google.com/design/spec/material-design/introduction.html
![Page 95: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/95.jpg)
방법론의 공통적인 이야기 ..
common
기획 디자인 UI 개발 개발
![Page 96: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/96.jpg)
방법론의 공통적인 이야기 ..
common
기획 디자인 UI 개발 개발
![Page 97: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/97.jpg)
방법론의 공통적인 이야기 ..
common
기획 디자인 UI 개발 개발
![Page 98: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/98.jpg)
기획 디자인 UI 개발 개발
방법론의 공통적인 이야기 ..
common
CSS 모듈화 진행에 도움
사전 작업을 통해 빠른 개발 가능
Prototype 생성 용이
![Page 99: XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영](https://reader031.fdocuments.net/reader031/viewer/2022012922/5588f5fed8b42aad418b457c/html5/thumbnails/99.jpg)
10 BEST PRACTICES 1. Create a component
2. Use consistent semantic styles
3. Design modules to be transparent
on the inside.
4. Be flexible.
5. Learn to love grids.
6. Minimize selectors library
7. Separate structure and skin
8. Separate container and content
9. Extend objects by applying multiple
classes to an element
10. Use reset and fonts from YUI
9 PITFALLS 1. Location dependent styles.
2. Avoid specifying what tag a class ap-
plies.
3. Avoid IDs to style inside the main
content areas.
4. Avoid drop shadows and rounded cor-
ners
over irregular backgrounds.
5. Don’t sprite every image together
(unless your has very few pages).
6. Avoid height alignment
7. Text as text, not as images.
8. Redundancy
9. Avoid premature optimization.
1. 컴포넌트 라이브러리 제작
2. 모듈은 유동적으로
3. 셀렉터는 간단하게
4. 구조와 표현을 분리
5. 컨테이너와 컨텐츠를 분리
6. class 를 조합을 통해 디자인 구현
7. 위치에 의존하는 스타일 사용을 피하자
8. Element Selector 는 사용을 피하자
9. 메인 컨텐츠 내에 ID Selecotr 사용을 피하자 .
10. 너무 빠른 최적화는 금물 .
11. UI 컴포넌트 제작에 참여하고 효율적으로 CSS 개발 진행
방법론의 공통적인 이야기 ..
common