[HTML & CSS] 셀렉터(Select)

HTML문서에서는 <h1>, <h2>, <h3>등 여러 요소가 공존한다. 그렇다면 <h2>같은 내가 바꾸고 싶은 요소만 색을 바꾸려면 어떻게 해야할까?

 

id로 이름붙여서 스타일 적용하기

 

<h2>요소는 하나의 태그이기 때문에 다음과 같이 태그를 선택해 색상을 변경할 수 있다.

h2 {
  color: yellow;
}

어때요. 정말 쉽~죠?!

 

그러나 만약 다음과 같이 h2의 영역이 중복적으로 활용되는 코드에서 특정 영역만 색상을 변경하기 위해서는 id를 설정하여 해결할 수 있다. id는 하나의 문서에서 한 요소에만 사용이 가능하며 그 내용을 다음과 같다.

<h4 id="special">special</h4>

#special {
  color: blue;
}

결과는 다음과 같다. 

요랬던 화면이

요렇게 바뀝니다.

 

class로 스타일을 분류하여 적용하기

 

 id와 유사하게 특정 요소에 class를 지정하는 방법도 있다.

 만약 <li>요소에 id를 사용한다면 어떻게 될 까? 문서에 id가 없으면 사용할 수 있지만 그렇지 않다면 사용할 수 없다. 이 때 사용할 수 있는 것이 class다.

 실제로 프론트엔드 작업에서는 id보다 class를 훨씬 빈번하게 사용한다고 한다.

다만 class를 선택할 때에는 #이 아닌.(점=dot)을 사용해야 한다. 

 

 HTML에 다음과 같이 class를 지정하고

 <ul>
        <li class="color-change">Home</li>
              <li class="color-change">Mac</li>
        <li class="color-change">iPhone</li>
        <li class="color-change">iPad</li>
      </ul>

 CSS에 다음과 같이 코딩하면

.color-change {
  background-color: blue;
}

 

요런 화면이

요렇게 바뀐다.

 

여러개의 class를 하나의 요소에 적용하기

 

여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분한다.

코드를 보며 이해 해보자 

 

<li class="color-change picked">Home</li>

이 코드에는 color-change 클래스와 picked 클래스가 있다. 이는 하나의 요소에 여러개의 클래스가 존재하는 형태이다.

picked 클래스에 노랑색 배경과 검정색 글씨를 적용하면 다음과 같다.

.picked {
  background-color: yellow;
  color: black;
}

그리고 화면은 다음과 같이 바뀐다.

 

 

총평,,,

 

확실히 점차 배우는 속도보다 진도가 나가는 속도가 더 빨라지는 느낌이 다가오고 있다.

블로깅을 하는 것 또한 좀 더 전략적인 부분에서 필요한 것만 담을 수 있도록 해야겠다.