본문 바로가기

프로그래밍/HTML.CSS

CSS 선택자

CSS 선택자

 - 특정 HTML 태그를 선택할  사용하는 기능

 - 선택한 태그에 원하는 스타일 또는 스크립트 적용 가능

 

 

CSS 선택자의 종류

 


- 태그 선택자 : 해당하는 태그를 선택한다. h1{ }

- 아이디 선택자 : 해당하는 id 선택한다. id 속성은 중복되지 않아야 한다. #id{ }

- 클래스 선택자 : 해당하는 class 선택한다. Class 속성은 중복가능(일괄처리). .class{ }

- 속성 선택자 : 해당하는 속성을 선택한다.

 

 

반응 선택자

 - 선택자 : active - 클릭되었을 

 - 선택자 : hover - 마우스를 올렸을 

 - 선택자 : checked - 체크되었을  

 - 선택자 : not(선택자)

가상 클래스

 - 선택자 : after :  태그 컨텐츠 다음에 내용을 넣기 위해 사용

 - 선택자 : before : 태그 컨텍츠 이전에 내용을 넣기 위해 사용

 

CSS 선택자

Selector

Section,ul - section+ul

Section ul - section 모든자손

Section > ul - section 직계자손(바로아래ul)

Header ~p - header 모든 형제 요소

Header +p - header 근접 형제 요소 (header 모든 근접 형제p)

 

의사 요소

- 요소의 특정 부분에 스타일을 적용하기 위해 사용되는 가짜 요소

::after - <?>태그 컨텐츠 다음에 내용을 넣는다

::before - <?>태그 컨텐츠 이전에 내용을 넣는다

::selection <?>태그 컨텐츠에서 사용자가 선택한 부분


p::after{

content:" - my world.";

}

/* p태그 문장 앞에 해당 문장 추가 */

p::before{

content :"*";

}

 

 

 

 -

 

'프로그래밍 > HTML.CSS' 카테고리의 다른 글

CSS실습 - 예제페이지 만들어보기  (0) 2018.06.28
CSS 속성  (0) 2018.06.27
HTML - 첫번째 수업  (0) 2018.06.26
웹표준 - HTML  (0) 2018.06.26