퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 12. css3 알아보기
12.1 웹 페이지 html 실습
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3 selector</title>
<style>
body {font: 12px 'Trebuchet MS', sans-serif;}
/* rem은 html의 기준을 가지고 계산하고 em은 위에 상속되는 글자 크기를 기준으로 계산한다 */
/* :root;로 rem의 기준을 정할 수 있다 */
.wrap h1 ~ p {background-color: lime;}
/* h1 다음에 오는 형제 요소들 중 모든 p를 선택한다.
h1 + p는 h1 다음에 오는 하나의 p만을 선택한다 */
.wrap a[href ^= "http://"] { background-color: orange; }
/* href 속성이 http로 시작하는 것만 */
.wrap a[href ^= "mail"] { background-color: blue; color: white; }
.wrap a[href $= "pdf"] {background-color: lime;}
/* href 속성의 끝이 pdf로 끝나는 것만 */
.wrap a[title *= "이동"] {color: red;}
/* 속성 중에 이동이라는 글자가 포함되어 있는 것 */
.wrap p:empty {border-bottom: 1px solid green; }
/* p 중에 비어 있는 것 */
ul li:nth-child(3) {border-bottom: 3px solid red;}
/* n번째 자식을 선택할 수 있다 */
ul li:fisrt-child {border-bottom: 2px solid silver; }
/* 마지막은 li:last-child ; */
/* ul li:nth-child(3n) 이라고 하면 3의 배수마다 서식 지정 가능하다 ; */
/* ul li:nth-child(3n+2); 2번부터 5, 8, 11 까지 서식을 지정할 수 있다 */
/* ul li:nth-last-child(3); 뒤에서 3번째의 서식을 지정할 수 있다 */
dl dt:nth-of-type(1) {background-color:silver;}
/* 여러 태그 중에서 몇 번째 */
/* nth-last-of-type() 으로 뒤에서 n번째 타입을 선택할 수도 있다 */
#sample {display: none;}
#sample:target {display: black;}
/* none이 되어 있으면 내용이 보이지 않지만 target이 되면 그 부분이 보이게 된다 */
</style>
</head>
<body>
<div class="wrap">
<h1>css3 selector</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur molestias saepe placeat consectetur quia omnis illum consequatur nemo, temporibus impedit. Provident eaque iste doloremque vero, ad temporibus inventore non, placeat.lore Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae obcaecati est nihil quia, quibusdam, ducimus sit voluptatibus assumenda incidunt fuga tenetur delectus animi officiis eos a commodi unde amet nemo.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Officiis odit commodi nostrum tenetur placeat modi libero voluptas excepturi, assumenda! Excepturi!</p>
<p><a href="#sample">DL sample</a></p>
<dl id="sample">
<dt>description terms</dt>
<dd>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi, labore cum voluptatibus consequatur aperiam, facilis.</dd>
<dt>description terms</dt>
<dd>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi, labore cum voluptatibus consequatur aperiam, facilis.</dd>
<dt>description terms</dt>
<dd>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi, labore cum voluptatibus consequatur aperiam, facilis.</dd>
<dt>description terms</dt>
<dd>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi, labore cum voluptatibus consequatur aperiam, facilis.</dd>
<dt>description terms</dt>
<dd>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi, labore cum voluptatibus consequatur aperiam, facilis.</dd>
<dd>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, omnis, ut? Ipsum assumenda sapiente, earum tenetur eligendi voluptates esse deleniti!</dd>
</dl>
<ul>
<li><a href="http://naver.com/" title="네이버로 이동">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</a></li>
<li><a href="http://daum.net/" title="다음으로 이동">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</a></li>
<li><a href="mailto:">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</a></li>
<li><a href="download/sample.pdf" title="pdf file download">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</a></li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</li>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, totam.</li>
</ul>
<p></p>
<p>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Distinctio perferendis nesciunt sit, molestias in repellat sequi, mollitia aliquid assumenda porro necessitatibus dolorem recusandae libero quidem sapiente aperiam, odio facere quae!</p>
</div>
</body>
</html>
12.2 그림자처리, 밑줄임표현, 투명도 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS3generator를 이용해 미리 모의 테스트를 해 볼 수 있다 */
/*
selector {
-webkit-attibute: value; Chrome, Safari
-moz-attribute: value; Firefox;
-ms-attribute: value; IE, Outlook
-o-attribute: value; Opera
}
접두어를 붙이는 경우는 특정 버전에서 호환이 안 되는 경우
*/
#wrap {
width: 600px;
margin: 0 auto;
}
#wrap h1{
border: 1px solid #333;
padding: .5em 1em;
font: bold 100px arial, sans-serif;
text-transform: uppercase;
text-shadow: 2px 2px 0 rgba(255, 255, 255, 1),
-20px 10px 10px rgba(0,0,0,.4);
box-shadow: 10px 10px 10px rgba(0,0,0, .5),
inset 5px 5px 20px 10px rgba(255, 0, 0, .5);
/* inset은 안쪽으로 들어오는 것 */
/* 가로 세로 블러 스프레드 색깔 */
}
</style>
</head>
<body>
<div id="wrap">
<h1>shadow</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS3generator를 이용해 미리 모의 테스트를 해 볼 수 있다 */
/*
selector {
-webkit-attibute: value; Chrome, Safari
-moz-attribute: value; Firefox;
-ms-attribute: value; IE, Outlook
-o-attribute: value; Opera
}
접두어를 붙이는 경우는 특정 버전에서 호환이 안 되는 경우
*/
#wrap {
width: 600px;
padding: 20px;
margin: 0 auto;
border: 1px solid black;
border-width: 0 1px;
font: 12px arial, sans-serif;
}
.sample {
overflow: hidden; /* 넘치는 것은 잘라버림 */
width: 100%;
text-overflow: ellipsis;
white-space: nowrap; /* 줄바꿈이 안됨 */
/* 말줄임표현 */
/*inline은 그냥 하면 width가 되지 않기 때문에 display: block;을 지정해야 함*/
}
</style>
</head>
<body>
<div id="wrap">
<p class="sample">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda consequuntur placeat minima delectus ea soluta debitis nobis ipsum molestiae veritatis? Rem sed architecto, quas aliquam laudantium ipsam commodi iure iusto?</p>
<span class="sample">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aperiam eaque optio hic natus impedit magni aliquid itaque totam error facere excepturi fugit soluta vitae sequi, architecto expedita laudantium odio.</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: url(img/photo.jpg);
}
#wrap {
width: 600px;
padding: 20px;
margin: 0 auto;
font: 12px arial, sans-serif;
}
#wrap h1.sample1 {
border: 1px solid black;
color: #f00;
font-size: 100px;
background-color: rgba(0,0,0, .5);
/* hsla(색상환의 각도(0=360=빨강), 채도, 명도, 투명도) sl 요소는 %로 지정 */
}
#wrap h1.sample2 {
border: 1px solid black;
color: #f00;
font-size: 100px;
background-color: blue;
opacity: .5; /* 요소 전체가 투명 */
}
</style>
<title>Document</title>
</head>
<body>
<div id="wrap">
<h1 class="sample1">Opacity</h1>
<h1 class="sample2">Opacity</h1>
</div>
</body>
</html>
12.3 멀티칼럼 & 둥근모서리 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
#wrap {
width: 800px;
margin: 0 auto;
column-count: 3;
column-gap: 20px;
column-rule: 1px dashed #aaa; /* 구분 선 */
column-width: 300px;
/* 단의 크기가 유동적이다. 300px에 여백의 크기는 포함되지 않는다 */
}
#wrap h1 {
column-span: all;
/* h1에는 column이 나눠지는 걸 방지한다 */
}
</style>
</head>
<body>
<div id="wrap">
<h1>multi columns</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus veritatis consequatur numquam. Ad maxime ducimus quae ut tempora et quisquam tenetur, eaque voluptates dolores impedit ullam eum nam vero dolorem?lorem</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda libero consectetur dolor dolore blanditiis magni aliquam iusto esse explicabo ex modi aspernatur doloremque officia dolorem vero molestiae et maiores unde dolorum sunt minima, nostrum nihil, voluptates! Non aut distinctio facere voluptatibus a explicabo nulla, tempora ipsa sint quos veniam, enim numquam corporis ex excepturi tenetur dolorem placeat eligendi exercitationem tempore, eaque esse. Rerum ut quas quae numquam provident minus consectetur perferendis perspiciatis earum illo libero quibusdam quia, nisi placeat architecto sequi tenetur commodi ipsum? Ab eius, suscipit tempore cumque ex, rem nisi, dolor laborum laboriosam non ipsam, exercitationem sunt illo.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
.box {
border: 3px solid black;
width: 400px;
height: 400px;
border-radius: 10px;
/* 하나만 쓰면 horizontal, vertical을 함께 쓰는 것 */
/* 50px 50px 50px 50px/20px 20px 50px 50px
왼 상 오 하 로 각각의 radius를 지정할 수 있다. */
/* border-radius: 100% 50%;로 타원형 지정도 가능 */
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Nam tempora soluta repellat quasi, minus. Provident adipisci harum possimus numquam quod. Suscipit at illo voluptate quam quod quae, maiores, hic a.lorem
</div>
</div>
</body>
</html>
12.4 추가된 배경처리 알아보기 & 그라데이션 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
.box {
border: 3px solid black;
width: 400px;
height: 200px;
border-radius: 10px;
background: url(img/twt.png) no-repeat 50px 30px,
url(img/insta.png) no-repeat 55px 35px / 64px 64px,
url(img/photo.jpg) no-repeat 0 0 / 100% auto;
/* 먼저 쓴 이미지가 앞쪽으로 나온다 */
/* 크기를 100% 100%하면 커질 수 있다 */
/* background-size로 사이즈 조절 가능 */
/* cover를 통해 사이즈에 딱 맞게 조절할 수 있다 */
}
.box2 {
border: 3px solid black;
width: 400px;
padding: 20px;
height: 200px;
border-radius: 10px;
background: url(img/photo.jpg) no-repeat 0 0 / cover;
background-clip: content-box;
/* padding 영역에는 배경이 보이지 않도록 하는 것 */
background-orgin: content-box;
/* clip을 했을 때 시작되는 지점을 정할 수 있음 */
color: white;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Nam tempora soluta repellat quasi, minus. Provident adipisci harum possimus numquam quod. Suscipit at illo voluptate quam quod quae, maiores, hic a.lorem
</div>
<div class="box2">
Lorem ipsum dolor, sit ametWF consectetur, adipisicing elit. Nam tempora soluta repellat quasi, minus. Provident adipisci harum possimus numquam quod. Suscipit at illo voluptate quam quod quae, maiores, hic a.lorem
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
.box-r {
width: 300px;
height: 300px;
border-radius: 50%;
border: 5px solid #000;
margin: 0 0 10px;
background: rgb(201,222,150); /* Old browsers */
background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */
;
}
.box {
border: 3px solid black;
width: 400px;
padding: 20px;
background: #fcecfc; /* Old browsers */
background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 36%, #fd89d7 62%, #ff7cd8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 36%,#fd89d7 62%,#ff7cd8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fcecfc 0%,#fba6e1 36%,#fd89d7 62%,#ff7cd8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* IE6-9 */
color: white;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box-r">
</div>
<div class="box">
Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Nam tempora soluta repellat quasi, minus. Provident adipisci harum possimus numquam quod. Suscipit at illo voluptate quam quod quae, maiores, hic a.lorem
</div>
</div>
</body>
</html>
12.5 박스사이징 & 플렉스 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
.box {
width: 400px;
border: 5px solid black;
background-color: lime;
padding: 20px;
padding: 20px;
box-sizing: border-box;
/* 내가 지정한 width에 border와 padding이 들어간다 */
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Nam tempora soluta repellat quasi, minus. Provident adipisci harum possimus numquam quod. Suscipit at illo voluptate quam quod quae, maiores, hic a.lorem
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
display: flex;
/* flex 지정한 녀석의 자식이 block이면 옆으로 나열된다 */
/* float 바깥에서 clear를 해 주지 않아도 알아서 clear된다 */
}
#wrap h1 {flex: 1;}
#wrap .text {flex:1;}
/* flex로 1:1:1로 지정 가능하다 */
</style>
</head>
<body>
<div id="wrap">
<h1>Flex example</h1>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod autem iusto debitis suscipit corporis assumenda qui. Quis reiciendis veritatis, laboriosam ab exercitationem itaque explicabo. Quaerat animi, magnam nesciunt sed error nisi quia velit corporis dolores molestiae quam culpa facilis, reprehenderit assumenda officia accusamus maxime porro non et fugit dolorum distinctio.</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod autem iusto debitis suscipit corporis assumenda qui. Quis reiciendis veritatis, laboriosam ab exercitationem itaque explicabo. Quaerat animi, magnam nesciunt sed error nisi quia velit corporis dolores molestiae quam culpa facilis, reprehenderit assumenda officia accusamus maxime porro non et fugit dolorum distinctio.</p>
</div>
</body>
</html>
12.6 transition 지정하기
https://developer.mozilla.org에서 서 timing function에 대한 자료를 볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
}
.box{
width: 100px;
height: 100px;
background-color: lime;
/*
transition-property: width;
transition-duration: 3s;
transition-delay: 1s;
transition-timing-function: linear;
*/
/* 일정하게 증가할 때 */
/*
transition: all 3s;
한 가지만 서서히 하고 싶다면 width 3s라고 하면 된다 */
/* 한번에 쓰고 싶다면 width 3s 1s linear */
transition:
width 3s linear,
height 1s 3s,
background-color 2s 3s;
}
.box:hover {
width: 100%;
height: 200px;
background-color: blue;
}
.box2{
width: 100px;
height: 100px;
background-color: lime;
/* transition: all 1s cubic-bezier(0.25, 1.5, 0.75, -0.5) ; */
/* linear | ease | ease-in | ease-out | steps(횟수, start | end)을 transition-timing-function에 사용 가능 */
transition: all 1s steps(3, start);
}
.box2:hover {
width: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box"></div>
<div class="box2"></div>
</div>
</body>
</html>
12.7. animation 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
/* animation-name: ani; /* 애니메이션 이름을 지정해야 한다
animation-duration: 3s;
animation-fill-mode: backwards;
/* forwards - 끝난 상태로 유지, backwords - 원래 상태로 되돌아옴
animation-delay: 1s; /* 대기 시간
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: 3; /* inifinite도 가능 */
/* alternate는 왕복으로 iteration 설정과 함께 쓰면 좋다 */
/* 한번에 적을 때,
animation: ani 2s 1s infiniter alternate; */
/* animation도 여러 개 지정 가능
ani 3s 1s infinite alternate,
ani2 1s 3s infinite alternate; 등 */
animation: ani 3s 1s infinite alternate,
ani2 1s 3s infinite alternate,
ani3 2s infinite alternate;
}
.box:hover {
animation-play-state: paused;
}
@keyframes ani {
0% {
width: 100px;
}
100% {
width: 100%;
}
}
@keyframes ani2 {
0% {
background: purple;
}
100% {
background: rgba(255,0,0,.5);
}
}
@keyframes ani3 {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}
</style>
</head>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
</html>
12.8. transform 지정하기
translate, translate3d - 이동
rotate - 회전
scale
skew- 찌그러트리기
matrix - 몇가지 값을 한 번에 적용할 때
perspective
perspective-origin
transform-origin: 변형할 때 기준
transform-style : 애니메이션 되는 과정이 3D를 유지하는 설정 등
ds-overdesign.com에서 matrix3d를 참고하면 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
font: 12px 'Malgun Gothic', sans-serif;
perspective: 1000px;
/* perspective 기준 기본은 center */
perspective-origin: 10px 10px;
}
#wrap {
width: 900px;
margin: 0 auto;
}
.pic {
width: 300px;
}
.pic img{
width: 100%;
transition: all 1s;
transform-origin: 20px 20px;
/* 움직이는 것에 대한 기준 */
}
.pic:hover img {
/* transform: translateX(200px); */
/* X, Y, Z로 오른쪽, 아래가 기준. */
/* translate(X, Y, Z) */
transform: translateZ(-300px);
transform: rotate3d(1, 1, 1, 90deg);
/* 한번에 회전 일괄 적용 가능, rotateX처럼 쓸 수도 있다 */
transform: scale3d(1.5, 1.5, 2) rotateY(90deg);
transform: skew(30deg, 45deg);
transform: matrix(1.5, 0, 0.3, 1.5, 0, 0);
/* 인자는 scale X, skew Y, skew X, scale Y, translate 두 개
인자는 그냥 숫자로 쓰면 배수가 된다
*/
}
</style>
</head>
<body>
<div id="wrap">
<div class="pic"><img src="img/photo.jpg" alt=""></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
perspective: 1000px;
font: 12px 'Malgun Gothic', sans-serif;
}
.cube {
position:absolute;
margin: -100px 0 0 -100px;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: cube 3s infinite;
}
.box {
position:absolute;
width: 200px;
height:200px;
font: bold 100px/200px 'Trebuchet MS', sans-serif;
text-align: center;
color: #fff;
opacity: .6;
}
#a{
z-index: 1;
transform: translateZ(100px);
background-color: #ff0000;
}
#b{
transform: translateX(100px) rotateY(90deg);
background-color: #810073;
}
#c{
transform: translateZ(-100px) rotateY(180deg);
background-color: #340081;
}
#d{
transform: translateX(-100px) rotateY(270deg);
background-color: #004981;
}
#e{
transform: translateY(-100px) rotateX(90deg);
background-color: #00714d;
}
#f{
transform: translateY(100px) rotateX(270deg);
background-color: #0d7100;
}
@keyframes cube {
0% {transform: rotate3d(1,1,1,0deg);}
100% {transform: rotate3d(1,1,1, 360deg);}
}
</style>
</head>
<body>
<div class="cube">
<div class="box" id="a">A</div>
<div class="box" id="b">B</div>
<div class="box" id="c">C</div>
<div class="box" id="d">D</div>
<div class="box" id="e">E</div>
<div class="box" id="f">F</div>
</div>
</body>
</html>
12.9 filter 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font: 12px 'Malgun Gothic', sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
}
#wrap:after {
content: '';
display: block;
clear: both;
}
.filter {
float: left;
width: 300px;
border: 2px solid;
box-sizing: border-box;
}
.filter img {
width: 100%;
transition: all 2s;
}
.filter strong {
display: block;
padding: .3em .5em;
}
.filter.blur img:hover {
filter: blur(5px);
}
.filter.brightness img:hover {
filter: brightness(2); /* 2 = 200% */
}
.filter.contrast img:hover {
filter: contrast(3);
}
.filter.drop-shadow img:hover {
filter: drop-shadow(-20px -20px 0 rgba(0, 0, 0, .4)); /*왼 좌 블러 색상 */
}
.filter.grayscale img:hover {
filter: grayscale(1);
}
.filter.hue-rotate img:hover {
filter: hue-rotate(360deg);
}
.filter.invert img:hover {
filter: invert(1);
}
.filter.opacity img:hover {
filter: opacity(0);
}
.filter.sepia img:hover {
filter: sepia(1);
}
</style>
</head>
<body>
<div id="wrap">
<div class="filter blur">
<img src="img/picture.jpg" alt="">
<strong>blur</strong>
</div>
<div class="filter brightness">
<img src="img/picture.jpg" alt="">
<strong>brightness</strong>
</div>
<div class="filter contrast">
<img src="img/picture.jpg" alt="">
<strong>contrast</strong>
</div>
<div class="filter drop-shadow">
<img src="img/picture.jpg" alt="">
<strong>drop-shadow</strong>
</div>
<div class="filter grayscale">
<img src="img/picture.jpg" alt="">
<strong>grayscale</strong>
</div>
<div class="filter hue-rotate">
<img src="img/picture.jpg" alt="">
<strong>hue-rotate</strong>
</div>
<div class="filter invert">
<img src="img/picture.jpg" alt="">
<strong>invert</strong>
</div>
<div class="filter opacity">
<img src="img/picture.jpg" alt="">
<strong>opacity</strong>
</div>
<div class="filter sepia">
<img src="img/picture.jpg" alt="">
<strong>sepia</strong>
</div>
</div>
</body>
</html>
'개발 공부 > html & css' 카테고리의 다른 글
| 제대로 배워보는 html과 css, 그리고 웹표준 14. 웹 사이트 제작 실습 (0) | 2020.09.24 |
|---|---|
| 제대로 배워보는 html과 css, 그리고 웹표준 13. 반응형 웹 알아보기 (0) | 2020.09.23 |
| 제대로 배워보는 html과 css, 그리고 웹표준 11. 웹 페이지 만들어보기 실습 (0) | 2020.09.18 |
| 제대로 배워보는 html과 css, 그리고 웹표준 10. 예제 만들어보기(네이버 Nuli) (0) | 2020.09.17 |
| 제대로 배워보는 html과 css, 그리고 웹표준 9. EMS, 이벤트 제작 실습 (0) | 2020.09.11 |
