Programming/CSS에 해당되는 글 1건

CSS 클래스 지정 시 공백에 따른 범위

Programming/CSS
스타일에서 클래스를 지정해서 사용할때 앞쪽 대상뒤의 클래스를 입력할 때 공백이 있을 경우와 없을경우의 차이가 있다.
공백이 있을경우는 해당 대상의 하위객체에 해당 클래스가 있으면 해당 스타일을 적용하라는 뜻이다.

<style type="text/css">
<!--
div .aa {
color: #ddd;
}
-->
</style>
<div class="aa">
no style
<span class="aa">color : #ddd</span>
</div>

위와같이 div 뒤에 공백이 있고 그 뒤에 .aa 라고 클래스를 지정했을 경우는 div 안에서 다른 태그에 aa라는
클래스를 지정했을 때만 컬러가 적용된다. 그래서 'no style' 텍스트는 aa 스타일이 적용되지 않고 보여진다.

하지만 스타일을 정의할때 div.aa 라고  적용을 했다면 'no style' 텍스트에도 스타일이 적용될것이다.
즉 div태그에 aa클래스가 선언되어있으면 해당 태그 하위 모든 텍스트에 똑같이 스타일을 적용한다는 뜻이다.


by 뭔일이여 2011. 11. 1. 10:28
| 1 |

티스토리툴바