relative : 요소 자기 자신을 기준으로 배치 absolute : 부모를 기준으로 배치
absolute : 부모를 기준으로 배치
static : 기본값(기준없음)
fixed : 뷰 포트 기준으로 배치 , 스크롤 내려도 고정
<!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>position</title>
<style>
/*
position 속성 값
relative : 요소 자기 자신을 기준으로 배치
absolute : 부모를 기준으로 배치
static : 기본값(기준없다)
fixed : 뷰 포트 기준으로 배치 , 스크롤 내려도 고정
*/
#box{
width: 550px;
border: 1px dotted red;
}
p{
width: 130px;
height: 100px;
color: white;
position: relative;
}
.myred{
background-color: red;
}
.myblue{
background-color: blue;
position: absolute;
left: 100px;
top: 30px;
}
.mygreen{
background-color: green;
position: relative;
left: 30px;
top: -30px;
/* 여백의 픽셀이라고 생각 */
}
.myred:hover{z-index : 100;}
.myblue:hover{z-index : 100;}
.mygreen:hover{z-index : 100;}
#fixed{
width:100px;
height: 300px;
background-color: silver;
position: fixed;
right: 50px;
top: 100px;}
</style>
</head>
<body>
<div id="box">
<p class="myred">박스의 크기와 위치를 잘 살펴보아야 합니다.</p>
<p class="myblue">박스의 포지션 속성을 바꿔가며 테스트 해 보아야 합니다.</p>
<p class="mygreen">포지션을 이해하기위해서는 테스트가 절대적으로 팔요합니다.</p>
</div>
<div id="fixed">
fixed!
</div>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br>
</body>
</html>
border
<!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>border</title>
<style type="text/css">
li{
width:100px;
height: 70px;
text-align: center;
float: left;
list-style: none;
padding-top: 30px;
border-radius: 50px;
}
.c1{
background-color: aqua;
}
.c2{
background-color: antiquewhite;
}
.c3{
background-color: blue;
}
.c4{
background-color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li class="c1">a</li>
<li class="c2">b</li>
<li class="c3">c</li>
<li class="c4">d</li>
</ul>
</body>
</html>
-> 박스의 모양을 변경시킴
transform
태그의 속성을 변환
<!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>transform</title>
<style>
.transform{
width: 100px;
height: 100px;
background-color: red;
color: white;
font-size: 20pt;
word-wrap: break-word;
}
#tlate{
transform: translate(20px,20px);
}
#trotate{
transform: rotate(70deg);
}
#tscale{
transform: scale(1.5,1.5);
}
#tskew{
transform: skew(40deg,15deg);
}
/* transition :정해진 시간동안 태그(요소)의 속성값을 부드럽게 변환 */
#tran{
transition: width 0.5s,background 1.5s,transform 1.5s;
}
#tran:hover{
width: 400px;
background-color: yellowgreen;
transform: translate(100px,0px);
}
li{
width: 400px;
background-color: pink;
margin-bottom: 5px;
padding-left: 3px;
font-size: 30pt;
font-weight: bold;
list-style-type: none;
transition: width 0.5s,color 1s ,letter-spacing 0.5s;
cursor: pointer;
}
li:hover{
width: 800px;
color:blueviolet;
letter-spacing: 5px;
}
</style>
</head>
<body>
<h2>transform - translate</h2>
<div id="tlate" class="transform">translate(x,y) : 위치이동</div>
<h2>transform - rotate</h2>
<div id="trotate" class="transform">rotate(deg) : 회전</div>
<h2>transform-scale</h2>
<div id="tscale" class="transform">scale(x,y) : 크기</div>
<h2>transform - skew </h2>
<div id="tskew" class="transform">skew(deg,deg) : 변형</div>
<h2>transition 속성전환 </h2>
<div id="tran" class="transform">transition</div>
<div>
<h2>moving menu</h2>
<ul>
<li>java</li>
<li>mysql</li>
<li>css</li>
<li>javascript</li>
</ul>
</div>
</body>
</html>
animation
<!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>animation</title>
<style type="text/css">
div{
width :100px;
height : 100px;
font-size: 30pt;
background-color: red;
word-wrap: break-word;
animation: mybox 8s infinite;
}
/* keyframe정의 -> @keyframes */
@keyframes mybox{
0%{width: 150px; height: 150px; background-color: yellow; transform: translate(10px,10px);}
25%{width: 550px; height: 350px; background-color: yellow; transform: translate(1013px,102px);}
50%{width: 250px; height: 250px; background-color: orange; transform: translate(120px,460px);}
75%{width: 200px; height: 3000px; background-color: yellow; transform: translate(700px,430px);}
100%{width: 100px; height: 100px; background-color: red;}
}
</style>
</head>
<body>
<h1>animation 효과</h1>
<div>animation</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| [CSS]CSS#4(반응형) (0) | 2024.06.28 |
|---|---|
| [CSS] CSS#2 (0) | 2024.06.13 |
| [CSS] CSS #1 (1) | 2024.06.11 |
| [CSS]선택자 (0) | 2024.06.05 |
| [CSS]인라인스타일시트 / 외부스타일시트 (0) | 2024.05.26 |