]] Tag 사용으로 사용 빈도가 줄음.
^ Tag ^ tr |**t**able
**r**ow |
^::: ^ th |**t**able
**h**eader |
^::: ^ td |**t**able
**d**ata |
^ Element ^ border |테두리 두께 |
^::: ^ rowspan\\ columnspan |행병합,열병합 |
|
Header 1
Header 2
Header 3
Data 1-1
Data 1-2
Data 1-2
Data 2-1
Data 2-2
Data 3
|
Header 1
Header 2
Header 3
Data 1-1
Data 1-2
Data 1-2
Data 2-1
Data 2-2
Data 3
|
=== Image Tag ===
|
|
|
=== Audio Tag ===
|
|
|
|
=== Video, Track Tag ===
* Video : 영상, Track : 자막.
* Browser마다 Player 형태가 다름. 또한 IE8 이하는 video, track Tag 동작하지 않음.
* ☞ [[http://videojs.com/getting-started/|video.js]] 사용!
|
|
|
|
=== 입력 양식 Tag ===
====
====
Chrome/Opera에서 더 정상적으로 보인다.
|
|
|
====
|
|
====
====
|
A
B
C
A
B
C
A
B
C
1
2
3
|
A
B
C
A
B
C
A
B
C
1
2
3
|
==== & ====
=== 공간 분할 Tag ===
==== ,
====
|
동해물과
백두산이
마르고
닳도록
하느님이
보우하사
우리나라
만세
|
동해물과
백두산이
마르고
닳도록
하느님이
보우하사
우리나라
만세
|
==== Semantic Tag ====
의미를 갖는 Tag. 모두 [[#,
|div]] Tag와 같은 기능.
^ header | |
^ nav | |
^ aside | |
^ section |여러 중심 내용을 감싸는 공간 |
^ article |글자가 많이 들어가는 부분 |
^ fotter | |
|
SECTION
ARTICLE1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
ARTICLE2
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
ASIDE
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
|
|
SECTION
ARTICLE1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
ARTICLE2
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
ASIDE
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
|
= CSS =
Cascading Style Sheet 3 기준.
== 선택자(Selector) ==
특정 태그에 **스타일**이나 **기능**을 적용할 때 사용.
선택자 { 스타일속성: 스타일값; }
h1 { color: red; }
=== 전체(Universal) 선택자 ===
^ * |페이지 내 모든 Tag |
=== Tag 선택자 ===
^ TAG |특정 Tag |
* 다중 Tag 선택
h1, p, body { color: red; }
=== ID 선택자, Class 선택자 ===
==== ID 선택자 ====
^ #ID |특정한 **하나** Tag |
==== Class 선택자 ====
^ .CLASS |특정 Tag |
* 다중 Class 선택 : **공백**으로 구분
|
|
|
* 특정 Tag의 특정 Class 속성 선택
|
HEADER
|
HEADER
|
=== 속성(Element) 선택자 ===
==== 기본 속성 선택자 ====
^ 선택자[속성] | 특정 Tag의 속성 선택 |
^ 선택자[속성=값]{[속성=값]} | 특정 Tag의 속성값이 같은 속성 선택 |
link
http://jsbin.com/locasajofo/edit?html,output
==== 문자열 속성 선택자 ====
특정 Tag의 특정 속성의 속성값 ↔ 문자열 비교
|
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
|
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
|
=== 후손(Descendant) 선택자, 자손(Child) 선택자 ===
^ Descendant ^ 선택자 선택자 |(부모 선택자 기준) 하위 전체 Tag |
^ Child ^ 선택자 > 선택자 {> 선택자} |(부모 선택자 기준) 하위 한개 Tag |
|
Lorem ipsum3
Lorem ipsum4
Lorem ipsum5
|
Lorem ipsum3
Lorem ipsum4
Lorem ipsum5
|
=== 동위(Adjacent sibling) 선택자 ===
같은 Level의 Tag에서 선후 관계의 특정 Tag 선택.
선택자 2개를 A, B라고 할 때,
^ A + B |A 바로 뒤 B **하나** 선택. (One) |
^ A ~ B |A 바로 뒤 B **모두** 선택. (All) |
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
http://jsbin.com/denafuxama
=== 반응 선택자 ===
Lorem ipsum
http://jsbin.com/negegitaje
=== 상태 선택자 ===
[[#입력 양식 Tag]]의 상태 선택.
* input**:checked**
* input**:focus**
* ※ 한 페이지에 한 input Tag에만 가능!
* input**:enabled**
* input**:disabled**
http://jsbin.com/lefiduqoga
=== 구조 선택자 ===
* CSS3 부터 지원.
==== 일반 구조 선택자 ====
특정한 위치에 있는 Tag 선택.
같은 Level의 Child 관계에서
^선택자:first-child |첫 번째 위치하는 Tag 선택 |
^선택자:last-child |마지막에 위치하는 Tag 선택 |
^선택자:nth-child |앞에서 수열 번째 Tag 선택 |
^선택자:nth-last-child |뒤에서 수열 번째 Tag 선택 |
http://jsbin.com/cevowopuxu
==== 형태 구조 선택자 ====
일반 구조 선택자와 비슷하지만 Tag의 **type**으로 구분.
같은 Level의 Child 관계에서
^TAG:first-of-type |첫 번째로 등장하는 특정 Tag 선택 |
^TAG:last-of-type |마지막으로 등장하는 특정 Tag 선택 |
^TAG:nth-of-type(수열) |앞에서 수열 번째로 등장하는 특정 Tag 선택 |
^TAG:nth-last-of-type(수열) |뒤에서 수열 번째로 등장하는 특정 Tag 선택 |
h1
h2
h3
h1
h2
h3
h1
h2
h3
http://jsbin.com/xoxugocoze
=== 문자 선택자 ===
Tag 내부 **특정 조건**의 문자를 선택하는 선택자. "**::**"를 이용한다.
==== 시작 문자 선택자 ====
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
http://jsbin.com/lakufepono
==== 전후 문자 선택자 ====
* 별로 사용할 일이 없다.
^TAG::after |선택자 뒤에 위치하는 공간 선택 |
^TAG::before |선택자 앞에 위치하는 공간 선택 |
http://jsbin.com/jesevemifo/edit?html,output
==== 반응 문자 선택자 ====
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
http://jsbin.com/pebokelovo
=== Link 선택자 ===
test
http://jsbin.com/becoxidici
=== 부정 선택자 ===
http://jsbin.com/wobifayavu
== Tips ==
=== Anchor link 위치가 안맞을 때 ===
:target::before {
content: "";
display: block;
height: 3rem; /* fixed header height*/
margin: -3rem 0 0; /* negative fixed header height */
}
