2024.04.12- css 4일차

css 우선순위 계산

1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선
3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용
4. 우선순위 계산
    - inline : 1000점
    - id : 100점
    - class, 속성 선택자 : 10점
    - element : 1점
5. !important를 적용하면 0순위

<head>

<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>

</head>

<body>

<div class="class-style">div 3번(class우선)</div>

<div>div 5번(같은 속성의 경우 나중에 적용한 것이 우선, 외부 스타일시트 적용)</div>

<ul>

</ul>

<div id="id-style2" class="class-style3">div 6번(important 때문에 우선시 된다 )</div>

</body>

</html>

css custom properties
css의 속성 값을 재사용하고 동적으로 변경할 수 있게 해주는 기능

정의
:root {
    --main-color: #ff0000;
    --font-size : 15px;

}

사용
.box{
    background-color : var(--main-color);
    font-size : var(--font-size);
}

<!DOCTYPE html>

<head>

<title>css변수</title>

<style>

:root{

--background-color:deepskyblue;

color: var(--text-color)

}

.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>

</ul>

</body>

</html>

764px 아래 부터는 다음과 같이 웹페이지가 바뀐다.

css 2d

transform
- 2차원 좌표에서 요소를 변형시키는 속성
    translate, rotate, scale, skew

벤더 프리픽스 (vender prefix)
- 주용 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사
- w3c css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임

    -webkit- : 크롬, 엣지를 위한 접두사
    -o- : 오페라를 위한 접두사
    -ms- : 익스플로러를 위한 접두사
    -moz- : 파이어폭스를 위한 접두사

- 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 함

<!DOCTYPE html>

<head>

<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: 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">original</p>

<p id="rotate">original</p>

<p id="scale">original</p>

<p id="skew">original</p>

<p id="gradient">original</p>

</body>

</html>

original 요소의 색깔이 pink에서 gray로 그라데이션 처럼 변하고 있다
transition
- 요소에 추가할 css 스타일 전환효과를 설정
- 추가할 전환효과나 지속시간도 설정
    property: 요소에 추가할 전환효과를 설정
    timing-function: 전환효과의 값을 설정
        linear: 처음부터 끝까지 일정한 속도
        ease : 전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝
    duration: 전환효과를 나타내는 시간을 설정
    delay : 설정한 시간만큼 대기하다 전환효과를 나타냄

<!DOCTYPE html>

<head>

<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 dotted gray;

border-radius: 50%;

}

</style>

</head>

<body>

<h2>transition1</h2>

</body>

</html>

각각의 박스에 커서를 올려놓으면 왼쪽은 점점 빨간색으로 변하고 두번째 박스는 점점 핑크색으로 점선은 회색으로 변하게 된다.

css animation
요소의 현재 스타일을 다른 스타일로 전환

@keyframe
시작: 0%, from
과정: 1%, 3%, 10%, ...
끝: 100%, to

animation-name : 애니메이션 이름을 설정
animation-full-mode : 애니메이션이 끝난 후 어떻게 처리할지 설정
    forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임으로 유지
animation-direction: 애니메이션의 진행 방향을 정하는 속성
    reverse: 반대 순서로 진행
    alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
animation-duration: 애니메이션이 일어나는 시간을 설정
animation-iteration-count : 애니메이션이 몇 번 반복할지 설정
    infinite: 무한반복
    숫자 : 숫자만큼 반복

<!DOCTYPE html>

<head>

<title>transition2</title>

<style>

h2 { text-align: center; }

#ex {

position: relative;

width: 800px;

height: 400px;

margin: 0 auto;

border: 5px solid black;

padding: 30px;

}

p {

text-align: center;

padding-top: 50px;

font-weight: bold;

}

.box {

font-size: 20px;

position: relative;

width: 140px;

height: 140px;

margin-bottom: 50px;

background-color: gold;

}

#ex:hover > .box {

transform: rotate(720deg);

margin-left: 650px;

}

#no-delay {

transition-duration: 3s;

}

#delay {

transition-delay: 1s;

transition-duration: 2s;

}

</style>

</head>

<body>

<h2>transition2</h2>

</div>

</div>

</body>

</html>

transition2안에 있는 박스들에 커서를 올려놓으면 굴러가면서 도착시간이 같아진다.

<!DOCTYPE html>

<head>

<title>애니메이션1</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 {

width: 200px;

background-color: gold;

opacity: 0.5;

transform: rotate(0deg);

}

to {

width: 400px;

background-color: pink;

opacity: 1;

transform: rotate(360deg);

}

</style>

</head>

<body>

<h2>애니메이션1</h2>

<h3>css3 animation</h3>

</div>

</body>

</html>

박스가 360도 돌아가면서 색깔이 바뀌고 투명도도 바뀌게 된다

kdt 국비과정

2024.04.12- css 4일차

티스토리툴바