[css] class, id, 선택자/ <class>, <id>, 부모-자식구조란

dazzle·2023년 1월 5일
0

frontend

목록 보기
5/14

[css]

< class > 란,

그룹으로 묶어서 스타일을 지정할 때 사용하는 코드
css 표기법 => .이름

< id > 란,

한가지만 정해서 사용할 때 쓰는 코드 / 문서에 고유한 id는 하나만 쓸 수 있음
css 표기법 => #이름

class와 id 모두 이름은 자유롭게 지으면 상관없지만 숫자로는 시작하면 안됨!

<부모자식구조> 란,

상위에 하위요소를 감싸고 있는 요소를 부모,
하위에 있는 요소를 자식이라고 한다.

*부모의 요소에 대한 코드 등이 바뀌면 자식들에게도 영향이 간다.
부모와 자식간의 요소를 이어주어 적용을 시키려면 각 코드의 이름을 부여시켜줘야한다.

class="title"이 부모일 때, class="sub"가 자녀이다.
class="subsub"이 부모일 때, class="li"가 자녀이다.

css를 보면 .subsub p {} 로 잡을 경우 p태그 안에 있는 당근과 양파가 모두 빨간색으로 변하는 것을 볼 수 있다.
반면 p태그에 class를 주어 .subsub .li2 {} 로 잡을 경우 자식 모두가 아닌 이름을 준 자식만 색이 바뀌는 것을 볼 수가 있다.




처음엔 단어자체가 너무 어려워 이해하기 쉽지않지만, 직접 코드를 쳐보며 경험해보면 금방 속성을 이해할 수 있게된다!! =3=3

0개의 댓글