선택자란?
선택자란 CSS효과를 적용할 대상 가리켜 선택해주는 것
[사용 방법]
<head>에서 CSS 파일 불러옴
<link href="CSS 파일" rel="stylesheet" type="text/css">
선택자 { 선언(속성=속성값); 선언(속성=속성값); 선언(속성=속성값); }
[우선순위]
기본적으로는 css속성은 위에서 부터 아래로 적용, 같은 태그에 여러개의 css속성이 설정된 경우에는 우선순위에 따라 스타일이 적용된다.
태그선택자 < 클래스선택자 < 아이디선택자 < 인라인스타일 < !important
전체 선택자 *
HTML 페이지 내부의 모든 태그 선택*{
text-align: left;
margin: 10;
padding: 5;
}
타입 선택자
HTML 태그를 직접 선택하는 선택자h3{ color:lightcoral; }
id 선택자 #
- id는 유일한 식별자
- 어떤 요소에 대한 유일한 속성값이다.
- 속성에 id를 지정하고 style에서 지정된 id값을 사용한다.
- #으로 아이디를 구분한다.
#s_id01{ color:violet; }
#s_id02{ color:darkorchid; }
#s_id03{ color:darkslateblue; }
#s_id04{ color:indigo; }
class 선택자 .
- 여러 요소에 공통적으로 적용한다.
- 한 페이지에 여러번 나오는 속성값을 class로 지정해 관리한다.
- .으로 클래스를 구분한다.
- 클래스와 id같이 사용도 가능 -> id는 유일한 값으로 우선순위 높음
.s_cl{ color:lightgreen; }
#s_cl_id{ color:seagreen; }
자식 선택자 >
한단계 아래 하위 요소를 칭할 때 자식 선택자라고 함자식1
자식인가?
#ale>p{ color:tomato;}
div>p{ color:orange; }
하위 선택자 >
특정 요소의의 하위 요소 지정할 때 사용div>p>span특정 요소의의 하위 요소 지정할 때 사용
div>p>span>p>span특정 요소의의 하위 요소 지정할 때 사용
div>span{ background-color: olive; }
인접 선택자 +
인접하는 선택자, 뒤따르는 선택자다지정한 요소 다음 요소 선택한다 인접인가?
span+b{ background-color: sandybrown; }
속성 선택자 [ ]
속성이 정의된 태그만 선택하는 선택자
속성이 정의된 태그만 선택하는 선택자
속성이 정의된 태그만 선택하는 선택자
name 속성 정의
p[title]{ color:royalblue; }
p[title="b"]{ color:skyblue; }
p[name="c"]{ color:blue; }
종속 선택자
타입선택자와 id선택자, class선택자 등이 혼합된 형태이다.
타입선택자와 id선택자, class선택자 등이 혼합된 형태이다.
.cidt1{ background-color: hotpink; }
.cidt2#cidt{ background-color: mediumslateblue; }
그룹 선택자 ,
여러 요소에 각각 같은 속성을 적용하는 것<strong>여러 요소에 각각 같은 속성을 적용하는 것</strong>
<i>여러 요소에 각각 같은 속성을 적용하는 것 </i>
strong,i,s{ color: silver; }
가상 클래스 선택자 :
특정 이벤트가 발생되는 태그- link : 방문전 링크 선택하는 선택자
- visited : 방문후 링크 선택하는 선택자
- hover : 마우스를 요소에 올린 동안 선택하는 선택자
- active : 마우스를 클릭할 때 선택하는 선택자
네이버
다음
구글
a:link{ color:darkorange; }
a:visited{ color:deeppink; }
a:hover{ background-color: lemonchiffon; }
a:active{ color: darkred; }
'Frontend > HTML & CSS' 카테고리의 다른 글
| [CSS ①] 작성방법 / 사용 이유 (CSS기초/개념) (0) | 2021.02.02 |
|---|---|
| [HTML ⑤/⑤] 시맨틱구조 / 시맨틱태그 (html기초/개념) (0) | 2021.01.30 |
| [HTML ④/⑤] 폼 태그 / 필드셋 / 라디오버튼 / 체크박스버튼 / input태그 (html기초/개념) (0) | 2021.01.30 |
| [HTML ③] 컨텐츠 태그 / 테이블 / 이미지 / 오디오 / 비디오 (html기초/개념) (0) | 2021.01.30 |
| [HTML ②/⑤] 태그 Tag / 글자태그 / 하이퍼링크 태그 / 리스트태그 (html 기초 / 개념) (0) | 2021.01.30 |
댓글