[CSS] 한 HTML 태그에 여러 클래스, 아이디 동시 추가

여러 클래스, 아이디 동시 추가

 

HTML에 CSS를 적용하는 과정에서 잠깐 고민하게 만드는 문제가 생겼다. 바로 한 요소에 어떻게 여러 클래스, 아이디를 적용하냐하는 것이다. 이 고민을 하게 된 것은 부트스트랩을 클래스로 적용하는데, 거기에 내가 만든 클래스명을 붙여 해당 요소를 쉽게 컨트롤 하고 싶기 때문이었다.

HTML에서 한 요소에 두 개 이상의 클래스를 적용하는 방법은 이렇다.

class = "클래스명1 클래스명2"

즉, 각 클래스명은 띄어쓰기로 구분하여 적으면 두 가지 클래스가 적용된다. 실제 코드를 보면 아래와 같다.

      <button class="btn btn-primary btn1">소주</button>
      <button class="btn btn-primary btn2">맥주</button>
      <button class="btn btn-primary btn3">콜라</button>

 

위 코드에서는 btn와 btn-primary와 btn1이라는 세 가지 클래스가 적용 된 것을 확인 할 수 있다.