728x90
[ type 선택자 ]
html 문서의 태그 이름을 선택자로 사용할 수 있다.
ex) p { color: blue; }
[ id 선택자 ]
id 선택자는 HTML 요소 중에서 특정 요소를 선택하여 스타일을 적용할 때 사용된다. id 선택자는 요소의 고유한 식별자를 이용하여 선택한다. 즉, ID가 ID 이름과 같은 태그에 대해서 적용한다.
ex) #아이디명 { 속성: 값; }
[ class 선택자 ]
클래스 선택자는 .클래스이름 을 사용하여 나타낸다. 클래스가 클래스이름과 같은 태그들에 대하여 적용한다.
ex) .ClassName { width: 100px; }
[ 전체 선택자 ]
전체 선택자는 * 을 사용하여 나타낸다. html 의 모든 태그에 대하여 적용한다.
ex)* { margin: 0 auto; }
[ 하위 선택자 ]
하위 선택자는 선택자 사이를 공백을 사용하여 나타낸다. 앞 요소의 자식인 뒷 요소를 선택한다.
ex) .section ul { text-shadow: none; }
[ 자식 선택자 ]
하위 선택자는 선택자 사이를 > 를 사용하여 나타낸다. 앞 요소의 자식인 뒷 요소를 선택한다.
ex) .section > ul { text-shadow: none; }
[인접 선택자 ]
인접 선택자는 선택자 사이를 + 를 사용하여 나타내다. 앞 요소 바로 뒤의 뒷 요소를 선택한다
ex).h1 + ul { color: red; }
[형제 선택자 ]
(같은 부모를 가진 요소들을 형제라고 부른다)
형제 선택자는 선택자 사이에 ~ 를 사용하여 나타내는 것으로 앞 요소 뒤에 있는 모든 뒷 요소를 선택합니다.
ex) h1 ~ ul { color: red; }
[ 그룹 선택자 ]
여러 선택자들을 ',' 로 구분하여 함께 묵어 속성을 부여하는 것이다.
ex) h1, p { boder: 5px solid lightblue; }
[ 속성 선택자 ]
html 요소의 속성 유무 또는 속성값을 중괄호 [ ]에 넣어 선택자로 사용할 수 있다.
ex)
h1[class] - class명을 가진 h1 요소
img[alt] - alt 속성을 가진 img요소
p[class="abc"] - class명이 유일하게 'abc'인 p요소
[ 가상클래스 선택자 ]
선택자 뒤에 가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다.
ex)
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
[ 가상요소 선택자 ]
요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자이다.
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(2n+1) - 홀수 번째 자식
[ 종속 선택자 ]
type선택자와 id선택자, class 선택자가 결합된 형태이다.
<p id="atxt"> 선택자의 다양한 표현</p>
[ 선택자의 우선순위 ]
같은 선택자가 여러 css명령을 중복으로 받으면 일반적으로 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높다.
Type선택자 < Class선택자, 가상 선택자< id선택자 < inline style < !important