오늘은 강력한 CSS 강의 3일차, 이제는 난이도가 조금 올라가면서 여러가지 활용성, 가독성 등이 좋아졌다.
캐스캐이딩, 배경, 색상, 단위를 배웠고 아래에 배운 내용에 대해 하나하나 나열해보겠다.
CSS 의 약자 - Cascading Style Sheet
Cascading(캐스케이딩)
-CSS에서의 Cascading은 브라우저에 어떤걸 먼저 그려줄 지 결정하는 우선순위 적용 원리
중요도
❗️ 중요도 우선순위 정리
1.인라인 스타일 CSS
2.style 요소 안에 있는 CSS
3.link로 연결한 CSS 파일
4.사용자 스타일 시트
5.브라우저 스타일 시트
구체성(명시도)
선택할 대상을 구체적으로 특정할수록 명시도가 높아집니다.부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자
선언순서
나중에 선언한 스타일이 우선 적용됩니다.
만일 명시도가 동일한 여러개의 선언이 중첩 되어 있을 경우 가장 나중에 선언한 스타일을 적용하게 됩니다.
배경
->요소의 배경을 지정하는 CSS 속성
-background-color
-background-image
-background-position
-background-repeat
-background-size
-background-attachment
->background 단축 속성
-object-fit
img 나 video 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정합니다.
/ 네개 중 하나를 선택해서 사용합니다. /
object-fit : cover / fill(기본값) / contain / none
-object-position
img 나 video 등 대체요소의 콘텐츠 정렬 방식을 지정합니다.
object-position : 100px 40px
색상
-색상을 표기할 수 있는 방법에는 3가지 방법이 있습니다.
- 색상 이름 표기법
//color: red- Hex 색상코드
//color: #94FB11- rgb 색상코드
//color : rgb(251,241,17)
//rgba(0, 0, 0, 0.5)- opacity - 불투명도
//opacity : 0.22
상대단위 - vw / vh
vw 와 vh 는 요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정합니다.
/ viewport가 1200(px)x920(px)인 경우 /
10vw => 1200x0.1 = 120px
50vh => 920x0.5 = 460px
100px => 1200x1 = 1200px
CSS에서 함수
->calc()
calc() 이라는 함수를 이용하면, 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용할 수 있습니다.
덧셈, 뺄셈 예시
.item1{
background: red;
width: calc(50px + 50px);
height: 50px;
}
.item2{
background: blue;
width: calc(100% - 120px);
height: 50px;
}
곱셈, 나눗셈 예시
.item3{
background: green;
width: calc(2*100px);
height: 50px;
}
.item4{
background: orange;
width: calc(100%/4);
height: 50px;
}
3일차가 지나면서 한주의 마지막 날 금요일이다.
이것저것 배우고 적용하면서 연습하고있다. 꾸준히 함과 스스로 함을 적용해야 이것들을 나만의 것으로 만들 수 있다.
한주간 푹 쉬고 필요한 부분 복습하고 다음주 월요일에 돌아오겠다.
-CSS 3일차 끝-
