2021.06.18
ex48_transform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
/*
transform, 변형
- 요소의 위치, 크기, 회전, 비틀기(왜곡) 변형을 적용
- transform: 값;
값(함수)
1. translate(x좌표, y좌표) : 위치 변형(position-relative 유사)
2. scale(가로축배율, 세로축배율) : 배율(크기) 변형 -> 객체의 크기가 커진 것이 아니라 확대한 것.
3. rotate( deg) : 회전 변형
------------------------------
4. skew(x각도, 각도) : 왜곡 변형
5. matrix() : X
*/
.box {
margin: 10px 0px;
}
#box1 {
transform: translate(100px, 100px);
}
#cat {
margin-bottom: 80px;
}
/* margin 정책(마진 상쇄현상) : 인접한 요소의 margin이 겹치면 큰 값만 적용된다. */
/*
#box1 { margin-bottom: 10px; }
#box2 { margin-top: 20px; }
*/
/*
레이아웃 작업: position 사용
사용자 인터페이스: transforn-translate 사용
*/
/* #cat > img:hover {
transform: translate(0px, -15px);
} */
/* #cat:hover > img {
transform: translate(0px, -15px);
} */
/* 마우스를 올린 사진의 형제 */
/* #cat > img:hover + img {
transform: translate(0px, -15px);
} */
/* #cat > img:hover ~ img {
transform: translate(0px, -15px);
} */
/* 짝수번째 사진 */
/* #cat:hover > img:nth-child(even) {
transform: translate(0px, -15px);
} */
/* 홀수번째 사진 */
/* #cat:hover > img:nth-child(odd) {
transform: translate(0px, -15px);
} */
/* ------------------------------------------- */
/* 1:1 배율 -> 정사이즈 */
/* #box2 {
transform: scale(1, 1);
} */
/* #box2 {
transform: scale(1.5, 1.5) translate(300px, 0px);
} */
/* #box3 {
width: 300px;
height: 300px;
} */
/* #box2 {
transform: scale(-1, 1);
} */
/* 역상 - 종이가 뒤집힌다고 생각. */
/* #box2 {
transform: scale(-1, -1);
} */
#box2 {
transition: transform 1s;
}
#box2:hover {
transform: scale(-1, 1);
}
#cat > img:hover {
transform: scale(1.3, 1.3);
opacity: 0.3;
}
/* ------------------------------------------- */
/* #box3 {
transform: rotate(30deg);
} */
#box3 {
transform: rotate(-30deg);
}
/* #cat > img:hover {
transform: rotate(30deg);
} */
/* ------------------------------------------- */
/* 서로 반대방향을 잡고 30도가 될 때까지 밀어낸 모양 */
#box1 {
transform: skew(30deg, 0deg);
}
</style>
</head>
<body>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box box-border5 box-medium bgcolor-red">상자1</div>
<div id="box2" class="box box-border5 box-medium bgcolor-yellow">상자2</div>
<div id="box3" class="box box-border5 box-medium bgcolor-blue">상자3</div>
<h1>고양이</h1>
<!-- div#cat>img[src='images/catty$$.png']*5 -->
<div id="cat">
<img src="images/catty01.png" alt="">
<img src="images/catty02.png" alt="">
<img src="images/catty03.png" alt="">
<img src="images/catty04.png" alt="">
<img src="images/catty05.png" alt="">
</div>
<!-- 텍스트 박스도 기울기를 정할 수 있음 -->
<div>
<input type="text" style="color: rebeccapurple; transform: rotate(45deg);">
</div>
<div>
<input type="text" style="color: rebeccapurple; transform: scale(-1, 1);">
</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
ex49_transform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 너비: 1000 + 가운데 정렬 */
/*
인접한 인라인 태그 사이의 공백을 없애는 방법
1. 직접 공백을 지운다. > 비권장
2. float > 추가 비용 발생
3. font-size(한글자 크기)를 0px으로 준다.
*/
/* 가로 메뉴 */
#menu {
width: 630px; /* 아이콘 크기게 맞게 줄인다. */
margin: 0 auto;
font-size: 0;
/* border: 1px solid black; */
/* text-align: center; 인라인 태그에 영향을 준다, 내용물만 가운데로 */
transform: translate(0px, -100px);
}
/* #menu:hover {
transform: translate(0px, -10px);
} */
#menu > img:hover {
transform: translate(0px, 90px);
}
/*
#menu > img {
float: left;
}
#menu::after { -> float 영향 없애는 법
content: "";
display: block;
clear: both;
}
*/
/* 세로 서브메뉴 */
#submenu {
/* border: 1px solid black; */
width: 126px;
font-size: 0;
transform: translate(-110px, 0px);
}
#submenu > img:hover{
transform: translate(100px, 0px);
}
#section {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<nav id="menu">
<!-- img[src=imges/rect_icon$$.png]*5 -->
<img src="images/rect_icon01.png" alt="">
<img src="images/rect_icon02.png" alt="">
<img src="images/rect_icon03.png" alt="">
<img src="images/rect_icon04.png" alt="">
<img src="images/rect_icon05.png" alt="">
<!-- <div style="clear: both;"></div> -->
</nav>
<nav id="submenu">
<!-- img[src=imges/rect_icon$$.png]*5 -->
<img src="images/rect_icon01.png" alt="">
<img src="images/rect_icon02.png" alt="">
<img src="images/rect_icon03.png" alt="">
<img src="images/rect_icon04.png" alt="">
<img src="images/rect_icon05.png" alt="">
<!-- <div style="clear: both;"></div> -->
</nav>
<section>
<h1>Transform Menu</h1>
<!-- ((h2>lorem5)+(p>lorem)*3)*5 -->
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sed iusto ullam repellendus. Doloremque aperiam sint temporibus minima maiores, iste molestias natus, saepe similique soluta nemo architecto id ratione totam?</p>
<p>Neque repellat quos consectetur corporis accusantium ducimus. Fuga, ea ullam? Dolor itaque doloremque dolore quam, voluptate officia ipsum eveniet autem officiis atque asperiores impedit nulla quod aliquid labore qui commodi!</p>
<p>Architecto ex dicta amet ut vitae, fugiat delectus similique placeat maxime impedit? Excepturi perspiciatis, ratione inventore nihil tempora qui quidem, aperiam minus debitis vitae quos sed repellat, quam et consequatur?</p>
<h2>Asperiores et debitis quis doloribus.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quas soluta possimus, asperiores, dolores quasi saepe cupiditate illo obcaecati animi, repellat odit recusandae cumque dolore! Facere consequatur quo neque quaerat!</p>
<p>Similique fuga itaque nesciunt ab dolores libero rem. Doloremque quas voluptatibus culpa nisi quos maiores fugiat, tenetur nostrum soluta. Recusandae quia eos suscipit modi officia tempore tempora facilis illo maxime!</p>
<p>Totam repellat distinctio rem. Nemo laboriosam molestiae corrupti facilis. Tempora fugit temporibus ad fuga dolore! Minima repellendus, magni voluptatem odit a iure inventore, illo reprehenderit perspiciatis, ipsum vero recusandae dolor!</p>
<h2>Nesciunt accusantium rem unde assumenda.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dolore pariatur deserunt exercitationem ipsam neque quas voluptatem perferendis rerum fuga, debitis saepe, eos recusandae at. At a nulla excepturi eos.</p>
<p>Repudiandae reprehenderit suscipit esse perspiciatis, perferendis magnam dolore saepe alias expedita in placeat velit autem cupiditate nisi magni fuga laborum, corporis ab odio sunt sit excepturi id. Voluptatibus, ipsam voluptatum?</p>
<p>Beatae quos dolor ex velit, odio distinctio illo autem veniam dicta porro maiores? Quos eligendi tenetur dolor odit, natus nihil nostrum aliquid ipsa quam excepturi mollitia amet illum voluptas eveniet.</p>
<h2>Quae repellat doloribus veritatis a.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo corrupti, neque, debitis ea officiis placeat necessitatibus, in cum suscipit veritatis reprehenderit dicta voluptates sit et. Doloremque cumque reprehenderit atque eum.</p>
<p>Aut quaerat quas eum cumque neque vitae repellat vel quisquam iure, ab fugit. Praesentium vitae minus porro, corporis ipsum magnam sed sint aperiam deserunt quas, quo ex laudantium reiciendis unde!</p>
<p>Magni nobis eos, cupiditate similique accusantium reiciendis ipsum, maxime officia beatae sit ipsa nisi in. Quis eos sit esse, nulla, expedita dolor ipsa maiores modi placeat amet fugiat iusto porro.</p>
<h2>Dolore, aut totam! Neque, sed.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A magnam ratione reprehenderit dolores quae aliquam incidunt error architecto, quia soluta harum omnis eligendi repellat earum voluptatibus itaque totam similique ducimus?</p>
<p>Pariatur quasi asperiores nostrum omnis corrupti amet incidunt. Explicabo, sequi nam provident quam molestias, vitae repellendus doloribus in pariatur suscipit hic quae quis, commodi eos ex mollitia quisquam animi. Libero?</p>
<p>Similique rerum nihil modi architecto saepe repudiandae assumenda pariatur dolorem, ea quod omnis maxime inventore? Ratione, cumque. Fugiat, necessitatibus esse obcaecati, voluptatibus ex autem labore quaerat, reprehenderit ut non ducimus.</p>
</section>
</body>
</html>ex50_transform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border: 10px solid steelblue;
font-size: 0;
width: 250px;
height: 188px;
overflow: hidden;
}
#innerbox {
/* border: 10px solid red; */
width: 1250px;
}
#box:hover > #innerbox {
transform: translate(-250px, 0px);
}
</style>
</head>
<body>
<div id="box">
<div id="innerbox">
<!-- img[src=images/cat$$.jpg]*5 -->
<img src="images/cat01.jpg" alt="">
<img src="images/cat02.jpg" alt="">
<img src="images/cat03.jpg" alt="">
<img src="images/cat04.jpg" alt="">
<img src="images/cat05.jpg" alt="">
</div>
</div>
</body>
</html>ex51_transition.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
/*
transition, 전환
- 객체의 속성(상태값)이 변화되는 과정을 시간 순으로 보여주는 기술
- 수치형 속성 값에 한해서.. (열거형은 불가능)
*/
#box {
/* 애니메이션이 걸릴 대상 */
/* transition-property: width, height, font-size; */
/* all : 모든 속성 */
transition-property: all;
/* 변화를 일으키는데 걸리는 시간 */
transition-duration: 1s;
}
#box:hover {
/* width: 500px; */
/* height: 500px; */
/* font-size: 5em; */
/* opacity: .1; */
/* font-family: 궁서체; -> 수치가 아니라서 서서히 바뀌지 않음. */
/* background-color: royalblue; */
/* border-width: 30px; */
/* padding: 50px; */
/* border-radius: 50%; */
/* margin-left: 200px; */
/* box-shadow: 10px 10px 10px slateblue; */
/* transform: translate(100px, 0px); */
/* transform: scale(-1, 1); */
/* transform: rotate(30deg); */
}
#cat > img {
transition-property: all;
transition-duration: 0.2s;
opacity: .3;
}
#cat > img:hover {
transform: translate(0px, -25px);
opacity: 1;
}
/* 문제 - 덜덜 떨림, 안정적이지 않음 */
/* #cat6 {
}
#cat6:hover {
transform: translate(500px, 0px);
} */
/* 자바스크립트를 쓰지않고 해결하는 방법 */
/* 방법 1. 형제를 이용한다. */
/* #cat5 + #cat6 {
transition: all 1s;
}
#cat5:hover + #cat6 {
transform: translate(500px, 0px);
} */
/* 방법 2. 부모태그를 이용한다. */
#cage {
/* border: 10px solid black; */
width: 620px;
}
#cat7 {
transition: all 1s;
}
#cage:hover > #cat7 {
transform: translate(500px, 0px);
}
</style>
</head>
<body>
<div id="box" class="box box-small box-border1 bgcolor-orange">상자</div>
<h1>고양이</h1>
<div id="cat">
<img src="images/catty01.png" alt="">
<img src="images/catty02.png" alt="">
<img src="images/catty03.png" alt="">
<img src="images/catty04.png" alt="">
<img src="images/catty05.png" alt="">
</div>
<hr>
<img src="images/catty05.png" alt="" id="cat5">
<img src="images/catty06.png" alt="" id="cat6">
<hr>
<div id="cage">
<img src="images/catty07.png" alt="" id="cat7">
</div>
</body>
</html>ex52_transition.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
#menu {
/* position: fixed; */
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 120px;
background-color: white;
border-bottom: 1px solid #CCC;
box-shadow: 0px 2px 2px #DDD;
cursor: pointer;
transform: translate(0px, -80px);
transition: transform .8s;
}
#menu:hover {
transform: translate(0px, 0px);
}
#menu > span {
font-weight: bold;
font-variant: small-caps;
position: absolute;
right: 20px;
bottom: 10px;
}
section{
width: 800px;
margin: 0px auto;
margin-top: -60px;
}
</style>
</head>
<body>
<!--
메뉴 (붙박이 + 슬라이딩)
-->
<nav id="menu">
<span>Menu</span>
</nav>
<section>
<!-- ((h1>lorem5)+(p>lorem5)*3)*20 -->
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Laudantium explicabo aspernatur maiores corporis?</p>
<p>Veniam dignissimos tempora reiciendis quidem.</p>
<h1>Corporis minima numquam distinctio! Molestiae.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Nobis repudiandae veritatis quisquam rem.</p>
<p>Quidem eum cum maiores laudantium?</p>
<h1>Animi optio porro nulla inventore.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Deserunt sit maiores aspernatur quis?</p>
<p>Nostrum ratione a nobis fugiat?</p>
<h1>Dignissimos placeat molestiae esse consectetur!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Recusandae libero officia sapiente corporis?</p>
<p>Ex dolor consequuntur harum? Maxime.</p>
<h1>Facere ab aperiam atque expedita?</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>A maxime aut praesentium eveniet?</p>
<p>Eligendi exercitationem architecto quidem natus!</p>
<h1>Est porro aliquam id. Voluptates.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Aliquid repudiandae harum quidem obcaecati?</p>
<p>Explicabo veniam accusantium repudiandae illum?</p>
<h1>Eveniet harum recusandae rem neque!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Nostrum totam hic natus labore?</p>
<p>Tenetur ipsam repellat necessitatibus deleniti?</p>
<h1>Cum perferendis quaerat itaque eos!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Sunt aliquam ipsam totam quisquam?</p>
<p>Deleniti eligendi tempora libero voluptas.</p>
<h1>Provident qui consequatur sunt quod?</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptate, consequuntur! Excepturi, recusandae cupiditate?</p>
<p>Possimus asperiores eveniet hic soluta?</p>
<h1>Quod sapiente ea debitis accusamus.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Ad numquam consectetur dolorem maiores.</p>
<p>Culpa perferendis tempora maiores atque.</p>
<h1>Ex assumenda eius aut porro!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Nihil cum numquam iste quae?</p>
<p>Ullam, quibusdam. Repellat, laboriosam a!</p>
<h1>Neque iure ex nostrum totam.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Dolorem nemo quidem quasi perferendis!</p>
<p>Laudantium pariatur facere nisi a!</p>
<h1>Rerum odio perferendis neque possimus.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Cum harum dolores doloribus aliquam!</p>
<p>Facilis mollitia nam soluta iure.</p>
<h1>Blanditiis, minus. Doloremque, animi cupiditate.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Amet voluptates maxime minima voluptate!</p>
<p>Temporibus cumque blanditiis esse deleniti?</p>
<h1>Consequuntur sequi dignissimos earum eveniet!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Placeat nulla a culpa in.</p>
<p>Dignissimos eum qui ullam numquam!</p>
<h1>Modi accusantium ipsum optio doloribus.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Unde odio quidem maiores vero?</p>
<p>Ratione similique rerum quibusdam eveniet!</p>
<h1>Quidem molestias repellat nesciunt voluptatibus.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Pariatur tenetur deleniti sint corporis.</p>
<p>Eligendi vel quae quam nihil.</p>
<h1>Enim rerum cumque id veniam!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Id numquam similique soluta officiis.</p>
<p>Error necessitatibus et optio quibusdam?</p>
<h1>Saepe enim totam omnis sed!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Asperiores explicabo natus assumenda eius.</p>
<p>Dicta fugit beatae ipsam autem.</p>
<h1>Earum unde dolorem ipsum consectetur.</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Odit ratione quia temporibus eligendi.</p>
<p>Quam id dolorum alias sed!</p>
</section>
</body>
</html>ex53_transform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 128px;
height: 128px;
border: 10px solid orange;
float: left;
overflow: hidden;
}
.box:nth-child(even){
border-color: crimson;
}
/* .box > img {
transition: all 1s;
}
.box:hover > img {
transform: translate(-128px, 0px);
} */
.box > img {
transition: all 1s;
/* transform: translate(0px, -128px); */
transform: rotate(0deg) translate(0px, 0px);
transform-origin: center top;
}
.box:hover > img {
/* transform: translate(0px, 0px); */
transform: rotate(360deg);
}
</style>
</head>
<body>
<!-- (div#bpox$.box>img[src=images/catty$$.png])*5 -->
<div id="bpox1" class="box"><img src="images/catty01.png" alt=""></div>
<div id="bpox2" class="box"><img src="images/catty02.png" alt=""></div>
<div id="bpox3" class="box"><img src="images/catty03.png" alt=""></div>
<div id="bpox4" class="box"><img src="images/catty04.png" alt=""></div>
<div id="bpox5" class="box"><img src="images/catty05.png" alt=""></div>
</body>
</html>ex54_transition.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list {
border: 1px solid black;
width: 1400px;
height: 350px;
}
.box {
width: 100px;
height: 100px;
margin: 15px 0px;
transition: width 10s;
}
#box1 { background-color: royalblue; transition-timing-function: linear;}
#box2 { background-color: gold; transition-timing-function: ease;}
#box3 { background-color: crimson; transition-timing-function: ease-in;}
#box4 { background-color: mediumseagreen; transition-timing-function: ease-out;}
#box5 { background-color: violet; transition-timing-function: ease-in-out;}
#list:hover .box {
width: 1400px;
}
</style>
</head>
<body>
<!-- div#list>div#box$.box*5 -->
<div id="list">
<div id="box1" class="box">linear</div>
<div id="box2" class="box">ease(defalut)</div>
<div id="box3" class="box">ease-in</div>
<div id="box4" class="box">ease-out</div>
<div id="box5" class="box">ease-in-out</div>
</div>
</body>
</html>ex55_box-sizing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin-bottom: 5px;
}
#box1 {
width: 300px;
height: 150px;
border: 20px solid black;
padding: 20px;
background-color: gold;
/* 테두리와 여백은 제외한 컨텐츠 크기를 width와 height로 하겠다. */
box-sizing: content-box; /* default */
}
#box2 {
width: 300px;
height: 150px;
border: 20px solid black;
padding: 20px;
background-color: hotpink;
/* 테두리와 여백을 모두 포함한 크기를 width와 height로 하겠다. */
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- div#box$.box*3 -->
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</body>
</html>
모르면 괴롭고 알면 즐겁다.