CSS - 상 -

박스모델

콘텐츠 및 크기

 박스는 dispaly 값, 설정된 치수 및 박스 안에 있는 내용에 따라 다르게 동작함

콘텐츠는 부모콘텐츠의 크기 제어 가능

 

오버플로

콘텐츠가 박스에 비해 너무 큰 것 

overflow속성을 사용하여 요소가 오버플로 콘텐츠를 처리하는 방법을 관리할 수 있음

 

Selector

선언은 선택자와 일치하는 요소에 스타일을 적용하는 속성 및 값 쌍이다

CSS규칙은 원하는 만큼 선언과 선택기 가질 수 있음!

 

 

단순 선택기

 

범용 Selector : 페이지의 모든 html요소에 적용

{
color: pink;
}

 

유형 Selector

: 모든 섹션 요소에 적용

section {
  padding: 2em;
}

 

클래스 Selector, ID Selector

.my-class {
   color:red;
}

#my-c {
   color:blue;
}

. CSS에만 있는 것 기억, #문자를 사용하여 id선택

 

그룹화 Selector

strong,
em,
.my-class,
[lang] {
  color: red;
}

여러 선택기를 쉼포로 구분하여 그룹화 

 

The cascade 

등장의 위치와 순서 

- 동일한 특이성의 선택자를갖는 두가지 규칙이 있으면 마지막으로 선언된 것 적용 

 

중요성

가장 덜 중요한 것부터 작성했음

1. font-size , background 또는 color와 같은 일반 규칙 유형
2. animation 규칙 유형
3. !important 규칙 유형(원점과 동일한 순서를 따름)
4. transition 규칙 유형