CSS 우선순위
- 동일한 속성을 적용할 경우 나중에 적용한 것이 우선된다.
- 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선된다.
- 내부, 외부, 인라인 스타일 시트 중 인라인을 우선 적용한다.
-!important를 적용하면 가장 우선 적용된다.
- 우선순위 계산
- inline: 1000점
- id: 100점
- class, 속성 선택자: 10점
- element: 1점
CSS 파일 코드
div {
background-color: whitesmoke;
}
HTML 파일 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 우선순위</title>
<style>
#id-style { background-color: deeppink; }
#id-style2 { background-color: deepskyblue; }
div {
display: block;
padding: 30px;
margin: 30px;
background-color: gold;
}
.class-style3 {
background-color: beige !important;
}
.class-style {
background-color: greenyellow;
}
.class-style2 {
background-color: pink;
font-size: 25px;
}
ul > li.li-class {
background-color: orange;
}
ul > li {
background-color: violet;
}
</style>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2>CSS 우선순위</h2>
<div style="background-color: aqua;">div 1번</div>
<div id="id-style" class="class-style">div 2번</div>
<div class="class-style">div 3번</div>
<div class="class-style2 class-style">div 4번</div>
<div>div 5번</div>
<ul>
<li class="li-class">li 1번</li>
</ul>
<div id="id-style2" class="class-style3">div 6번</div>
</body>
</html>
div 1번은 인라인 스타일을 가장 우선적으로 적용하기 때문에 aqua 색상이 나타난다.
div 2번은 div(요소), class 보다 id 가 우선이기 때문에 deeppink 색상이 나타난다.
div 3번은 div(요소)보다 class가 우선이기 때문에 greenyellow 색상이 나타난다.
div 4번은 같은 class(선택자)일 때 나중에 적용한 것이 우선이기 때문에 class-style보다 class-style2가 우선이 되어 pink 색상이 나타난다.
div 5번은 같은 속성인 경우 나중에 적용한 것이 우선이기 때문에 내부 스타일보다 외부 스타일로 적용을 나중에 했기 때문에 whitesmoke 색상이 나타난다.
li 1번은 요소를 계산하면 같은 값이지만 class가 붙어있는 내부 스타일이 있어 더 많은 점수를 얻기 때문에 orange 색상이 나타난다.
div 6번은 다른 조건을 무시하고 !important가 붙어있기 때문에 무조건적으로 우선시 되어 beige 색상이 나타난다.
CSS Custom properties(css 변수)
- CSS의 속성 값을 재사용하고 동적으로 변경할 수 있게 해주는 기능이다.
# 사용 방법 예시
정의
:root {
--main-color(<-- 내가 정하는 변수이름): #FF0000;
--font-size(<-- 내가 정하는 변수이름): 15px
}
사용
.box {
background-color: var(--main-color);
font-size: var(--font-size);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 변수</title>
<style>
:root {
--background-color: deepskyblue;
--text-color: white;
}
.first-list {
background-color: var(--background-color);
color: var(--text-color);
}
.second-list {
background-color: var(--background-color);
color: var(--text-color);
}
@media screen and (max-width: 768px) {
:root {
--background-color: darkslateblue;
--text-color: ivory;
}
}
</style>
</head>
<body>
<h2>css 변수</h2>
<ul class="first-list">
<li>1</li>
<li>2</li>
</ul>
<ul class="second-list">
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
media를 이용하여 화면의 크기에 따라 색상을 변하게 해주고 변수를 사용하여 색상을 적용한 결과이다.
CSS 2D
- transform
- 2차원 좌표에서 요소를 변형시키는 속성이다. (translate, rotate, scale, skew)
# 사용 방법
요소(or 선택자) {
transform: 속성(값);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
p {
width: 600px;
padding: 20px;
border: 3px solid rgba(0, 0, 0, 0.5);
}
#translate {
transform: translate(30px, 50px);
background-color: deeppink;
}
#rotate {
transform: rotate(60deg);
background-color: gold;
}
#scale {
transform: scale(1.5, 1.2);
background-color: orange;
}
#skew {
transform: skew(30deg, 15deg); /* x 축의 기울기 각도, y 축의 기울기 각도 */
background-color: yellowgreen;
}
#gradient {
background-color: pink;
/* 크롬, 엣지를 위한 코드 */
background: -webkit-linear-gradient(left, pink, gray);
/* 오페라를 위한 코드 */
background: -o-linear-gradient(left, pink, gray);
/* 익스플로러를 위한 코드 */
background: -ms-linear-gradient(left, pink, gray);
/* 파이어폭스를 위한 코드 */
background: -moz-linear-gradient(left, pink, gray);
/* CSS 표준 문법 코드 */
background: linear-gradient(left, pink, gray);
}
</style>
</head>
<body>
<h2>transform</h2>
<p>original</p>
<p id="translate">translate</p>
<p id="rotate">rotate</p>
<p id="scale">scale</p>
<p id="skew">skew</p>
<p id="gradient">gradient</p>
</body>
</html>
translate는 설정값만큼 이동시키는 속성이다.
rotate는 설정값만큼 회전시키는 속성이다.
scale은 설정값만큼 늘리거나 줄이는 속성이다.
skew는 설정값만큼 왜곡시키는 속성이다. x,y값을 설정해서 기울기 각도를 준다.
- transition
- 요소에 추가할 css 스타일 전환효과를 설정한다.
- 추가할 전환효과나 지속시간도 설정할 수 있다.
property: 요소에 추가할 전환효고를 설정
timing-function: 전환효과의 값을 설정
linear: 처음부터 끝까지 일정한 속도
ease: 전환효과가 천천히 > 빨라지고 > 천천히 > 끝
duration: 전환효과를 나타내는 시간을 설정
delay: 설정한 시간만큼 대기하다 전환효과를 나타냄
# 사용 방법
요소(or 선택자) {
css 코드
transition: 속성값;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition1</title>
<style>
div {
width: 100px;
height: 100px;
float: left;
margin: 30px;
}
#bg-tr {
background-color: gold;
transition: background-color ease 2s;
}
#bg-tr:hover {
background-color: red;
}
#border-tr {
background-color: deeppink;
border: 3px dotted black;
transition: all linear 2s;
}
#border-tr:hover {
background-color: pink;
border: 3px solid gray;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>transition1</h2>
<div id="bg-tr"></div>
<div id="border-tr"></div>
</body>
</html>
CSS Animation
- 요소의 현재 스타일을 다른 스타일로 변환한다.
- animation-name: 애니메이션 이름을 설정
- animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
forwards: 애니메이션 카프레임이 완료되었을 때 마지막 프레임으로 유지
- animation-direction: 애니메이션의 진행 방향을 정하는 속성
reverse: 반대 순서로 진행
alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행
- animation-duration: 애니메이션이 일어나는 시간을 설정
- animation-iteration-count: 애니메이션이 몇 번 반복할지 설정
infinite: 무한 반복
숫자: 숫자만큼 반복
# 사용 방법
@keyframe 이름 {
from {
css 코드
}
to {
css 코드
}
}
# 참고
시작: 0%, from
과정1: 1%, 3%, 10% ..
끝: 100%, to<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation1</title>
<style>
.box {
margin-top: 100px;
margin-left: 100px;
padding: 20px;
height: 60px;
animation-name: moving;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes moving {
from {
size: 200px;
background-color: gold;
opacity: 0.5;
transform: rotate(0deg);
}
to {
width: 400px;
background-color: skyblue;
opacity: 1;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>animation1</h2>
<div class="box">
<h3>CSS3 Animation</h3>
</div>
</body>
</html>
'Web > css' 카테고리의 다른 글
| 레이아웃, 플렉스(flex) 레이아웃, 미디어 쿼리(media query) (0) | 2024.04.12 |
|---|---|
| CSS 배경, 디스플레이, 폼, 위치 (0) | 2024.04.10 |
| CSS(Cascading Style Sheets) (1) | 2024.04.10 |
