티스토리 뷰
KH 정보교육원 [ Java ]
KH 61일차 - CSS 기본 다지기 7 ( 그림자 / position / 레이아웃 ) (***)
monimoni 2022. 5. 24. 15:251. 레이아웃 – position 속성 (***)
- 텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성이다.
- Position에 사용되는 속성값의 종류 :
- 1 ) position : static; ( 정적 위치 설정 )
- : 각종 요소를 웹 문서의 흐름에 따라 배치한다. ( 기본값 )
- : 블록 요소는 위에서 아래로 생성되며, 인라인 요소는 같은 행에서 순서대로 배치
- : static은 left나 bottom과 같은 위치 속성이 적용되지 않는다.
- 2 ) position : relative; ( 상대 위치 설정 )
- : 웹 문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지를 지정하여 배치하는 방법이다.
- : 각종 요소가 웹 문서의 정적 위치값에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법
- : 즉, static 위치( 원래 나와야 했던 위치 )를 기준으로 얼마나 떨어져 있는지를 설정
- : 주로 absolute와 fixed의 기준점으로 설정하여 사용한다. (**)
- 3 ) position : absolute; ( 절대 위치 설정 )
- : 전체 페이지를 기준으로 top, left, bottom, right의 속성을 이용하여, 원하는 위치에 배치하는 방법이다.
- : 사실상 absolute는 부모 태그를 기준으로 위치를 배치하게 되는데, 이때 body가 부모 태그이면 뷰포트를 기준으로 만들어지고, 만약 다른 태그가 부모이면 다르게 출력된다. (*)
- 4 ) position : fixed; ( 고정 위치 설정 )
- : 요소의 위치를 ‘절대 위치 설정’과 같은 방법으로 배치하되, 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있다.
- : top, left, bottom, right의 속성을 통해 위치를 지정한다.
- + position 속성값을 지정하지 않으면, 디폴트 값으로 static이 들어가게 된다.
2. 레이아웃 – float 속성 (**)
- 화면을 구성하는 요소 간의 관계를 고려하여, 각 요소를 배치하는 방법이다.
- 요소를 화면에서 띄워서 배치한다고 생각하면 다소 편하다.
- Float 속성값은 기존의 left / right 외에도 none과 inherit이라는 속성값이 존재한다.
- 1 ) inherit : 요소를 감싸는 부모 요소의 float 속성을 상속받는다.
- 2 ) none : float 속성을 적용하지 않는다. ( 해당 요소를 띄우지 않는다. )
- + clear속성을 통해서 float 속성이 적용되지 않게 할 수도 있다.
- + overflow속성의 속성값을 Auto로 설정하면, 이미지가 박스 영역을 벗어나는 문제를 해결할 수 있다.
3. Z-Index 속성
- 한 요소 위에 다른 요소를 쌓을 때 사용한다.
- 속성값이 작을수록 아래에 쌓이게 된다.
4. 가시성 속성
- 1 ) Visibility 속성 : 어떤 요소를 보이게 하거나 보이지 않게 할 때 사용
- 2 ) display 속성 : visibility 속성과 다르게 공간도 사라지게 한다.
5. 그레디언트 효과
- Background나 background - image 속성을 이용한다.
- 그레디언트의 효과에는 선형과 원형 2가지의 형태가 있다.
- Ex. background : liner-gradient ( 색상 );
[ 1. 이미지에 위 / 아래 방향으로 그림자 넣기 - box-shadow ]
<!DOCTYPE html>
<html lang="ko">
<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>이미지에 그림자 넣기</title>
<style>
img{
padding: 20px;
margin: 20px;
}
.shadow1{
/* Bottom right center */
/* 아래쪽으로 그림자 넣기 ( 양수 값을 넣는다. ) */
box-shadow: 5px 5px 10px #000;
}
.shadow2{
/* 위쪽으로 그림자 넣기 ( 마이너스 값을 넣으면 된다. ) */
box-shadow: 5px -5px 10px #000;
}
</style>
</head>
<body>
<img src="https://picsum.photos/id/684/200/150" class="shadow1">
<img src="https://picsum.photos/id/685/200/150" class="shadow2">
</body>
</html>더보기
이미지에 그림자 넣기
[ 출력 결과 ]
[ 2. 레이아웃 - position 속성 fixed (****) ]
<!DOCTYPE html>
<html lang="ko">
<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>레이아웃 - position : fixed (***)</title>
<style>
body{
font-weight: bold;
font-size: 12pt;
}
.p{
position: static;
/* 위의 것이 기본적으로 설정되어 있다. */
background-color: yellow;
width: 300px;
height: 50px;
}
.fp{
position: fixed;
/* 기본 static에서 fixed로 변경하였다. -> 완전히 고정된 위치에 나오도록 한다. */
/* position 속성으로 요소의 위치를 변경할 때, 아래의 4가지 속성을 이용해서 위치를 변경하게 된다. */
/* 4가지 속성 : top / left / bottom / right */
right: 5px;
top: 5px;
background-color: lightgreen;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style - fixed</h1>
<p class="p">기본 위치 설정 - 박스1</p>
<p class="p">기본 위치 설정 - 박스2</p>
<p class="p">기본 위치 설정 - 박스3</p>
<p class="p">기본 위치 설정 - 박스4</p>
<p class="p">기본 위치 설정 - 박스5</p>
<p class="fp">고정 위치 설정 박스 : 오른쪽 스크롤을 움직여 보자!</p>
</body>
</html>더보기
레이아웃 - position : fixed (***)
[ 출력 결과 ]
positioning style - fixed
기본 위치 설정 - 박스1
기본 위치 설정 - 박스2
기본 위치 설정 - 박스3
기본 위치 설정 - 박스4
기본 위치 설정 - 박스5
고정 위치 설정 박스 : 오른쪽 스크롤을 움직여 보자!
[ 3. 레이아웃 - position 속성 absolute (***) ]
<!DOCTYPE html>
<html lang="ko">
<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>절대 위치 설정 (**)</title>
<style>
body{
font-weight: bold;
font-size: 12pt;
height: 3000px;
/* 스크롤을 알아보기 위해서 */
}
div{
border: 5px solid blueviolet;
}
.ap1{
/* 절대 위치 설정 사용 */
position: absolute;
left: 30px;
top: 70px;
/* 고정 fixed 위치와 다르게 스크롤하면 보이지 않는 것을 알 수 있다. */
/* absolut는 부모 태그를 기준으로 위치를 지정하게 된다. ( 부모태그가 body이기에, 뷰포트를 기준으로 하게 된 것이다. ) */
/* 부모 태그가 body면, 다르게 나타난다. */
/* 콘텐츠 영역 설정 */
background-color: yellow;
width: 400px;
height: 50px;
}
.ap2{
position: absolute;
top: 90px;
left: 40px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
.rp{
position: relative;
left: 50px;
top: 80px;
background-color: cyan;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1> position : absolute </h1>
<div class="ap1">위치 사용</div>
<div class="ap2">위치 사용</div>
<div class="rp">상대 위치 사용</div>
</body>
</html>[ 4. 레이아웃 - position 속성 relative (***) ]
<!DOCTYPE html>
<html lang="ko">
<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>position - 상대 위치 설정</title>
<style>
body{
font-weight: bold;
font-size: 12pt;
}
/* 조합 선택자 - 그룹 선택자 */
p, div{
border: 5px solid blueviolet;
}
.sp{
/* 정적 위치 설정 */
position: static;
/* static은 left / right / top / bottom과 같은 위치 속성이 적용되지 않는다. */
left: 300px;
top: 500px;
background-color: cyan;
width: 400px;
height: 50px;
}
.rp1{
/* position - 상대 위치 설정 */
/* 상대적인 위치로 요소의 위치를 결정 : static 위치를 기준점으로 한다. ( 원래 나타나야했던 위치를 기준으로 한다. ) */
/* relative는 주로 absolut와 fixed의 기준점으로 설정하여 사용한다. (**) */
position: relative;
top: -10px;
left: 30px;
background-color: orange;
width: 400px;
height: 50px;
}
.rp2{
/* 상대위치설정은 위치를 변경시키려는 용도로는 거의 사용되지 않는다. */
/* 자식 요소 중에 position : absolute 속성을 가진 요소의, 기준점이 되는 부모 요소가 되기 위해,
position: relative 속성을 가지거나, body태그를 기준점으로 삼는다. */
position: relative;
left: 60px;
top: 20px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>Position : relative</h1>
<p class="sp">position : static</p>
<div class="rp1">position : relative</div>
<p class="rp2">position : relative2</p>
</body>
</html>[ 5. 레이아웃 연습 - position속성 absolute의 부모 태그 선택 (****) ]
<!DOCTYPE html>
<html lang="ko">
<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>레이아웃 연습</title>
<style>
div{
width: 200px;
height: 200px;
border: 5px solid blueviolet;
background-color: bisque;
}
#box1{
position: relative;
width: 500px;
height: 500px;
}
#box2{
position: absolute;
/* 부모 태그 중 position: relative인 부모 태그를 선택하여 이를 기준으로 위치가 지정된다.(***) */
/* 부모 box에서 position: relative를 주석처리하면, body를 기준으로 옮겨지게 된다. (*****) */
/* top: 30px; */
/* left: 30px; */
bottom: 30px;
right: 30px;
border: 5px ridge red;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="box1">
<strong>부모 BOX1</strong><br>
absolute는 relative 속성을 가지거나 body태그를 부모태그로 간주하여, 위치를 지정한다.
<div id="box2">
<strong>자식 BOX2</strong>
<h3>이미지 제목</h3>
<img src="https://picsum.photos/id/684/100/100" alt="">
<!-- 그룹핑된 요소들을 같이 움직이게 된다. -->
</div>
</div>
</body>
</html>[ 6. Float 속성 연습 ]
<!DOCTYPE html>
<html lang="ko">
<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>float 속성 연습</title>
<style>
.left{
float: left;
}
.right{
float: right;
}
.new{
clear: both;
/* float속성을 해제하기 위해서 clear 속성을 사용해야 한다. */
}
</style>
</head>
<body>
<h2>Beautiful Gallery</h2>
<img src="https://picsum.photos/id/684/200/200" alt="" class="left">
<img src="https://picsum.photos/id/685/200/200" alt="" class="left">
<img src="https://picsum.photos/id/686/200/200" alt="" class="right">
<img src="https://picsum.photos/id/687/200/200" alt="" class="right">
<p>Lorem ipsum dolor sit amet.</p>
<!-- clear 속성을 넣지 않으면, 이와 같이 이상한 곳으로 요소가 들어가게 된다. -->
<!-- 이를 활용하여, 사진과 문단이 어울리는 효과를 넣을 수 있다. -->
<img src="https://picsum.photos/300/300" class="new">
<p class="new">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore vero rem vel ipsa
amet eius optio doloremque reprehenderit modi reiciendis debitis quibusdam, dicta nostrum
blanditiis quasi saepe quod delectus quisquam.</p>
</body>
</html>[ 7. Float 속성 / Clear 속성 연습 ]
<!DOCTYPE html>
<html lang="ko">
<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> float 속성 - overflow </title>
<style>
.div1{
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid blueviolet;
}
.div2{
border: 3px solid red;
}
.div3{
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid lightskyblue;
}
.div4{
border: 3px solid lightcoral;
clear: left;
}
</style>
</head>
<body>
<h2>float 속성 사용</h2>
<div class="div1"> div1 </div>
<div class="div2">div2 - Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero omnis mollitia eum. Sunt laboriosam cum quibusdam repellat reprehenderit!</div>
<h2>clear 속성 사용</h2>
<div class="div3"> div3 </div>
<div class="div4">div4 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis explicabo saepe,
beatae aut harum quod sint nisi, architecto commodi, quos ea molestiae tempora temporibus. Voluptate voluptatem itaque est. Magnam, neque.</div>
</body>
</html>[ 8. Z - Index (*) ]
<!DOCTYPE html>
<html lang="ko">
<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>z 인덱스</title>
<style>
#box1{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 3;
/* 브라우저 화면을 보았을때, 우리 눈 방향으로 뻗어나오는 축이 Z축이다. */
}
#box2{
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: lightgoldenrodyellow;
z-index: 2;
}
#box3{
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background-color: lightgreen;
z-index: 1;
/* Z 인덱스의 수가 클수록 앞쪽에 나오고, 인덱스 번호가 작을 수록 밑으로 들어가게 된다. (***) */
}
</style>
</head>
<body>
<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
</body>
</html>[ 9. 불투명도 - opacity ]
<!DOCTYPE html>
<html lang="ko">
<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>이미지 불투명도</title>
<style>
a:link{
opacity: 0.5;
}
a:hover{
/* 마우스를 올려 놓았을때 선명하게 보이게 한다. */
opacity: 1.0;
}
img{
opacity: 0.2;
}
img:hover{
/* 마우스를 올려 놓았을때 선명하게 보이게 한다. */
opacity: 1.0;
}
/* 이벤트를 활용하여, 평소에는 흐리게 보였다가 마우스를 올려 놓았을때 선명하게 보이도록 하였다. */
</style>
</head>
<body>
<!-- 불투명도가 작을 수록 투명하게 나온다. -->
<h3>마우스를 올리면 선명하게 보입니다.</h3>
<div>
<a href="https://www.naver.com/">네이버 사이트</a>
</div>
<p></p>
<div>
<img src="https://picsum.photos/id/684/200/150" alt="">
</div>
</body>
</html>[ 10. 불투명도 2 ]
<!DOCTYPE html>
<html lang="ko">
<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>불투명도 2</title>
<style>
div.background{
background: url(./img/dodog.jpg) repeat;
border: 1px solid black;
}
div.box{
margin: 30px;
border: 2px solid lightskyblue;
background-color: #ffffff;
opacity: 0.5;
/* 불투명도를 하였기에, 뒤의 이미지가 비친다. */
}
div.box p{
margin: 5%;
font-weight: bold;
color: black;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="box">
<p>HTML5 웹 프로그래밍</p>
</div>
</div>
</body>
</html>[ 11. 가시성 속성 (*) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>가시성 속성</title>
<style>
.v1{
visibility: hidden;
/* visibility는 보이지만 않을 뿐, 뒤에 공간은 남겨두지만, display는 공간을 완전히 없애버린다. (***) */
border: 1px dotted black;
}
.v2{
visibility: visible;
border: 1px dotted red;
}
.v3{
display: none;
/* display : none은 hidden처럼 숨기는 것이 아니라 없애버리는 것이다. */
/* display none은 개발 도구로도 보이지 않는다. */
border: 1px solid lightseagreen;
}
</style>
</head>
<body>
<div class="v1">
<!-- 보이지 않도록 설정 : 뒤에 공간이 있다. -->
<img src="https://picsum.photos/id/684/200/150" alt="">
</div>
<div class="v2">
<img src="https://picsum.photos/200/150" alt="">
</div>
<div class="v3">
<img src="https://picsum.photos/200/150" alt="">
</div>
<div class="v2">
<img src="https://picsum.photos/200/150" alt="">
</div>
</body>
</html>[ 12. 블록 요소와 인라인 요소 ]
<!DOCTYPE html>
<html lang="ko">
<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>디스 플레이</title>
<style>
ul.in li{
display: inline;
width: 100px;
height: 30px;
/* 인라인 요소의 경우 길이를 조정할 수 없다. 조정하고 싶으면, display : inline-block으로 변경해야 한다. */
background-color: lightgoldenrodyellow;
border: 1px solid lightskyblue;
margin: 3px;
padding: 5px;
/* 항목마다 여백의 공간을 주어진 것이다. */
}
</style>
</head>
<body>
<h4>블록 형식</h4>
<ul>
<li> 구글 사이트</li>
<li>네이버 사이트</li>
<li>다음 사이트</li>
<li>애플 사이트</li>
</ul>
<h4>[ 인라인으로 변경한 후 ]</h4>
<ul class="in">
<li> 구글 사이트</li>
<li>네이버 사이트</li>
<li>다음 사이트</li>
<li>애플 사이트</li>
</ul>
</body>
</html>[ 13. 그래디언트 ]
<!DOCTYPE html>
<html lang="ko">
<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>그래디언트</title>
<style>
#grab1{
height: 70px;
background: red;
background: linear-gradient(270deg,red,yellow);
/* 270deg는 색이 변하는 각도를 의미한다. */
}
#grab2{
height: 70px;
background: lightcoral;
background: linear-gradient(lightcoral,lightyellow,lightgreen);
/* 각도를 지정하지 않으면 위에서 아래로 바뀌게 된다. */
}
#grab3{
height: 70px;
background: red;
background: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
}
#grab4{
height: 70px;
background: red;
background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
/* to right / to top / to bottom / to right를 통해서 방향을 지정할 수도 있다. */
}
#gr1{
height: 70px;
background: red;
background: radial-gradient(lightyellow,lightgreen);
}
#gr2{
height: 70px;
background: red;
background: radial-gradient(lightcoral, lightyellow, lightgreen);
}
#gr3{
height: 70px;
background: red;
background: radial-gradient(lightcoral 5%, lightyellow 15%, lightgreen 60%);
/* 각 색상이 차지하는 비율을 %로 지정할 수 있다. */
}
#gr4{
width: 150px;
height: 100px;
background: red;
background: radial-gradient(circle,lightcoral, lightyellow, lightgreen);
/* 각 색상이 차지하는 비율을 %로 지정할 수 있다. */
}
</style>
</head>
<body>
<h4>2색 선형 그레디언트</h4>
<div id="grab1"></div>
<h4>3색 선형 그레디언트</h4>
<div id="grab2"></div>
<h4>7색 선형 그레디언트</h4>
<div id="grab3"></div>
<h4>2색 선형 그레디언트(to right)</h4>
<div id="grab4"></div>
<p><strong>최신 브라우저를 사용하는 것을 권고합니다.</strong></p>
<hr>
<h4>2색 원형 그레디언트</h4>
<div id="gr1"></div>
<h4>3색 원형 그레디언트</h4>
<div id="gr2"></div>
<h4>3색 원형 그레디언트 ( % ) </h4>
<div id="gr3"></div>
<h4>2색 원형 그레디언트 ( ellipse, circle ) </h4>
<div id="gr4"></div>
</body>
</html>더보기
그래디언트
[ 출력 결과 ]
2색 선형 그레디언트
3색 선형 그레디언트
7색 선형 그레디언트
2색 선형 그레디언트(to right)
최신 브라우저를 사용하는 것을 권고합니다.
2색 원형 그레디언트
3색 원형 그레디언트
3색 원형 그레디언트 ( % )
2색 원형 그레디언트 ( ellipse, circle )
[ 14. 2차원 변환 함수 - translate (**) ]
<!DOCTYPE html>
<html lang="ko">
<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>2차원 변환 함수</title>
<style>
div{
width: 200px;
height: 100px;
border: 1px dotted black;
background-color: yellow;
}
div#box2{
transform: translate(100px, 50px);
/* div태그를 가로로 100px 세로로 50px만큼 이동시켰다. */
/* 이동하는(변하는) 기준은 원래 있던 위치를 기준으로 이동되게 된다. */
/* 좌측 상단을 기준으로 이동시키게 한다. */
}
</style>
</head>
<body>
<div id="box1">박스 1</div>
<div id="box2">박스 2</div>
</body>
</html>[ 15. 2차원 변환 함수 - rotate (*) ]
<!DOCTYPE html>
<html lang="ko">
<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>2차원 변환 함수 - 로테이션 (*)</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px dotted black;
margin: 30px;
text-align: center;
background-color: lightgreen;
}
div#box1{
transform: rotate(45deg);
/* 회전하는 각도를 지정해 줄 수 있다. */
/* 개발자 도구를 사용하여, 회전하는 각도를 연습해 볼 수 있다. */
}
div#box2{
transform: rotate(-90deg);
/* 마이너스는 왼쪽으로 90도 회전했다는 의미이다. */
/* 각도는 -를 줄 수 있는데, 이때는 각도를 시계 반대방향으로 움직이게 된다. */
}
</style>
</head>
<body>
<div>기본 박스</div>
<div id="box1">박스 1</div>
<div id="box2">박스 2</div>
</body>
</html>[ 16. 2차원 변환 함수 - scale ]
<!DOCTYPE html>
<html lang="ko">
<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>2차원 변환 함수 - 스케일</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid black;
margin: 50px;
background-color: skyblue;
}
div#box1{
transform: scale(0.5, 0.5);
}
div#box2{
transform: scale(2, 1.5);
/* 1보다 작으면 축소되고, 1보다 크면 확대되게 된다. */
/* 가로와 세로를 따로 지정해야 한다. */
}
</style>
</head>
<body>
<div>기본 박스</div>
<div id="box1">박스 1 ( 0.5배 축소 )</div>
<div id="box2">박스 2 ( 가로 2배, 세로 1.5배 확대 )</div>
</body>
</html>[ 17. 2차원 변환 함수 - skew ]
<!DOCTYPE html>
<html lang="ko">
<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>2차원 변환 함수 - 스큐</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: blanchedalmond;
}
div#box1{
transform: skewX(20deg);
/* X축으로 기울어진다는 의미이다. */
/* 어느 축으로 기울어지는 지에 대해서는 파악하기 힘들기에 개발도구로 확인하는 것이 좋다. */
/* screw에서는 음수값을 지정할 수 없다. */
}
div#box2{
transform: skewY(-30deg);
}
div#box3{
transform: skew(20deg, 10deg);
/* skew는 x축과 y축을 각자 지정하는 것이다. */
}
</style>
</head>
<body>
<div>기본 박스</div>
<p></p>
<div id="box1">박스 1</div>
<p></p>
<div id="box2">박스 2</div>
<p></p>
<div id="box3">박스 3</div>
</body>
</html>[ 18. 2차원 변환 함수 - 혼합 효과 ]
<!DOCTYPE html>
<html lang="ko">
<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>혼합효과</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: lightslategrey;
font-weight: bold;
}
.c1:hover{
transform-origin: 50% 50% 0px;
transform: translate(0px, 0px) rotate(-45deg) scale(0.7);
background: lightskyblue;
}
</style>
</head>
<body>
<div>
<div class="c1"> 박스 안에 마우스를 올려 놓으면, 무엇이 보이시나요? </div>
</div>
</body>
</html>[ 19. 3차원 변환 함수 1 - 회전 ]
<!DOCTYPE html>
<html lang="ko">
<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>3차원 변환 함수</title>
<style>
div{
background-color: greenyellow;
height: 150px;
width: 150px;
}
.container{
background-color: white;
border: 1px solid black;
}
.transformed:hover{
backface-visibility: visible;
/* 회전했을 때 뒷면을 보여줄지, 보여주지 않을지 지정해 준다. */
transform-origin: 50% 42%;
/* 변하는 중심을 어디에 둘 것인지 지정한다. */
transform: perspective(500px) rotateY(50deg) rotateX(0deg);
/* perspective는 원근감을 의미한다. */
/* 원근감이 작게 설정되면 우리 눈 앞 가까이에 요소가 배치되게 된다.(**) */
/* Y축을 기준으로 회전하였기 때문에 좌우로 움직인다. */
/* X축으로 회전하면 위 아래오 움직인다. */
}
.transformed2:hover{
backface-visibility: visible;
/* 회전했을 때 뒷면을 보여줄지, 보여주지 않을지 지정해 준다. */
transform-origin: 50% 42%;
/* 변하는 중심을 어디에 둘 것인지 지정한다. */
transform: perspective(500px) rotateY(0deg) rotateX(45deg);
/* perspective는 원근감을 의미한다. */
/* hover 이벤트를 사용했기 때문에 마우스를 올려 놓았을 때 바뀐다. */
}
</style>
</head>
<body>
<div class="container">
<div class="transformed">박스1</div>
</div>
<p></p>
<div class="container">
<div class="transformed2">박스2</div>
</div>
</body>
</html>[ 20. 3차원 변환 함수 2 (**) ]
<!DOCTYPE html>
<html lang="ko">
<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>3차원 변환 함수 2</title>
<style>
div{
width: 100px;
height: 100px;
background: yellow;
border: 1px solid orange;
transition: width 2s;
/* 2초 동안 가로 형태로 움직이는 형태를 보여준다. */
}
div:hover{
width: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 63일차 - 미디어 쿼리 / 자바 스크립트 (***) (0) | 2022.05.26 |
|---|---|
| KH 62일차 - 변이효과 / 애니메이션 / 반응형 웹 (*****) (0) | 2022.05.25 |
| KH 60일차 - CSS 기본 다지기 6 ( 선택자 및 박스모델 ) (*****) (0) | 2022.05.23 |
| KH 59일차 - CSS 기본 다지기 5 ( 선택자 ) (*****) (0) | 2022.05.20 |
| KH 58일차 - CSS 기본다지기 4 (***) (0) | 2022.05.19 |
댓글