- 14일차 프론트엔드 공부 -
케스케이딩 (Cascading)
수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리
1.중요도
CSS가 선언된 위치에 따라 우선순위가 결정된다.
브라우저 스타일 시트 < 사용자 스타일 시트 < 개발자 스타일 시트
브라우저 스타일 시트
사용자 스타일 시트
-사용자 폰트 지정
- 고대비 모드 사용
- 사용자가 본인의 취향, 편의를 위해 사용하는 것
개발자 스타일 시트
- 개발자가 만들어 놓은 선언
개발자 스타일 시트
<link>로 연결한 css 파일 < <style> 요소 안에 있는 css < 인라인 스타일 css
중요도 정리
- 인라인 스타일 css
- <style> 요소 안에 있는 css
- <link>로 연결한 css 파일
- 사용자 스타일 시트
- 브라우저 스타일 시트
2.구체성(명시도)
선택할 대상을 구체적으로 특정할수록 명시도가 높아진다. 명시도가 높아지면 우선순위도 함께 높아진다.
부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자
강제로 명시도 끌어올리기
!important
3. 선언 순서
나중에 선언한 스타일이 우선 적용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="text_class" id="text_id">
캐스케이딩 입니다.
</div>
</body>
</html>* {
background-color: aqua;
}
div {
background-color: blue;
}
.text_class {
background-color: yellow;
}
#text_id {
background-color: orange;
}
배경
background-color
요소의 배경에 색상을 지정한다.
background-image
요소의 배경 이미지를 한 개, 혹은 여러 개 지정한다.
background-image: url(“이미지 경로”)
그라데이션도 지정이 가능하다.
background-image: linear-gradient(to top, red, blue);
linear-gradient(방향, 시작 색상, 종료 색상);
background-position
요소의 배경 이미지의 위치를 지정한다.
background-position: top right
background-repeat
요소의 배경 이미지의 반복 여부, 반복 방향을 지정한다.
background-repeat: repeat(기본값)
background-repeat: no-repeat;
background-size
요소의 배경 이미지의 크기를 지정한다.
background-size: cover; 이미지를 최대한 늘려서 빈틈이 없도록 한다.
background-size: contain; 이미지의 전체가 보이는 전제로 사이즈를 최대한 키운다.
background-size: 200px 150px
background-attachment
요소의 배경 이미지의 스크롤 여부를 지정한다.
background-attachment: scroll; (기본값) 내부의 스크롤로는 이미지가 바뀌지 않음
background-attachment: fixed; 배경을 고정시킨다. 스크롤 해도 이미지가 바뀌지 않음
background-attachment: local; 내부의 스크롤로는 이미지가 바뀜
background 단축속성
background-color / background-image / background-image / background-position / background-repeat / background-size
위 항목 지정 가능
background: color image repeat position/ size attachment
ex)
background: red url(“../image.png”) no-repeat center/ cover fixed
object-fit
<img>나 <video> 등 대체요소의 내용이 지정된 너비와 높이에 맞춰지는 방식을 지정한다.
object-fit: fit:(기본값) 이미지의 가로와 세로값을 최대로 키운다; `
object-fit: cover; 이미지의 가로와 세로 비율을 유지한 체 최대한 키운다.
object-fit: contain; 여백 상관없이 이미지가 깔끔하게 보이도록 키운다
object-fit: none; 이미지의 원본 사이즈를 보여준다.
object-position
<img>나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정한다.
object-position:center-top;
색상
색상 표기법
- 색상 이름
- Hex 색상 코드
- rgb / rgba
색상 이름을 표기하는 방식
color: red;
Hex 색상 코드
16진수 여섯자리로 색상을 표기하는 방법
color: #94FB11
실무에서 가장 많이 사용하는 방법
rgb 색상코드
rgb(red, green, blue) 값을 이용해 색상을 표시하는 방법
color: rgb(251, 247, 17);
rgba를 이용하면 색상에 투명도를 적용할 수 있다.
opacity
요소의 투명도를 설정한다
0부터 1까지의 숫자를 지정할 수 있다.
단위
상대 단위
vw / vh
요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정한다.
viewport란
브라우저 안에서 화면이 그려지는 영역
viewport가 1200(px) x 920(px)인 경우
10vw =1200 x 0.1 = 120px
50vh = 920 x 0.5 = 460px
'프론트엔드 공부 > CSS 기초' 카테고리의 다른 글
| 16일차 프론트엔드 공부 - transform (0) | 2024.09.21 |
|---|---|
| 15일차 프론트엔드 공부 - 함수, position, transition (0) | 2024.09.19 |
| 13일차 프론트엔드 공부 - 폰트, 단위 (1) | 2024.09.11 |
| 12일차 프론트엔드 공부 - Float, Flex (0) | 2024.09.10 |
| 11일차 프론트엔드 공부 - Float, Flex (0) | 2024.09.09 |