Eunice

<!--

트랜지션과 애니메이션 다른점

트랜지션은 시작점과 끝점만 존재한다.

하지만 애니메이션은 시작점과 중간점, 끝점이 존재한다.

1.애니메이션 등록

@keyframe 애니메이션명 {

0% {스타일시트 적용}

50% {스타일시트 적용}

100% {스타일시트 적용}

}

2.애니메이션 적용

선택자 {animation:애니메이션명 진행시간 가속도 지연시간 반복횟수 방향지정;}

반복횟수:infinite(무한반복), 숫자(반복횟수를 숫자로 지정)

방향지정:normal(좌>우), alternate(좌>우>좌)

-->

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0; padding:0; box-sizing:border-box;}

div{ width: 250px; height: 250px; background: #000;

animation:ani 3s ease-in-out infinite alternate;

}

@keyframes ani{

0% {transform:translate(0,0) rotate(0deg);}

50% {

transform:translate(200px,0) rotate(90deg);

border-radius:50%;

}

100% { transform:translate(600px, 0) rotate(360deg);}

}

</style>

</head>

<body>

</body>

</html>

---------------------------

<!--

※ 스타일시트 속성

1.박스 속성

display 속성: 박스의 유형(none:박스제거, block, inline-block, inline, flex)을 변경하는 속성

width 속성: 박스의 너비값 지정(데스크탑:px, 모바일:% / 부모요소:px, 자식요소:%)

height 속성: 박스의 높이값 지정(풀스크린:vh/ px)

margin 속성: 박스 외부 여백 지정(박스를 움직여서 배치)

padding 속성: 박스 내부 여백 지정(웹 콘텐츠를 수직중앙정렬, 박스 크기 확장)

border 속성: 박스 테두리 지정

border-radius : 박스의 형태를 변경 (모서리를 둥글게 처리)

box-sizing 속성: 박스의 너비와 높이에 padding과 border의 포함여부를 지정

box-shadow 속성: 박스의 그림자 지정 (0 0 0 20px rgba(0,0,0,0.3))

justify-content 속성: 아이템의 수평정렬(space-between)

align-items 속성: 아이템의 수직 정렬(center)

2.위치 속성

position 속성: 박스의 배치를 좌표값으로 지정(relative: 좌표의 기준점을 변경, absolute: 박스를 절대좌표로 위치/박스를 겹침, fixed:박스를 고정)

left 속성

right 속성

top 속성

bottom 속성

3.글자 속성

font-family 속성

font-size 속성

color 속성

font-weight 속성

font-style 속성

text-align 속성

line-height 속성

text-decoration 속성

text-transform 속성

text-shadow 속성

letter-spacing 속성

word-spacing 속성

4.배경 속성

background 속성(배경색상 배경이미지 반복여부 위치)

background-attachment 속성: fixed(고정)

background-size 속성: cover(박스의 크기에 맞춘다)

-->

-----

<!--

디바이스(단말기)의 크기에 따라 최적화된 화면을 제공한다.

모바일 단말기의 웹부라우저 해상도(385px, 420px, 768px, 1024px)에 맞춰라.

-->

<!DOCTYPE html>

<head>

<title>애니메이션실습문제</title>

<style>

*{margin: 0; padding: 0; box-sizing: border-box;}

header {

display: flex;

justify-content: space-between;

align-items: center;

height: 70px; padding: 0 50px; background: #000;

}

h1 a{ color:#fff; text-decoration: none; }

h1 a:hover{

animation:ani 1s infinite;

cursor: pointer;

}

@keyframes ani {

0% {color: red;}

25% {color: purple;}

50% {color: blue;}

75% {color: green;}

100% {color: brown;}

}

ul { list-style: none;

display: flex;

}

ul li a {

display:block; height: 40px; margin:0 10px; padding: 8px 30px;

text-decoration: none;

border: 1px solid transparent;

color: #fff;

transition: linear 0.15s; }

li a:hover{

border: 1px solid #fff;

border-radius: 25px;

background: linear-gradient(to bottom, rgb(201, 231, 255) 0%, rgb(78, 160, 214) 50%, rgb(84, 104, 219) 51%, rgb(136, 183, 255) 100%);

color: #000;

text-shadow: 0 1px 1px #fff;;

}

</style>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(13) (0)	2021.07.27
CSS 선수학습(12) (0)	2021.07.27
CSS 선수학습(10) (0)	2021.07.21
CSS 선수학습(9) (0)	2021.07.21
CSS 복습/실습 (0)	2021.07.20

<!--

트랜지션(전환)은 사용자의 이벤트(클릭, 더블클릭, 드래그, 스크롤 등)가 없는 처음(시작)상태와 사용자의 이벤트가 있는 나중(끝)상태 사이의 모습을 자동으로 생성해준다.

transition-property: 트랜지션을 적용할 속성을 지정(all, width, height 등)

transition-duration: 진행 시간(ex> 0.4s)

transition-timing-function: 움직이는 시작과 끝의 속도를 지정(가속도)

transition-delay: 대기 시간

transition:property duration timing-function delay;

-->

<!DOCTYPE html>

<head>

<title>Transition</title>

<style>

/*박스의 처음 상태*/

div { width:300px; height:100px; margin:10px; background:#fc0; }

.box1 { transition:width 0.4s ease-in;}

.box2 { transition:width 0.4s ease-in 0.8s;}

.box3 { transition:height 0.4s ease-in;}

/*박스의 나중 상태*/

.box1:hover { width:1000px;}

.box2:hover { width:500px;}

.box3:hover { height:500px;}

h2{ margin-top:100px; text-transform:uppercase; text-align:center;}

.demo {

position: relative;

width: 700px; height: 500px; margin:30px auto;

background: #e8e8e8 ;border-right: 5px solid #900;

}

.demo div {

position: absolute; left: 0; width: 70px; height: 70px;

text-align: center; line-height: 70px;

border: 5px solid #00c; border-radius:50%;

}

.linear { top:0; transition:all 2s linear;}

.ease { top:100px; transition:all 2s ease 0.5s;}

.ease-in { top: 200px; transition:all 2s ease-in 1s;}

.ease-out { top: 300px; transition:all 2s ease-out 1.5s;}

.ease-in-out { top: 400px; transition:all 2s ease-in-out 2s;}

.demo:hover div { left:625px; transform:rotate(1080deg);}

</style>

</head>

<body>

<h2>transition-timing-function</h2>

<div class="linear">linear</div>

<div class="ease-in">easein</div>

<div class="ease-out">easeout</div>

<div class="ease-in-out">easeinout</div>

</div>

</body>

</html>

----------------------------

<!--

트랜스폼 2D 함수: translate( ), translateX( ), translateY( ), rotate( ), skew( ), scale( )

-->

<!DOCTYPE html>

<head>

<title>2D Transform</title>

<style>

*{margin:0; padding:0; box-sizing: border-box;}

.container {

position: relative;

width: 1000px; height:1000px; margin:0 auto;background:#f4f4f4;

}

.container div {

position: absolute;

width:200px; height:200px; margin:50px 0;

font-size:32px; color:#fff; text-align:center; line-height:200px;

background:#06f;

transition:all 0.4s ease-in;

}

.container:hover div:nth-child(1) { transform:translateX(800px);}

.container:hover div:nth-child(3) { transform:translateY(800px);}

.container:hover div:nth-child(2) { transform:translate(800px, 800px);}

.demo {

position: relative;

width: 1000px; height:1000px; margin:50px auto;background:#f4f4f4;

}

.demo div {

position: absolute;

width:200px; height:200px; margin:50px 0;

font-size:32px; color:#fff; text-align:center; line-height:200px;

background:#fc0;

transition:all 0.4s ease-in;

}

.demo div:nth-child(1) { top: 0; }

.demo div:nth-child(2) { top: 250px; }

.demo div:nth-child(3) { top: 500px; }

.demo:hover div:nth-child(1) { background:#06f; transform:translate(500px, 300px) scale(2.5) rotate(1080deg) skew(45deg, 0);}

.demo:hover div:nth-child(2) { transform:rotate(720deg);}

.demo:hover div:nth-child(3) { transform:skew(0, -30deg);}

button {

width: 120px; height: 40px;

font-size: 18px; text-align: center; line-height: 40px;

background: #888; border-radius: 20px; border: none;

}

.box { width: 300px; height: 300px; background: #030; transition:all 0.4s ease-in;}

.active { transform:scale(2) rotate(40deg) translate(200px, 100px); }

</style>

$(document).ready(function(e) {

$('button').click(function( ) {

$('.box').addClass('active'); //클래스명을 추가하는 메서드

});

$('button').mouseover(function( ) {

$('.box').removeClass('active'); //클래스명을 삭제하는 메서드

});

//

혹은

$(document).ready(function(e) {

$('button').click(function( ) {

$('.box').toggleClass('active'); //클래스명 추가와 제거를 반복하는 메서드

});

//

</script>

</head>

<body>

<div>translateX( )</div>

<div>translate( )</div>

<div>translateY( )</div>

</div>

<div>scale( )</div>

<div>rotate( )</div>

</div>

</body>

</html>

-------------------------------

<!--

트랜스폼 3D 함수: translate3d(x,y,z), translateZ(z), rotate3d(x, y, z, deg)

perspective() : 원근감을 지정(:부모요소에 작성하면 자식요소에 적용, 손자 요소에는 적용 안 됨. > 자식요소에 transform-style:preserve-3d 를 작성하면 손자 요소에도 적용된다.)

-->

<!DOCTYPE html>

<html>

<head>

<title>3D transform</title>

<style>

* {margin:0; padding:0;}

.clear { clear:both; }

ul {width:1000px; margin:50px auto; perspective:700px;}

ul li {

list-style:none; float:left;

width:280px; height:280px; margin:20px;

font-size:24px; color:#fff; text-align:center; line-height:300px;

background:#36f; opacity:0.4;/*60% 투명*/

border:5px solid #a6f;

transition:all 0.4s ease-in;

}

ul li:nth-child(1):hover {transform: rotate3d(1,0,0,-360deg);}

ul li:nth-child(2):hover {transform: rotate3d(0,1,0,-360deg) scale(2);}

ul li:nth-child(3):hover {transform: translateZ(-500px);}

</style>

</head>

<body>

<ul>

<li>rotate3d(x)</li>

<li>rotate3d(y)</li>

<li>rotate3d(z)</li>

</ul>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(12) (0)	2021.07.27
CSS 선수학습(11) (0)	2021.07.26
CSS 선수학습(9) (0)	2021.07.21
CSS 복습/실습 (0)	2021.07.20
CSS 선수학습(8) (0)	2021.07.19

<!--

※ FlexBox

1. 부모 요소인 container와 자식 요소인 items가 반드시 필요하다.

</div>

2. 부모 요소인 container에 사용하는 스타일 속성

- display:flex; 플렉스 박스임을 지정

> 아이템 박스들이 좌에서 우로 배치된다.

- justify-content:space-between; 아이템의 수평 정렬을 지정

> flex-start: 왼쪽 정렬

> flex-end: 오른쪽 정렬

> center: 중앙 정렬

> space-between: 양끝 정렬

> space-around: 양끝 정렬(좌우에 여백 생성)

> space-evenly: 양끝 정렬(아이템 주변에 균등한 여백을 생성)

- align-items:center; 아이템의 수직 정렬

- flex-direction:column; 아이템을 줄바꿈 한다.

3. 자식 요소인 item에 사용하는 스타일 속성

-order:숫자; 숫자가 양수이면 오른쪽으로 배치, 음수이면 왼쪽으로 배치됨.

-->

<!DOCTYPE html>

<head>

<style>

* { margin:0; padding:0; box-sizing:border-box; }

.box {

width: 1100px; margin: 30px auto; padding:20px;

box-shadow: 0 0 25px #666 ;

}

.container {

display: flex;

justify-content: space-around;

align-items: center;

padding: 10px 0;

border-bottom: 1px solid #999;

}

.container img {width: 20%;}

.container p {width: 75%;}

p.second { order:-1;}

.bn { border: none;}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </p>

</div>

<p class="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </p>

</div>

<p class="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </p>

</div>

</body>

</html>

--------------실습문제 선생님풀이

<!doctype html>

<html>

<head>

<style>

* { margin:0; padding:0; box-sizing:border-box; }

.clear { clear:both; }

header {

display:flex;

justify-content:space-between;

align-items:center;

height:70px; padding:0 50px; background:#06f;

}

h1 { color:#fff; }

ul li { float:left; list-style:none; }

ul li a {

padding:5px 30px;

color:#fff; text-decoration:none; text-transform:uppercase;

}

ul li a:hover { color:#36f; background:#fc0; border-radius:5px; }

section { width:1300px; margin:0 auto; }

article {

float:left; width:80%; padding:30px;

border-right:1px solid #666;

}

article figure { float:right; width:50%; padding:20px 50px; }

article figure img {

width:100%; border:3px solid #fff;

box-shadow:0 0 10px #666;

}

article figure figcaption { padding-top:15px; text-align:center; }

article p { padding-top:20px; }

aside { float:right; width:20%; padding:30px; }

aside ul { margin-top:30px; }

aside ul li a { display:block; margin:5px 0; color:#333; }

footer {

height:200px;

border-top:1px solid #666;

}

</style>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

</figure>

<p>

정당은 법률이 정하는 바에 의하여 국가의 보호를 받으며, 국가는 법률이 정하는 바에 의하여 정당운영에 필요한 자금을 보조할 수 있다. 국회는 상호원조 또는 안전보장에 관한 조약, 중요한 국제조직에 관한 조약, 우호통상항해조약, 주권의 제약에 관한 조약, 강화조약, 국가나 국민에게 중대한 재정적 부담을 지우는 조약 또는 입법사항에 관한 조약의 체결·비준에 대한 동의권을 가진다.

국회는 국민의 보통·평등·직접·비밀선거에 의하여 선출된 국회의원으로 구성한다. 근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다.

</p>

<p>

정당은 법률이 정하는 바에 의하여 국가의 보호를 받으며, 국가는 법률이 정하는 바에 의하여 정당운영에 필요한 자금을 보조할 수 있다. 국회는 상호원조 또는 안전보장에 관한 조약, 중요한 국제조직에 관한 조약, 우호통상항해조약, 주권의 제약에 관한 조약, 강화조약, 국가나 국민에게 중대한 재정적 부담을 지우는 조약 또는 입법사항에 관한 조약의 체결·비준에 대한 동의권을 가진다.

국회는 국민의 보통·평등·직접·비밀선거에 의하여 선출된 국회의원으로 구성한다. 근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다.

</p>

<p>

정당은 법률이 정하는 바에 의하여 국가의 보호를 받으며, 국가는 법률이 정하는 바에 의하여 정당운영에 필요한 자금을 보조할 수 있다. 국회는 상호원조 또는 안전보장에 관한 조약, 중요한 국제조직에 관한 조약, 우호통상항해조약, 주권의 제약에 관한 조약, 강화조약, 국가나 국민에게 중대한 재정적 부담을 지우는 조약 또는 입법사항에 관한 조약의 체결·비준에 대한 동의권을 가진다.

국회는 국민의 보통·평등·직접·비밀선거에 의하여 선출된 국회의원으로 구성한다. 근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다.

</p>

</article>

<aside>

<ul>

</ul>

</aside>

</section>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(11) (0)	2021.07.26
CSS 선수학습(10) (0)	2021.07.21
CSS 복습/실습 (0)	2021.07.20
CSS 선수학습(8) (0)	2021.07.19
CSS 선수학습(7) (0)	2021.07.16

Eunice

CSS 선수학습(11)

'Coding' 카테고리의 다른 글

CSS 선수학습(10)

'Coding' 카테고리의 다른 글

CSS 선수학습(9)

'Coding' 카테고리의 다른 글

+ Recent posts

티스토리툴바