[6주차 2일] CSS

티스토리 뷰

코딩/HTML&CSS

[6주차 2일] CSS

ehzim 2023. 11. 14. 09:28

- 가시성 속성

어떤 요소를 보이게 하거나 반대로 보이지 않게 할 때 사용한다.

ex ) visibility : hidden; (자리를 차지함)

- 디스플레이 속성

가시성 속성과 반대로 요소가 차지하는 공간도 사라진다.

ex ) display : none; (존재자체가 없음)

display

- none : 사라진다.

- inline : 가로배치 (width , height X)

- blcok : 세로 배치 (width, height O)

- inline-block : 가로배치 + width , height (가로배치+크기조절)

- 블록 형식

다음 요소가 항상 새로운 행에서 시작되며 화면의 최대 너비만큼 차지한다.

- 인라인 형식

다음 요소가 이전 요소 바로 뒤에 배치되며 최소한의 너비만 가진다.

예제 8-5

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="display1.css"></link>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>[인라인 형식]</h3>
    <p>세계적인 IT기업에는 <strong>Google</strong><Strong>Apple</Strong><strong>Oracle</strong>등이 있습니다.</p>
    <h3>[블록 형식으로 변환한 후]</h3>
    <p class="bk">세계적인 IT기업에는 <strong>Google</strong><Strong>Apple</Strong><strong>Oracle</strong>등이 있습니다.</p>
    
</body>
</html>

CSS

p strong{
    color: blue;
    border: 1px dotted red;
}
p.bk strong{
    display: block;
    color:blue;
    border: 1px dotted red;
}

결과

예제 8-6

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="display2.css"></link>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>[블록 형식]</h4>
    <ul>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.apple.com">Apple</a></li>
        <li><a href="http://www.oracle.com">Oracle</a></li>
    </ul>
    <h4>[인라인 형식으로 변환한 후]</h4>
    <ul class="in">
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.apple.com">Apple</a></li>
        <li><a href="http://www.oracle.com">Oracle</a></li>
    </ul>
</body>
</html>

CSS

ul.in li{
    display: inline;
    background-color: yellow;
    border: 1px solid;
    border-color: blue;
    margin: 3px;
    padding: 5px;

}

결과

2차원 변환 함수의 종류

함수	설명	사용 예
translate()	평행 이동 변환	transform:translate(50px, 100px);
rotate()	회전 변환	transform:rotate(20deg);
scale()	크기 변환	transform:scale(2,3);
skewX()	X축 기울기 변환	transform:skewX(20deeg);
skewY()	Y축 기울기 변환	transform:skewY(20deg);
skew()	X,Y축 기울기 변환	transform:skew(20deg,10deg);
matrix()	2차원 행렬 구조 변환	transform:matrix(1,-0.3,0,1,0,0);

예제 8-9

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="translate.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">박스 1</div>
    <div id="box2">박스 2</div>
</body>
</html>

CSS

div{
    width:200px;
    height: 100px;
    border:1px dotted black;
    background-color: yellow;
    transition: all 0.8s
}
div#box2:hover{
    transform:translate(100px, 50px);
}

결과

예제 8-10

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="rotate.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>기본 박스 (0deg)</div>
    <div id="box1">박스 1 (45deg)</div>
    <div id="box2">박스 2 (-90deg)</div>
</body>
</html>

CSS

div{
    width: 100px;
    height: 100px;
    border: 1px dotted black;
    background-color: lightgreen;
    margin: 30px;
}div#box1:hover
{
    transform: rotate(45deg);
    transition: all 1.5s;
}
div#box2:hover{
    transform: rotate(-90deg);
    transition: all 0.8s;
}

결과

예제 8-11

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="scale.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>기본 박스 (0deg)</div>
    <div id="box1">박스 1 (0.5배 축소)</div>
    <div id="box2">박스 2 (가로 2배, 세로 1.5배 확대)</div>
</body>
</html>

CSS

div{
    width: 100px;
    height: 100px;
    border: 1px dotted black;
    background-color: skyblue;
    margin: 50px;

}
div#box1:hover{
    transform: scale(0.5, 0.5);
    transition: all 1.5s;
    text-align: center;
    
}
div#box2:hover{
    transform: scale(2, 1.5);
    transition: all 2.0s;
}

결과

예제 8-12

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="skew.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>기본 박스</div>
    <div id="box1">박스 1</div>
    <div id="box2">박스 2</div>
    <div id="box3">박스 3</div>
</body>
</html>

CSS

div{
    width: 100px;
    height: 100px;
    border: 1px dotted black;
    background-color: lightgreen;
    margin: 50px;
}
div#box1{
    transform:skewX(50deg);
}
div#box2{
    transform:skewY(-30deg);
}
div#box3{
    transform:skew(20deg, 10deg);
}

결과

예제 8-14

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="compound.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>기본 박스</div>
    <div id="box1">박스 1</div>
    <div id="box2">박스 2</div>
</body>
</html>

CSS

div{
    width: 50px;
    height: 50px;
    background-color: silver;
    border: 1px solid black;
    text-align: center;
}
div#box1{
    transform: rotate(45deg) scale(1.5) skew(30deg) translate(50px);
}
div#box2{
    transform: translate(200px) rotate(-90deg) scale(2);
}

결과

예제 8-15

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="apply.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="c1">박스 안에 마우스를 올리면 무엇이 보일까요?</div>
    </div>
</body>
</html>

CSS

div{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-color: yellow;
}
.c1:hover{
    transform-origin: 50% 50% 0px;
    transform: translate(0px, 0px) rotate(-45deg) scale(0.7);
    background: green;
    transition: all 2s;
}

결과

3차원 변환 함수의 종류

함수	설명	사용 예
perspective(depth)	3차원 관점 변환	transform:perspective(100px);
translate3d(x,y,z)	3차원 평행 이동 변환	transform:translate3d(50px,100px,150px);
translateX(x)	3차원 평행 이동 (x축)	transform:translateX(50px);
translateY(y)	3차원 평행 이동 (y축)	transform:translateY(50px);
translateZ(z)	3차원 평행 이동 (z축)	transform:translateZ(50px);
scale3d(x,y,z)	3차원 크기 변환	transform:scale3d(2,2,2);
scaleX(x)	3차원 크기 변환 (x축)	transform:scaleX(2);
scaleY(y)	3차원 크기 변환 (y축)	transform:scaleY(2);
scaleZ(z)	3차원 크기 변환 (z축)	transform:scaleZ(2);
rotate3d(x,y,z,angle)	3차원 회전 변환	transform:rotate3d(1,1,1,45deg);
rotateX(angle)	3차원 회전 변환 (x축)	transform:rotateX(30deg);
rotateY(y)	3차원 회전 변환 (y축)	transform:rotateY(30deg);
rotateZ(z)	3차원 회전 변환 (z축)	transform:rotateZ(30deg);

예제 8-16

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="16_3.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="transformed">박스1</div>
    </div>
    <p></p>
    <div class="container">
        <div class="transformed2">박스2</div>
    </div>
</body>
</html>

CSS

div{
    background-color: lightskyblue;
    height: 150px;
    width: 150px;
}
.container{
    background-color: lightgoldenrodyellow;
    border: 1px solid black;
}
.transformed:hover{
    backface-visibility: visible;
    transform-origin: 50% 42%;
    transform: perspective(500px) rotateY(50deg) rotate(0deg);
}
.transformed2:hover{
    backface-visibility: visible;
    transform-origin: 50% 42%;
    transform: perspective(500px) rotateY(0deg) rotate(45deg);
}

결과

예제 8-17

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="transition1.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>마우스를 올리면 박스가 늘어납니다.</div>
</body>
</html>

CSS

div{
    width: 100px;
    height: 100px;
    background: yellow;
    border: 1px solid red;
    transition: width 2s, height 5s;
}
div:hover{
    width: 300px;
    height: 200px;
}

결과

예제 8-18

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="transition2.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>마우스를 올리면 박스가 회전하면서 커집니다.</div>
</body>
</html>

CSS

div{
    margin: 50px;
    width: 100px;
    height: 100px;
    background: yellow;
    border: 1px solid red;
    transition: width 3s, height 3s, border 3s, transform 3s, background 3s;
}
div:hover{
    width:200px;
    height: 200px;
    border: 3px solid blue;
    background: green;
    transform: rotate(360deg);
}

결과

- 변화 속성

- transition-property : 변화 효과를 적용할 속성들 나열

- transition-duration : 변화가 지속되는 시간 지정

- transition-timing-function : 변화의 시작과 끝 타이밍 지정

- transition-delay : 변화 효과가 지연되는 시간 지정

예제8-19

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="19_property.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>마우스를 올리면 여러 속성이 변합니다.</div>
</body>
</html>

CSS

div{
    width:100px;
    height:100px;
    background:orange;
    transition-property: width, background, color;
}
div:hover{
    width: 400px;
    background:blue;
    color:white;
}

결과

예제 8-20

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="tduration.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>색상이 10초 동안 서서히 변합니다.</div>
</body>
</html>

CSS

div{
    width: 280px;
    height: 100px;
    background:orange;
    transition: background;
    transition-duration: 10s;
}
div:hover{
    background:blue;
}

결과

- 속성값

- linear : 처음부터 끝까지 같은 속도

- ease : 느리게 싲가하여 점점 빨라져싿가 느리게 끝난다.

- ease-in : 느리게 시작하여 점점 빨라지다가 일정한 속도

- ease-out : 일정한 속도의 등속 변화로 시작해서 점점 느려지면서 끝난다.

- ease-in-out : 느리게 시작하여 느리게 끝난다.

- cubiv-bezier(n,n,n,n) : 처음과 끝의 속도를 설정한다.

예제 8-21

HTML

CSS

결과

- 키프레임 정의

- 애니메이션 종류

animation-none	@keyframes 애니메이션의 이름 지정
animation-duration	애니메이션의 지속 시간을 초 단위로 설정
animation-timing-function	애니메이션의 시작과 끝 타이밍 지정
animation-delay	애니메이션 시작을 지연시키는 시간을 초 단위로 설정
animation-iteration-count	애니메이션이 반복 재생되는 횟수를 설정
animation-direction	애니메이션의 방향을 설정
animation-fill-mode	애니메이션을 재생하고 있지 않을 때 속성 값을 설정
animation-play-state	애니메이션 재생 상태를 설정

예제 8-24

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="animation.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>애니메이션 박스</div>
    <p><strong>참고 : </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다.</p>
</body>
</html>

CSS

div{
    width: 100px;
    height: 100px;
    background:red;
    position:relative;
    animation: boxmove 5s linear alternate;
}
@keyframes boxmove{
    from{left: 0px;}
    to{left:300px;}
}

결과

예제 8-25

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="adelay.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <p><strong>참고 : </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다.</p>
</body>
</html>

CSS

div{
    width: 100px;
    height: 50px;
    background: red;
    position:relative;
    animation: boxmove 5s linear infinite alternate;
}
#box1{
    animation-delay: 3s;
}
#box2{
    animation-delay: 5s;
}
@keyframes boxmove{
    from{left: 0px;}
    to{left:300px}
}

결과

- animation-direction 속성값의 종류

속성값	설명
normal	기본 설정값이다. 애니메이션이 순방향으로 재생된다.
reverse	애니메이션이 역방향으로 재생된다.
alternate	애니메이션이 양방향으로 재생된다. 홀수 : 순방향으로 재생된다. 짝수 : 역방향으로 재생된다.
alternate-reverse	애니메이션이 양방향으로 재생된다. 홀수 : 역방향으로 재생된다. 짝수 : 순방향으로 재생된다.

예제 8-26

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="26_adirection.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <p><strong>참고 : </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다.</p>
</body>
</html>

CSS

div{
    width: 100px;
    height: 50px;
    background: red;
    position: relative;
    animation: boxmove 5s linear infinite;
}
#box1{
    animation-delay: 3s;
    animation-direction: reverse;
}
#box2{
    animation-delay: 5s;
    animation-direction: alternate-reverse;
}
@keyframes boxmove{
    from{left: 0px;}
    to{left:300px}
}

결과

예제 8-27

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="acount.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <p><strong>참고 : </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다.</p>
</body>
</html>

CSS

div{
    width: 100px;
    height: 50px;
    background: red;
    position: relative;
    animation: boxmove 5s;
}
#box1{
    animation-delay: 3s;
    animation-direction: reverse;
    animation-iteration-count: 2;
}
#box2{
    animation-delay: 5s;
    animation-direction: alternate-reverse;
    animation-iteration-count: 5;
}
@keyframes boxmove{
    from{left: 0px;}
    to{left:300px}
}

결과

예제 8-28

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="afunction.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <div id="box3">애니메이션 박스3</div>
    <p><strong>참고 : </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다.</p>
</body>
</html>

CSS

div{
    width: 100px;
    height: 50px;
    background: red;
    position: relative;
    animation: boxmove 5s alternate;
}
#box1{
    animation-delay: 1s;
    animation-iteration-count: 3;
    animation-timing-function: ease;
}
#box2{
    animation-delay: 2s;
    animation-iteration-count: 3;
    animation-timing-function: linear;
}
#box3{
    animation-delay: 3s;
    animation-iteration-count: 3;
    animation-timing-function: ease-out;
}
@keyframes boxmove{
    from{left: 0px;}
    to{left:300px}
}

결과

예제 8-29

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="29_astate.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <div id="box3">애니메이션 박스3</div>
    <p><strong>참고 : </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다.</p>
</body>
</html>

CSS

div{
    width: 100px;
    height: 50px;
    background: red;
    position: relative;
    animation: boxmove 5s infinite alternate;
}
#box1{
    animation-delay: 1s;
    animation-timing-function: ease;
}
#box2{
    animation-delay: 2s;
    animation-timing-function: linear;
}
#box3{
    animation-delay: 3s;
    animation-timing-function: ease-out;
}
@keyframes boxmove{
    from{left:0px;}
    to{left:300px;}
}
div:hover{
    animation-play-state: paused;
}

결과

예제 8-30

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="30_effect1.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">왼쪽 박스</div>
    <div id="div2">오른쪽 박스</div>
</body>
</html>

CSS

div{
    width:100px;
    height: 100px;
    position: absolute;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
#div1{
    background-color: blue;
    animation-direction: normal;
    animation-name: L-box;
}
#div2{
    background-color: yellow;
    animation-direction: reverse;
    animation-name: R-box;
}
@keyframes L-box{
    0%{left:0px;}
    50%{left:200px;}
    75%{left:0px;}
}
@keyframes R-box{
    0%{left:400px;}
    50%{left:200px;}
    75%{left:400px;}
}

결과

예제 8-31

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="31_effect2.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>

CSS

div{
    width: 100px;
    height: 100px;
    background: red;
    position:relative;
    animation: colorbox 5s infinite;
    animation-direction: alternate;
}
@keyframes colorbox{
    from{background:red; left:0px; top:0px;}
    25%{background:orange; left:300px; top:0px;}
    75%{background:yellow; left:300px; top:300px;}
    to{background:red; left:0px; top:0px;}
}

결과

예제 8-32

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="32_effect3.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>
    <div id="b4"></div>
    <div id="b5"></div>
</body>
</html>

CSS

@keyframes bounce{
    from, to{ bottom:0px;
    animation-timing-function:ease-out;
    }
    50%{
        bottom:200px;
        animation-timing-function: ease-in;
    }
}
div{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    animation-name: bounce;
    animation-iteration-count: infinite;
    
}
div:hover{
    animation-play-state: paused;
}

#b1{
    left:10px;
    background: red;
    animation-duration: 5s;
}
#b2{
    left:50px;
    background: blue;
    animation-duration: 10s;
}
#b3{
    left:90px;
    background: green;
    animation-duration: 8s;
}
#b4{
    left:130px;
    background: silver;
    animation-duration: 8s;
}
#b5{
    left:170px;
    background: black;
    animation-duration: 1s;
}

결과

저작자표시

'코딩 > HTML&CSS' 카테고리의 다른 글

[6주 3일차] HTML&CSS (0)	2023.11.15
[6주 2일차]HTML&CSS (0)	2023.11.14
[6주차 1일] CSS (1)	2023.11.13
[5주차 5일] CSS (0)	2023.11.10
[5주차 4일] CSS (0)	2023.11.09

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

zim's growth dairy

티스토리 뷰

[6주차 2일] CSS

- 가시성 속성

- 디스플레이 속성

display

- 블록 형식

- 인라인 형식

2차원 변환 함수의 종류

- 변화 속성

- 속성값

- animation-direction 속성값의 종류

'코딩 > HTML&CSS' 카테고리의 다른 글

티스토리툴바