CSS 띄어쓰기와 붙여쓰기의 차이점

CSS 띄어쓰기와 붙여쓰기의 차이점이 있다는 사실 알고 있나요? ‘.blue .green’과 ‘.blue.green’을 예시로 코드를 보면서 이해해보겠습니다.

<h2>CSS 띄어쓰기</h2>
<div class="blue">
 <div class="green">
  <span>안녕하세요.</span>
 </div>
</div>

<h2>CSS 붙여쓰기</h2>
<div class="blue green">
 <span>안녕하세요.</span>
</div>
span{font-size:1.3rem;}
.blue{color:blue;}
.green{color:green;}
CSS 띄어쓰기와 붙여쓰기의 차이점

띄어쓰기는 자식을 선택하는 선택자이며 가장 뒤에 있는 선택자가 속성을 적용받습니다. 자식을 선택하는 선택자이기 때문에 HTML에서 자식 태그를 생성해야 합니다.

붙여쓰기는 여러 개의 클래스를 지닌 특정 선택자를 선택할 때 사용합니다. 마찬가지로 가장 뒤에 있는 선택자가 속성을 적용받습니다. HTML5 기본 레이아웃 만들기에서 버튼을 클릭하면 배경과 글씨 색상이 바뀌는 것은 바로 띄어쓰기를 사용했기 때문입니다.

하지만 클래스가 아닌 id로 사용하려면 CSS 띄어쓰기는 할 수 있지만 붙여쓰기는 못 합니다. id는 기본적으로 고유해야 하므로 하나만 써주어야 하고 똑같은 단어를 쓰면 안 됩니다.

Leave a Comment