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순위. 속성 값 뒤에 !important를 붙인 속성
- 2순위. HTML에서 style을 지정한 속성 (inline으로 style 속성 지정)
- 인라인 스타일 속성을 쓰면 코드 유지가 어려우므로 권장하지 않는다
- 3순위. id로 지정된 속성
- 4순위. class로 지정된 속성
- 5순위. 태그 이름으로 지정된 속성
- 6순위. 상위 객체에 상속된 속성
content
html 문서에 쓰지 않고도 CSS로 내용(텍스트나 이미지)을 생성하는 역할
::before, ::after 가상 요소와 주로 사용한다
⚒️ 예제
CSS\webapp\02_cssSelector |
|
exam01.html | 자식 셀렉터, 후손 셀렉터, 가상 클래스, 가상 요소 |
exam02.html | content: |
'WEB > CSS' 카테고리의 다른 글
리스트, 표, 폼 꾸미기 (0) | 2024.08.14 |
---|---|
Positioning (0) | 2024.08.14 |
Box Model (0) | 2024.08.14 |
색과 텍스트 꾸미기 (0) | 2024.08.14 |
CSS 개요 (0) | 2024.08.12 |
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순위. 속성 값 뒤에 !important를 붙인 속성
- 2순위. HTML에서 style을 지정한 속성 (inline으로 style 속성 지정)
- 인라인 스타일 속성을 쓰면 코드 유지가 어려우므로 권장하지 않는다
- 3순위. id로 지정된 속성
- 4순위. class로 지정된 속성
- 5순위. 태그 이름으로 지정된 속성
- 6순위. 상위 객체에 상속된 속성
content
html 문서에 쓰지 않고도 CSS로 내용(텍스트나 이미지)을 생성하는 역할
::before, ::after 가상 요소와 주로 사용한다
⚒️ 예제
CSS\webapp\02_cssSelector |
|
exam01.html | 자식 셀렉터, 후손 셀렉터, 가상 클래스, 가상 요소 |
exam02.html | content: |
'WEB > CSS' 카테고리의 다른 글
리스트, 표, 폼 꾸미기 (0) | 2024.08.14 |
---|---|
Positioning (0) | 2024.08.14 |
Box Model (0) | 2024.08.14 |
색과 텍스트 꾸미기 (0) | 2024.08.14 |
CSS 개요 (0) | 2024.08.12 |