=> onclick
확인 => onclick=
document.getElementById('color') =>단수로 가져옴
document.getElementsByTagName('input') => 복수(배열)로 가져옴
다중 스타일 시트
공통적으로 사용되는 스타일은 요소의 스타일에 정의하는 것이
편리하다.
선택자의 종류
타입 선택자(type selector) - p{}
전체 선택자(universal selector) - *{}
클래스 선택자(class selector) - #target {}
아이디 선택자(ID selector) - .target {}
속성 선택자(attribute selector)
의사 선택자(pseudo-class) - 클래스가 정의된 것처럼 간주.
선택자 그룹 - h1, h2, h3 { font-family: sans-serif; }
자손, 자식 선택자 -
s1 s2 s1 요소에 포함된 s2 요소를 선택한다. (후손 관계)
s1 > s2 s1 요소의 직계 자식 요소인 s2를 선택한다.(자식 관계)
body em { color: red; } / body 안의 em 요소 /
body > h1 { color: blue; } / body 안의 h1 요소 /
의사 클래스(pseudo-class)
의사 클래스(pseudo-class, 가상클래스):
클래스가 정의된 것처럼 간주.
상태나 구조에 의해서 선택이 이루어진다
- 상태를 나타냄
a:link { color: blue; }
a:visited { color: green; } - 방문 후
a:hover { color: red; } - 마우스 올려놓으면
a:active {color : pink; } - 누를 때
td:nth-child(2n) -> 0 2 4 6 8 - 구조를 나타냄
td:nth-child(2n+1) -> 1 3 5 7 9
td:nth-child(2n +2) -> 2 4 6 8
p:nth-child(1){ - p 자식ㅈ ㅜㅇ
}
td:nth-child(2n){ 짝수번째
}
속성 선택자
속성( attribute )선택자:
특정한 속성을 가지는 요소를 선택한다.
h1[title] { color: blue; }
p[class=“example”] { color: blue; }
p.example {color: blue; }
=> .example은 그냥 모든 .example클래스,
p.example은 p태그의 example클래스
span.aa{ => 이걸
color: blue;
}
span[class=aa]{ =>이렇게 쓸 수 있음(속성선택자)
}
