기본 선택자 지정 방법 종류

 

 

 

---

 

기본 선택자를 정의하는 방법은 무엇이 있을까?

 

 

---

 

 

 

 

전체 선택자

 

--

전체 선택자를 사용하는 방법은

HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로

"html", "head", "title", "style", "body" 태그 등 모든 요소를 선택자로 정의한다.

 

기본 형식

*{
   /* CSS 코드 */
}

 

예시 코드

<style>
   *{
      color: red;
   }
</style>
<!-- 생략 -->
<h1> 제목 </h1>
<p> 내용 </p>

--

 

 

 

 

특정 태그 선택자

 

--

HTML의 특정 태그를 지정하여 선택자로 정의하는 방법으로

특정 태그명과 일치한 모든 요소를 한 번에 선택하여 CSS를 적용한다.

 

기본 형식

태그명{ /* CSS 코드 */}

<style>
   p{
      color:blue;
   }
</style>
<!-- 생략 -->
<h1> 태그 선택자 </h1>
<p> p태그에 작성한 글입니다.</p>
<p> p태그에 작성한 글입니다.2</p>

--

 

 

 

 

아이디 선택자

 

--

HTML 태그에서는 "id 속성"을 사용할 수 있는데

해당 "id 속성"에서 사용하는 값을 통해 선택자로 지정하여 사용하는 방법으로

속성값 앞에는 "#"기호를 붙인다.

 

기본 형식

#id속성값{ /* CSS 코드 */ }

 

예시 코드

<style>
   #title{
      color:green;
   }
</style>
<!-- 생략 -->
<h1 id="title"> 아이디 선택자 </h1>
<p> p태그에 작성한 글입니다.</p>
<p> p태그에 작성한 글입니다.2</p>

id의 값은 고유한 값으로 중복된 값을 사용할 수 없지만
다른 html 파일과는 서로 동일한 id 값을 정의할 수 있다.

--

 

 

 

 

클래스 선택자

 

--

HTML 태그에서는 "class 속성"을 사용할 수 있는데

해당 "class 속성"에서 사용하는 값을 통해 선택자로 지정하여 사용하는 방법으로

"id 속성"과 비슷한 방식이지만 "id 속성"과는 다르게 중복값이 가능하다.

속성값 앞에 "." 기호를 붙인다.

 

기본 형식

.class속성값{ /* CSS 코드 */ }

 

예시 코드

<style>
   .red{
      color:red;
   }
   .blue{
      color:blue;
   }
</style>
<!-- 생략 -->
<h1 class="red"> 아이디 선택자 </h1>
<p class="blue"> p태그에 작성한 글입니다.</p>
<p class="blue"> p태그에 작성한 글입니다.2</p>

실무에서 가장 많이 사용하는 선택자 지정 방법이다.

--

 

 

 

 

기본 속성 선택자

 

--

HTML 태그에서 사용할 수 있는 "속성"과 "값"을 사용하여 선택자로 지정하는 방법이다.

 

기본 형식

[속성]{ /* CSS 코드 */ }
[속성=값]{ /* CSS 코드 */ }

[href]{}            /* (속성 선택자) 어떤 요소라도 href 속성만 있으면 선택*/
a[href]{}           /* (태그 선택자 + 속성 선택자) a태그에 href속성이 있으면 선택 */
#title[href]{}      /* (아이디 선택자 + 속성 선택자) 아이디가 title이면서 . . .*/
.title[href]{}      /* (클래스 선택자 + 속성 선택자) 클래스가 title이면서 . . .*/

속성 선택자는
단독으로도 사용이 가능하고, 다른 선택자와 함께 사용도 가능하다.

 

예시 코드

<style>
   a[href]{
      color:red;
      display:block;
   }
</style>
<!-- 생략 -->
<a href="#">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>

 

예시 코드

<style>
   a[target="_blank"]{
      color:red;
      display:block;
   }
</style>
<!-- 생략 -->
<a href="#" target="_self">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>

--

 

 

 

 

문자열 속성 선택자

 

--

태그가 가진 속성 값이 "특정 문자열"과 일치하는 요소를 선택자로 지정하는 방법으로

"기본 속성 선택자"와 비슷하지만 선택 방법이 조금 다르다.

 

--