CSS 기초(7) 선택자(1) 태그 선택자, class 선택자, id 선택자, 부모, 자식, 형재 선택자

CSS 기초(7)

---

오늘은 CSS에서 선택자를 지정하는 방법에 대해 알려드리겠습니다.

선택자를 지정하는 방식에는 직접 태그를 선택할 수도 있고

class 속성이나 id 속성을 지정할 수도 있습니다.

 

더 나아가 부모 태그, 자식 태그, 형재 태그를 이용하여 선택자를 지정할 수도 있는데요.

오늘은 태그 선택자, class 선택자, id 선택자, 부모, 자식, 형재 선택자 까지 다루어보겠습니다.

 

(1)

태그 선택자

먼저 태그 선택자입니다. 태그 선택자는 말 그대로 HTML에서 태그를 직접 선택하는 방식으로

CSS에서는 '태그{속성: 속성 값;}'으로 작성할 수 있습니다.

태그 선택자의 단점은 태그가 겹치는 것이 없다면 해당하지는 않지만

만약 태그가 겹치는 상황이 생겨서 원하지 않은 태그에도 스타일이 지정될 수 있습니다.

그렇기 때문에 태그 선택자는 보통 그룹으로 선택자를 통해 태그를 지정할 경우 많이 사용됩니다.

참고로 그룹 선택자는 ,를 사용하여 태그와 태그를 연결합니다.

 

(2)

class, id 선택자

다음은 class 속성과 id 속성을 선택자로 지정하는 방식입니다.

CSS에서는 class 속성은 '. class {속성: 속성 값;}'으로

id 속성은 '#id {속성: 속성 값;}'으로 작성하여 사용할 수 있습니다.

 

보통 실무에서 많이 쓰는 방식으로 태그에 class, id 속성을 지정하여

고유의 이름을 만들어서 지정하는 방식입니다.

 

해당 선택자는 위에 태그 선택자의 단점을 보안할 수 있어서 많이 사용되고 있습니다.

원하는 위치에 스타일을 지정할 수 있기 때문에 많이 사용됩니다.

 

여기서 class 선택자와 id 선택자의 차이점은

HTML에서 class 속성은 똑같은 속성을 여러 개로 지정할 수 있지만

id 속성은 원칙적으로 한 가지만 지정할 수 있다는 점입니다.

이유는 같이 사용되는 JS에서 오류가 발생하기 때문입니다.

 

그래서 class 속성을 선택자로 사용하는 방식을 더 많이 사용합니다.

 

(3)

부모, 자식, 형재 선택자

오늘의 마지막으로 부모, 자식, 형재 선택자에 대해서 알려드리겠습니다.

부모, 자식, 형재 선택자를 알기 전에 부모 태그, 자식 태그, 형재 태그에 대해 알아두셔야 합니다.

HTML에서 부모 태그는 안에 태그를 감싸고 있는 겉에 태그를 말하는데요!

예를 보여드리면

'<div>

<h1></h1>

<p></p>

</div>'

이런 태그의 구성을 보시면 h1 태그와 p 태그를 감싸는 div 태그는 부모 태그로,

div 태그 안에 있는 h1 태그와 p 태그는 자식 태그로,

h1 태그와 p 태그는 서로 형재 태그로 구분하시면 됩니다.

 

이제 부모, 자식, 형재 태그에 대해 알아보았으니 선택자에 대해서 알아보겠습니다.

앞에서도 보셨듯이 선택자를 지정하는 방식에 대한 차이가 있었습니다.

 

class 선택자는.으로 id 선택자는 #으로 태그 선택자는 그냥 태그로 선택하는 차이가 있습니다.

 

부모, 자식, 형태 선택자도 특징이 있는데요!

 

부모 선택자는 혼자 사용할 수 없고 항상 자식 선택자나 형재 선택자와 함께 사용됩니다.

예시를 보여드리면 '부모 선택자' '형재 선택자'{속성: 속성 값;}으로 작성할 수 있습니다.

이렇듯 특징은 그냥 여백을 두고 부모 선택자와 그 안에 있는 하위 선택자를 지정하는 방식입니다.

 

이 방식은 자손 선택자 방식이라고 하며 자손 선택자의

장점은 HTML에서 태그가 겹치더라고 해당 부모의 자식인 태그를 정확하게 지정하여

스타일을 적용할 수 있기 때문에 위에 태그 선택자의 단점을 보안할 수 있습니다.

그래서 실무에서도 많이 사용되고 있습니다.

 

그리고 부모 선택자를 두고 자식 선택자와 형재 선택자를 구분하는 방식도 있습니다.

이 부분에 대해서는 참고하시고 추후에 사용할 일이 있다면 구글링을 통해 복사하셔서 사용하시면 됩니다.

 

위에 부모 선택자와 자식 선택자의 구성과 비슷하며 부모 선택자와 자식 선택자 사이에 >를 사용하면

자식 선택자를 의미하는 선택자가 됩니다.

 

예를 보여드리면 '부모 선택자' > '하위 선택자'{속성: 속성 값;}'으로 지정하여 자식 선택자를 선택합니다.

 

다음은 형재 선택자와 관련한 방식으로 인접 형재 선택 자라고 합니다.

형재 선택자에서 바로 붙어있는 형재 태그를 선택할 경우 사용됩니다.

예를 보여드리면 '부모 선택자' '형재 선택자' + '형재 선택자'{속성: 속성 값;}'으로 사용할 수 있습니다.

 

이 방식을 사용하면 더욱 구체적으로 태그를 지정할 수 있다는 점입니다.

 

한 가지 알려드리면 부모, 자식, 형태 선택자 방식을 태그만 사용할 수 있는 것이 아니라

해당 위치에 있는 class 속성, id 속성의 선택자로도 지정할 수 있다는 것입니다.

 

마지막에 알려드린 방법에 대해서는 참고로만 하시고 class 선택자,

그룹 선택자, 자손 선택자 정도만 알아두셔도  작업을 하시는데 엄청난 불편함은 없으실 텐데요.

혹시나 사용할 수 있는 경우가 생길 수 있기 때문에 이런 것이 있다는 것 정도로 넘어가시면 좋겠습니다.

 

---

 

오늘은 여기까지 하겠습니다.

오늘은 선택자를 지정하는 방식에 대해 알아보았는데요!

다음에는 선택자를 지정하는 방식에 대해 한번 더 다뤄보겠습니다.

다음 글에는 좀 더 중요하고 많이 사용되기 때문에 꼭 보시면 좋겠습니다.

 

감사합니다!