1. CSS 기본선택자

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 지정하는 언어입니다.
스타일을 적용할 HTML 요소를 선택하기 위해 다양한 선택자가 사용되며, 이를 통해 특정 요소에 원하는 스타일을 지정할 수 있습니다.

선택자란?

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용하는 기능입니다.
선택자를 사용하여 HTML 요소를 선택하고, 해당 요소에 원하는 스타일을 지정할 수 있습니다.

<h3>선택자란?</h3>
<p>
   특정 html 요소를 선택하고자 할때 사용하는 기능<br>
   해당 요소를 선택해서 원하는 "스타일"과 "기능"을 적용시킬 수 있다.
</p>

• HTML 요소를 선택하여 스타일이나 기능을 적용할 때 사용됩니다.

1. 모든(전체) 선택자: *

전체 선택자는 문서 내의 모든 요소를 선택할 때 사용됩니다.

* {
    스타일속성: 값;
    스타일속성: 값;
    ...
}

• *: 문서의 모든 요소에 스타일을 적용할 때 사용됩니다.

2. 태그 선택자: 태그명

태그 선택자는 특정 태그를 선택하여 스타일을 적용합니다. 문서 내에 해당 태그가 여러 개 있을 경우, 모든 해당 태그에 동일한 스타일이 적용됩니다.

태그명 {
    스타일속성: 값;
    ...
}

• 태그명: 문서 내 특정 태그(예: h1, p, div)에 스타일을 적용할 때 사용됩니다.

3. 아이디 선택자: #아이디

아이디 선택자는 특정 HTML 요소 하나만을 선택할 때 사용됩니다. 이때 선택하려는 요소에는 반드시 고유한 id 속성이 있어야 합니다.

#id1 {
    color: skyblue;
}

<ol>
    <li id="id1">아이디선택자</li>
    <li>아이디선택자</li>
    <li>아이디선택자</li>
    <li>아이디선택자</li>
</ol>

• #아이디: 특정 요소 하나에 스타일을 적용합니다. 문서 내에서 유일해야 합니다.

4. 클래스 선택자: .클래스명

클래스 선택자는 여러 요소에 동일한 스타일을 적용할 때 사용됩니다. 동일한 클래스를 여러 요소에 중복하여 사용할 수 있으며, 여러 개의 클래스를 한 요소에 적용할 수도 있습니다.

.cl1 {
    color: blueviolet;
}

.cl2 {
    font-size: 25px;
    color: black;
}

.cl1.cl2 {
    background: beige;
}

<ul>
    <li class="cl1">클래스1</li>
    <li class="cl2">클래스2</li>
    <li class="cl1 cl2">클래스3</li>
    <li class="cl2">클래스4</li>
    <li class="cl1">클래스5</li>
</ul>

• .클래스명: 문서 내 여러 요소에 스타일을 적용할 때 사용됩니다.
• 여러 클래스를 조합하여 스타일을 복합적으로 적용할 수 있습니다.