HTML , CSS

[HTML/CSS] CSS 식별자

(งᐛ)ว 2023. 10. 1. 19:41
728x90

css selector (css 식별자)

class : 스타일 변경만을 위해 사용되는 속성으로 동일한 태그가 있을 때 구별하기 위한 식별자가 됨 (온점으로 접근)

 

head영역 style태그로

문단p태그 color를 지정했으므로 

똑같이 문단p태그를 가진 내용만 변경됨

 

 

기존 p태그 레드에 이어 

text라는 클래스명을 가진 내용에 새로운 컬러를 지정함

 .클래스명{color : ___;} : 해당 클래스 값을 가진 태그에 적용 

클래스명 앞 온점 누락하지 않도록 주의 

 

 

기존 p태그와 .text클래스에 이어 

p태그이면서 text클래스명을 가진 내용에 새로운 컬러를 지정함

클래스명.클래스명{color : ___;} : 해당 태그 중에서도 해당 클래스명을 가진 태그에 적용  

 

 


 

span 태그 : 인라인요소를 묶을때 영역지정

 

 

기존 body, span에 이어 div h2태그에 새로운 컬러를 지정함 

기존 body, span태그 컬러지정은 유지됨

 

 

11행 

division태그이면서 box클래스명을 가진 h2 태그의 색상을 red로 설정 

맨앞의 body는 더 구체적으로 명시할 경우 사용함. 생략가능 

 

 

name이라는 클래스명을 가진 내용에 새로운 컬러를 지정함

기존 적용된 태그내역들 모두 유지 

 

 


 

css selector (css 식별자)

id : id 속성은 중복된 이름으로 작성하지 않는다. 

클래스의 경우 디자인을 위해 만들어졌기 때문에 겹쳐도 상관이 없지만 

id의 경우 나중에 서버로 데이터를 넘겨야하는 경우도 있기 때문에 중복될 경우 혼란을 야기할 수 있다. (샵으로 접근)

 

 

 


-정리-

 

1) 태그명을 통한 접근 

2) 클래스명을 통한 접근

3) 아이디값을 통한 접근 

띄어쓰기(계층구조)를 이용하여 좀 더 세밀한 css적용 가능 

 

class의 접근은 온점(.)id의 접근은 샵(#)

 

 

 

 

728x90
728x90

'HTML , CSS' 카테고리의 다른 글

[HTML/CSS] padding, margin, font  (1) 2023.10.01
[HTML/CSS] border  (0) 2023.10.01
[HTML/CSS] CSS 기본개념 정리  (1) 2023.10.01
[HTML/CSS] div태그  (0) 2023.10.01
[HTML/CSS] 리스트(ul, ol, dl)  (0) 2023.10.01