Selector

CSS 셀렉터

1.  개념

• CSS 에서 꾸밀 대상, 즉 속성을 줄 대상

 

2.  종류

• ****  : 전체 선택자
• tag : 태그 선택자
• .class : 클래스선택자
• #id : 아이디선택자
• 선택자:가상상황 : 가상선택자

 

---

 

CSS 기본 셀렉터

• 태그 이름으로 접근한다

 h1 {  ... }  /* <h1> 태그의 속성을 지정한다 */

 

예시 body

<p>
	<div>
		<fieldset>
			<input type="text" >
			<input type="password" id="pwd">
			<input type="text" >
		</fieldset>
	</div>
</p>

 

---

 

CSS 자식 셀렉터 (  > )

• > : 자식 셀렉터, HTML 태그의 계층 구조를 표현한다

 p > div > fieldset > #pwd {......}
/* p태그 안의, div태그 안의, fieldset태그 안의, id가 pwd인 태그 */

 

---

 

CSS 후손[자손] 셀렉터 ( ) (공백)

• 후손 셀렉터는 태그의 계층 관계를 나타낸다
• 자식 셀렉터와 다르게, 명시과정에서 중간단계를 생략해도 된다

p div #pwd {......}
/* p 태그하위의, div 태그안의, id가 pwd인 태그 */

 

---

 

특정 요소를 구체적으로 서술하기

• HTML 태그와 class 또는 id 속성과 함께 명시된다
• 특정 요소를 더욱 정교하게 명시하고자 할 때 사용한다
• A#B : id 속성이 B인 A태그
• A.B : class 속성이 B인 A태그

p div input#pwd {......}
/* p태그 안의, div태그 안의, id가 pwd인 input태그 */

 

---

 

HTML 태그의 속성에 따른 구분

• CSS 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라서 태그 요소를 좀 더 구체적으로 가리킬 수 있다
• selector[속성] : []안에 명시된 태그 속성을 갖는 요소를 의미한다
• selector[속성=값] : []안에 명시된 태그 속성이 지정된 값을 갖는 요소를 의미한다

input[type='password'] {......}
/* input 태그 중에서 type이 'password'인 input 태그 */

 

---

 

가상 선택자

• CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다
• 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있다
• 가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 쓴다
• 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동한다

 

---

 

가상 요소

• 가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다
• 가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있다
• HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자이다

 

---

 

가상 클래스 기법

가상 클래스	의미
:first-child	여러 개의 반복되는 태그들중에서 첫 번째 요소
:last-child	여러 개의 반복되는 태그들중에서 마지막 요소
:link	링크의 기본 상태
:active	요소 위에서 마우스가 눌려져 있는 상태
:hover	요소에 마우스가 올라가 있는 상태
:visited	방문했던 경험이 있는 링크
:focus	요소에 포커스가 지정된 상태
:checked	체크박스나 라디오버튼 등이 체크된 상태
:selected	드롭다운에서 선택된 요소

• 예) 링크의 글자 색상 적용

a:link {color: #555555; }
a:visited {color: #555555; }
a:active {color: #555555; }
a:hover {color: #555555; }

 

• 예) focus 유무에 따른 배경색 설정

input {background-color: #ffffff; }
input:focus {background-color: #555555; }

 

• 예) 마우스 위치에 따른 배경 이미지 설정

.menu_item {background-image: url(기본이미지); }
.menu_item:hover {background-image: url(롤오버이미지); }

 

---

 

CSS 선택자 우선순위

특정 태그에 스타일 속성이 중복될 경우, 어떤 속성이 적용될까?

즉, 스타일에 우선순위를 두어서 HTML의 요소가 어떤 CSS 스타일에 영향을 받을지 결정하는 것이다

 

1.  1순위. 속성 값 뒤에 !important를 붙인 속성
2.  2순위. HTML에서 style을 지정한 속성 (inline으로 style 속성 지정)
   •  인라인 스타일 속성을 쓰면 코드 유지가 어려우므로 권장하지 않는다
3.  3순위. id로 지정된 속성
4.  4순위. class로 지정된 속성
5.  5순위. 태그 이름으로 지정된 속성
6.  6순위. 상위 객체에 상속된 속성

 

---

 

content

html 문서에 쓰지 않고도 CSS로 내용(텍스트나 이미지)을 생성하는 역할

::before, ::after 가상 요소와 주로 사용한다

 

---

 

⚒️ 예제

CSS\webapp\02_cssSelector
exam01.html	자식 셀렉터, 후손 셀렉터, 가상 클래스, 가상 요소
exam02.html	content: