CSS셀렉터와 요소

<style> 

   CSS 셀렉터 {

  CSS내용 

}

</style>

전 포스팅때 다루었던 내용입니다 

오늘은 CSS 셀렉터에 대해서 알아볼까합니다.

CSS의 기본구조의경우 

 Selector { 프로퍼티 : 값 ;, 포로퍼티 : 값 ;...}

형식으로 되어있습니다 

설명을 쉽게하기위해서 직접 코드를 보여드리는게 좋겠죠 

 h1 { color : red ; , font-family : '나눔고딕' ;...} 이런식으로 되어있습니다

하나씩 설명드리자면 

셀렉터의 경우 태그명 , 전체태그(*) , ID셀렉터, 클래스 셀렉터 등 존재합니다 

저도 셀렉터가 몇가지만 존재할 줄 알았는데 찾아보니 여러가지가 존재하더군요 

일단 하나씩 설명드리면 

1.태그 셀렉터(선택자)

태그 셀렉터의 경우 HTML 태그의 명을 이용하여 셀렉터(선택자)로 이용합니다 

태그는 너무 여러가지라 다 말씀못드리지만 

h1태그 , p태그 , div태그  등등 HTML 기반으로된 태그를 이용합니다 

1.ID 셀렉터(선택자)

ID 셀렉터의 경우 태그에 붙은 ID명을 이용하여 부착합니다 

ex) <p id='test'>test중</p>

#test{ 

 font-size : 20px;

 color : red;

}

ID셀렉터의 경우 #(샵)을 이용하여 구분지으며 

ID는 단일한 태그에만 붙이는게 원칙이지만 여러태그에 ID값을 주면서 사용할순 있습니다 

하지만 다음에 나올 클래스 셀렉터의경우 이런 재사용성을 높이기위하여 만들어진것입니다.

1.클래스 셀렉터(선택자)

클래스 셀렉터의 경우 태그에 클래스명을 이용하여 부착합니다 

ex) <p class='contain'>test</p>

.contain {

 font-size : 20px;

 color : red;

}

클래스 셀렉터는 .(점)을 이용하여 사용합니다 

아까 재사용측면에서 좋다고 말한것은 바로 

지정된 곳에 스타일을 지정하여 클래스로 지정하여 태그에 부착하면 되기 때문입니다. 

그럼 ID셀렉터는 쓰이지 않는것이냐 라고 하실수도 있는데 

CSS셀렉터 에서 가장 강력한 셀렉터는 ID 셀렉터입니다 

만약 태그,ID,클래스 셀렉터가 모두 지정된 상태라면 누구부터 사용될까요 ( 실무에선 이럴일은 없겠지만..)

ex) <p class='contain' id='test>test</p>

.contain {

 font-size : 10px;

 color : red;

}

#test{ 

 font-size : 20px;

 color : blue;

}

p{

 font-size : 30px;

 color : black;

}

ID 셀렉터 > 클래스 셀렉터 > 태그 셀렉터 순입니다 

그만큼 ID셀렉터는 강력하여 만일 클래스로 지정해놓아서 이태그만 이 클래스에서 벗어나

다른 스타일을 사용하겠다하면 ID셀렉터를 사용하시면됩니다.

그외 여러가지가 있으나 가장 많이 쓰고 중요한것을 다루었습니다 

이후에 궁금한것은 

https://poiemaweb.com/css3-selector

그리고 CSS에대해 간략히 강의를 듣고싶으시면 생활코딩의 CSS강의 (WEB)

https://opentutorials.org/course/3086