HTML(13) - 변환효과/전환 속도 함수/줄간격/요소의 전환 효과/폰트/글꼴/그라디언트 효과/그라데이션
KCasey2020. 5. 20. 17:30
transform-2d.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변환효과</title>
<style type="text/css">
div {
width : 150px;
height : 80px;
border : 1px dotted black;
background-color : yellow;
}
div#box2 {
transform : translate(50px, 10px);
}
div#box3 {
margin : 100px;
transform : rotate(90deg);
}
div#box4 {
margin : 50px;
tranform : scale(0.5, 0.5);
}
div#box5 {
margin : 50px;
transform : skew(20deg, 10deg) rotate(45deg);
}
</style>
</head>
<body>
<!-- 변환 함수의 사용
평행 이동 변환 함수 : translate(위로 부터, 왼쪽으로 부터)
회전 변환 함수 : rotate(각도)
크기 변환 함수 : scale(x, y)
기울기 변환 함수 : skew(x각도,y각도)
-->
<div>1번 박스</div>
<div id=box2>2번 박스</div>
<div id=box3>3번 박스</div>
<div id=box4>4번 박스</div>
<div id=box5>5번 박스</div>
</body>
</html>
timing-function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전환 속도 함수</title>
<style type="text/css">
div {
width : 50px;
height : 50px;
background : red;
color : white;
/* 4가지 속성으로 설정.
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
*/
transition : width 2s, height 1s;
}
div:hover {
width : 300px;
}
#b1 {
transition-timing-function : linear;
}
#b2 {
transition-timing-function : ease;
}
#b3 {
transition-timing-function : ease-in;
}
#b4 {
transition-timing-function : ease-out;
}
#b5 {
transition-timing-function : ease-in-out;
}
</style>
</head>
<body>
<!-- transition-timing-function
1. linear : 선형(일정한 속도)
2. ease : 느리게 시작 -> 빠르게 전환 -> 느리게 종료
3. ease-in : 느리게 시작 -> 빠르게 전환
4. ease-out : 빠르게 전환 -> 느리게 종료
5. ease-in-out : 느리게 시작 -> 빠르게 전환 -> 느리게 종료
6. cubic-bezier : 변곡점을 지정.(베지어 곡선)
-->
<div id="b1">linear</div>
<div id="b2">ease</div>
<div id="b3">ease-in</div>
<div id="b4">ease-out</div>
<div id="b5">ease-in-out</div>
</body>
</html>
line-height.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>줄간격</title>
<style type="text/css">
div.a {
line-height: normal;
}
div.b {
line-height: 1.6;
}
div.c {
line-height: 80%;
}
div.d {
line-height: 200%;
}
p {
width: 80%;
height: 50px;;
border: 1px solid blue;
line-height: 50px;/*line-height의 높이를 공간의 높이와 같게 설정하면 글자가 가운데로 정렬된다*/
/* 공간의 세로 길이와 비슷한 크기로 지정할 경우 글자를 공간의 세로 중앙에 배치할 수 있음. */
}
</style>
</head>
<body>
<!-- 줄간격 조절 : line-height -->
<h2>줄간격 조절</h2>
<h3>line-height : normal</h3>
<div class="a">기본 줄간격을 사용한 단락입니다.<br> 대부분의 브라우저 간격은 글자 크기의 110%에서 120%정도 입니다.</div>
<br>
<h3>line-height : 1.6(권장 줄간격)</h3>
<div class="b">기본 줄간격을 사용한 단락입니다.<br> 이 단락은 기본 줄간격에서 글자 크기의 160%로 지정.</div>
<br>
<h3>line-height : 80%</h3>
<div class="c">기본 줄간격을 사용한 단락입니다.<br> 이 단락은 기본 줄간격에서 글자 크기의 80%로 지정.</div>
<br>
<h3>line-height : 200%</h3>
<div class="d">기본 줄간격을 사용한 단락입니다.<br> 이 단락은 기본 줄간격에서 글자 크기의 200%로 지정.</div>
<hr>
<p>단락입니다.</p>
</body>
</html>
