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의 접근은 샵(#)
'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 |