티스토리 뷰
zen conding 키워드
태그#아이디명 ====> 아이디 이름을 가진 태그 생성
ex) div#container
태그.클래스명 ====> 클래스 이름을 가진 태그 생성
ex) div.container
+태그명 ==> 형제 노드 생성
ex) div.container+div.btn
태그 > 태그 ====> 상하 종속 태그 생성
ex) div.container>ul>li
*숫자입력 ==> 생성 태그 갯수
ex) div.container>ul>li*10
클래스명 or 아이디명 or 텍스트 노드$ ===> 순차적(내림차순) 번호 붙임
ex) div.container>ul>li.list$*10
ex) div.container>ul>li.list${menu$}*10
그룹핑
ex) (div>dl>(dt+dd)*3)+footer>p
결과(아래코드)
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
텍스트(nodeValue처리)
ex) a{click me}
CSS Vender prefixes( 대시키워드(-) 붙이고 약어기재 )
선택자{
-bxs:bb
}
--> 결과(아래코드)
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
CSS transition prefixes
-trs
CSS font 설정
키워드 --> @f+
결과(아래코드)
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
CSS Keyframe 설정
키워드 --> @kf
결과(아래코드)
@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}
Emmet
http://docs.emmet.io/abbreviations/syntax/
Cheat Sheet
http://docs.emmet.io/cheat-sheet/
'Programming language > HTML & CSS' 카테고리의 다른 글
모바일 css (0) | 2014.07.23 |
---|---|
음 머 z-index 최대값~ 외울순 없고~ ㅋ (0) | 2014.07.10 |
반응형 프레임워크들~ (0) | 2014.05.11 |
:before, :after 선택자에 대한 자세한 설명~ (0) | 2014.05.08 |
더미 텍스트 생성하기. (0) | 2014.05.04 |
- Total
- Today
- Yesterday
- git checkout -b
- svg 폰트
- 리프래시토큰
- 자바스크립트
- svg모션
- react-router-dom
- Intrinsic
- JsDoc
- svg icon font
- IntrinsicElements
- React.StrictMode
- RefreshToken
- interceptors
- react
- vue-router
- icon font
- for of 구문
- 내장요소
- 아이콘 폰트 만들기
- 반복문
- CSS
- 태그
- Aptana
- anime.js
- 앵귤러
- 코도바
- cordova
- Angular
- Vue3
- git
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |