<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.div1 {
width: 200px;
height: 200px;
background: red;
visibility: hidden;
/*display는 태그의 해당영역까지 사라지지만
visibility 태그의 해당영역은 사라지지 않는다.*/
}
.div2 {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
table {
width: 300px;
height: 300px;
border: 1px solid black;
text-align: center;
margin: 0 auto;
border-collapse: separate;
border-spacing: 30px 30px;
caption-side: bottom; /*테이블 이름 위치 조정*/
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>숫자</caption><!-- 테이블 이름 -->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
-----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.div1{
column-count: 3;
column-gap: 50px;
column-rule: 3px dotted black;
/* 선 두께, 재질, 선 색*/
}
h1 {
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
img {
float: left;
}
</style>
</head>
<body>
<div>
<h1>역대 전 세계 10억 달러 영화 - 미니언즈</h1>
</div>
<div class="div1">
<img src="img/heart.png" alt="하트">
일루미네이션 엔터테인먼트가 제작하고, 유니버설 픽처스가 배급하는 세계적인 히트작 《슈퍼배드》 시리즈의 스핀오프인 작품.[2] 또한, 《슈퍼배드》 시리즈의 프리퀄로서 미니언의 기원을 다룬다. 슈퍼배드 시리즈의 마스코트 캐릭터인 미니언들을 주인공으로 다룬 장편 애니메이션이다. 드림웍스에서 슈렉 시리즈에서 인기 많은 캐릭터였던 장화 신은 고양이를 주인공으로 내세워 스핀오프인 《장화신은 고양이》를 만들었던 것이나 《마다가스카》 시리즈의 마스코트 캐릭터들을 주인공으로 삼아 만든 스핀오프 《마다가스카의 펭귄》과 비슷한 경우이다.
감독인 피에르 코팽은 《슈퍼배드》 시리즈에 이어 본작도 연출하고 미니언들의 성우를 맡았으며, 공동 감독인 카일 볼다는 픽사 출신의 애니메이션 감독이며 일루미네이션 엔터테인먼트에서 2012년에 제작했던 《로렉스》를 연출한 바 있다.
미니언이 팬층이 매우 두터운 캐릭터라 2015년 가장 강력한 흥행 애니메이션이 된 작품이다. 본작의 공식 페이스북에 '좋아요'를 클릭한 사람만 해도 3000만명을 돌파한 수준이다.[3] 한국에서는 《슈퍼배드》 시리즈가 별 주목을 못 받았지만 해외에서는 엄청난 흥행 성공을 기록한 프랜차이즈인데다 그 일등공신이 바로 미니언들이기 때문. 실제로 여러 국가들에서 상영하면서 기존 시리즈 흥행 기록을 경신하며 대성공을 거두었다.
발명가인 남편 허브와 함께 세상을 지배하려고 하는 여자 악당 스칼렛 오버킬에게 미니언인 스튜어트, 케빈, 밥이 합세하면서 벌어지는 이야기.
</div>
</body>
</html>
-----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
div{
width: 100px;
height: 100px;
background: red;
}
.div1 {
/* 내 크기를 기준으로*/
transform: translate(50%, 50%);
/*position: absolute;
left: 50%;
top: : 50%;*/
}
.div2 {
background: blue;
/*회전*/
transform: rotate(45deg);
}
.div3 {
background: green;
transform: scale(2, 2);
transform-origin: 0% 0%;
}
.div4 {
background: yellow;
/*기울기 X축 Y축*/
transform: skew(20deg, 20deg);
}
.div5 {
background: black;
transform: translate(500px, 500px) scale(2,2) rotate(45deg) skew(15deg, 30deg);
}
</style>
</head>
<body>
<div class="div2">
</div>
<div class="div1">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
<div class="div5">
</div>
</body>
</html>
-----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
@keyframes ani1 {
0% {
width: 0px;
}
100%{
width: 1000px;
background: yellow;
}
}
.div1 {
width: 0px;
height: 900px;
background: green;
animation-name: ani1;
/*생명주기(동작시간설정)*/
animation-duration: 3s;
/*애니메이션이 끝나고 나서*/
animation-fill-mode: forwards;
/*반복 무한반복*/
animation-iteration-count: infinite;
/*애니메이션 방향/ revsere:반대 alternate: 반복*/
animation-direction: alternate-reverse;
/*지연시간 늦춰주는거*/
animation-delay: 2s;
/*실행상태*/
animation-play-state: running;
}
.div1:HOVER {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
--------------------------------------------------------------------
'노트필기' 카테고리의 다른 글
| [Web] CSS class0718-1 (0) | 2017.07.18 |
|---|---|
| [Web] JSP class 0717-1 (0) | 2017.07.17 |
| [Web] class0717-1 (0) | 2017.07.17 |
| [Web] class 0714-1 (0) | 2017.07.14 |
| [Web] class 0713-2 (0) | 2017.07.13 |
