티스토리 뷰

[HTML5 / CSS3] CSS 선택자

CSS 선택자


CSS 스타일시트를 작성할 때 가장 먼저 입력하게 되는 요소가 바로 CSS 선택자입니다.

어느 요소에 CSS를 적용할 지 선택을 해야하는데요

이 때 원하는 요소를 선택하고자 할 때 반드시 지켜야 할 규칙이 있습니다.



기본적으로 작성하게 되는 CSS 작성법입니다.

제일 앞 부분의 요소가 바로 선택자 요소인데요. 이 선택자가 HTML페이지 안의 특정 element요소를 선택하여 

스타일을 선언하게 됩니다. 이러한 특정 element요소를 선택하는 방식에는 여러가지가 있습니다.



CSS 선택자의 종류


태그선택자

위의 그림에서 보았듯이 맨 앞의 P가 바로 태그선택자라 할 수 있습니다. HTML에서 정의되는 태그를 선택하여 스타일을 선언할 수 있습니다.


전체선택자

전체 선택자는 " " 기호로 표기합니다. HTML페이지 내부의 모든 태그에 선언한 CSS속성을 적용합니다. 그렇기 때문에 보통 margin이나 padding값을 초기화(리셋)하는 등 기본값을 적용할 때 제일 먼저 사용기도 합니다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지를 로드하는데에 속도가 느려질 수도 있기 때문에 자주 사용하지 않는 편이 좋습니다.


클래스선택자

태그선택자로 스타일을 적용하면 HTML내부에 사용된 해당 태그에 전부 선언한 css스타일이 적용됩니다. 물론 이를 염두하고 적용했을 경우엔 상관이 없지만, 같은 태그라도 일부에서는 다르게 지정하거나, 혹은 하나의 태그만 선택하며 적용해야 할 경우가 생기게 됩니다. 이럴 때 사용할 수 있는 태그가 바로 클래스 태그입니다.



클래스 선택자는 태그 옆에 선언한 class 명으로 선택하여 스타일을 선언합니다. 이 때 클래스 명 앞에 마침표를 표기하고 클래스명을 적어주어야 합니다. 클래스명은 임의로 지정하며 다른 태그 이름과 겹쳐서는 안됩니다. 이렇게 클래스를 적용하면 어떠한 태그든 선언한 클래스명만 적용해 주면 해당 스타일을 적용할 수 있습니다. 


ID선택자

ID선택자는 마침표 대신 #를 사용하고, class속성이 아닌 id속성을 사용하는 것을 제외하곤 클래스 선택자와 매우 유사합니다. 차이점이 있다면 id 선택자는 마침표가 아닌 # 을 표기하고 선언합니다. 또한 클래스선택자의 경우 문서 안에서 여러번 반복해서 사용할 수 있는 반면, id선택자는 요소의 크리나 위치 등 레이아웃을 지정할 때 주로 사용하기 때문에 문서 안에서 한번만 적용할 수 있습니다. 












'퍼블리싱' 카테고리의 다른 글

[HTML5 / CSS3] 조건부주석  (0) 2017.02.20
[jQuery / JavaScript] jQuery 선택자  (0) 2017.02.17
[jQuery / JavaScript] jQuery 선택자  (0) 2017.02.16
[HTML5/CSS3] CSS 선택자 2  (0) 2017.02.15
[HTML5 / CSS3] CSS 선택자  (0) 2017.02.14
웹표준과 웹접근성  (0) 2017.02.12

Recent Comments