HTML

[HTML] class와 id 선택자

korany 2023. 2. 21. 15:30

class

어떠한 대상을 관리하기 쉽도록 그룹핑

style에서 사용할때 .class명

class속성은 태그의 디자인만을 위해 존재하는 속성 
중복된 이름으로 여러개의 태그에게 클래스를 지정하는것이 가능

class의 깊이

공백이 있는 경우

<style>
	/* 중요!! */
	div .box{color : aqua;}
	/* div안으로 들어가서 box클래스가 있다면 스타일을 적용해 */
</style>

depth로 정확하게 스타일 지정하기

<style>
	.box .box2 .s_blue{color: navy;}
	/* box안으로 들어가서 box2안으로 들어가서.s_blue 클래스의 스타일을 적용해 */
</style>

 

 

공백이 없으면 해당태그의 클래스명으로 접근하라는 의미

<style>
	div.box{color: lime;}
	/* div인데 이름이box인 클래스를 찾아 */
</style>

depth로 정확하게 스타일 지정하기

<style>
	h2.s_green{color: purple;}
	/* h2태그인데 클래스 이름이.s_green인 요소의 스타일을 적용해  */
</style>

id

id는 단순히 스타일변경뿐만 아니라 태그의 검색, 접근 등의 다양한 기능을 포함하고 있는 속성이므로
중복된 id를 생성할 수 없다 (class는 중복된 이름 가능!)

 

style에서 클래스의 접근이 .이었다면  아이디의 접근은  #이다