CSS의 선택자
선택자란 CSS에서 불러온(선택된) 태그 요소를 말한다.
선택자는 id, class, 태그선택자로 크게 3가지로 나눠진다.
id, class는 해당 태그에 특별히 적용할 css속성이 있을때 붙여주는 이름을 지정한다.
선택자에 따라 우선순위가 달라진다.
id와 class는 태그 안에 쓰는 '속성명'으로, 태그에 이름을 붙여주는 역할을 한다.1. 태그선택자
html태그에 스타일을 적용하는 선택자로 태그에 직접 스타일을 적용한다.
선택자 자리에 태그의 이름을 그대로 써준 후 {속성:"속성명";}을 나열한다.
태그 선택자는 연결된 html파일안에 동일한 태그가 있으면
공통적으로 동일한 스타일을 적용한다. 보통 css초기화 작업에서 많이 사용된다.
태그 선택자는 우선순위가 가장 낮다.
예시)
p {속성:속성값;}
img {속성:속성값;}
=> 선택자 자리에 태그 이름을 그대로 쓴다.2. class선택자
특정한 태그에만 스타일을 적용하고 싶은 경우 사용하는 선택자로,
태그에 class="클래스명" 형식으로 이름을 붙여주면 css에서
이 이름을 가진 태그들만 특별한 스타일을 적용할 수있다.
CSS에서 class선택자를 불러올 때에는 앞에 .을 붙인 후
class의 이름을 붙여서 {속성:속성값;}을 쓴다.
두번 째 우선순위를 가지며 제일 많이 사용된다.
class이름을 지을 때에는 의미에 맞게 지어야 하며
class이름은 다른 태그에도 중복사용 가능하다.
class이름은 영문 소문자로 작성하며 공백대신 -,_만 사용할 수 있다.
또한 이름에 숫자를 붙일 때에는 영문 소문자 뒤에 붙여야 한다.
예시)
html에서 이름을 붙일때
<h2 class="title_big" >제목</h2>
css에서 불러올때
.title_big{속성 : 값;}3. id선택자
id선택자도 class처럼 태그에 특정한 css속성을 적용하고 싶을 때
이름을 붙여주는 역할을 한다.
이름을 짓는 방법은 class와 동일하며 class와 다른 점은 id로 지은
이름은 단 한 번만 사용이 가능하다는 것이다.
태그에 id속성을 적용할 때에는 id="아이디명" 으로 이름을 지어주고,
css에서 이름을 불러올때에는 앞에 '#아이디명' 형식으로 불러온다.
id선택자는 선택자 중에서 제일 우선순위가 높다.
예시)
html에서 이름을 붙일때
<h2 id="title">제목</h2>
css에서 불러올때
#title{ 속성 : 값;}
Hi