기록/자바_국비
[배운내용정리] 0114 자바 국비교육 _ HTML_CSS
mois
2021. 1. 14. 20:10
728x90
2021년 01월 14일 9시 ~ 15시 30분 zoom으로 수업 진행
<!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 type="text/css">
.c1 {
background-color: orange;
}
.c2 {
background-color: palevioletred;
}
.c3 {
background-color: powderblue;
}
.c4 {
background-color: greenyellow;
}
li {
list-style: none;
width: 100px;
height: 70px;
text-align: center;
float: left;
padding-top: 30px;
border-radius: 50px 50px 10px 100px;
}
</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
html 요소의 모양, 크기, 위치들을 변형시킨다.
| 속성 | 기능 |
| translate | 현재 위치에서 해당 요소를 주어진 x축과 y축 만큼 이동시킨다. |
| rotate | 주어진 각도가 양수일 경우 시계 방향으로, 음수일 경우 반시계 방향으로 회전시킨다. |
| scale | 주어진 배율만큼 늘리거나 줄인다. 주어진 배율이 1보다 크면 늘리고, 0보다 크거나 1보다 작으면 줄인다. |
| skew | 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울인다. |
transtion
정해진 시간동안 요소를 부드럽게 변화시킨다.
<!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 type="text/css">
.trans {
background-color: indianred;
width: 200px;
height: 200px;
color: white;
font-size: 30pt;
}
#tlate {
transform: translate(50px, 50px);
}
#trotate {
transform: rotate(90deg);
}
#tscale {
transform: scale(0.5, 0.5);
}
#tskew {
transform: skew(20deg, 30deg);
}
#trans {
transition: width 0.5s, background 1.5s linear, transform 1.5s;
}
#trans:hover {
width: 800px;
background-color: teal;
transform: translate(300px, 0px);
}
li {
width: 500px;
background-color: coral;
margin-bottom: 3px;
font-size: 30pt;
font-weight: bold;
list-style-type: none;
cursor: pointer;
transition: width1s linear, color 1s linear, letter-spacing 1s;
}
li:hover {
width: 800px;
color: cornflowerblue;
letter-spacing: 5px;
}
</style>
</head>
<body>
<h2>transform - translate</h2>
<div id="tlate" class="trans">tanslate(x, y) : 위치 이동</div>
<hr>
<h2>transform - rotate</h2>
<div id="trotate" class="trans">rotate(deg) : 회전</div>
<hr>
<h2>transform - scale</h2>
<div id="tscale" class="trans">scale(x, y) : 크기</div>
<hr>
<h2>transform - skew</h2>
<div id="tskew" class="trans">skew(deg, deg) : 변형</div>
<hr>
<h2>transition 속성 전환</h2>
<div id="trans" class="trans">transition</div>
<div>
<h2>Moving MainMenu</h2>
<ul>
<li>Company</li>
<li>Product</li>
<li>Service</li>
<li>Community</li>
</ul>
</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 type="text/css">
div {
width: 100px;
height: 100px;
font-size: 30pt;
background-color: cornflowerblue;
word-wrap: break-word;/*글씨가 범위 벗어나면 잘라내서 범위에 맞게 조정*/
animation: mybox 2s;
}
@keyframes mybox {
/*원하는 타이밍에 원하는 상태로 지정*/
0% {
width: 15px;
height: 150px;
background: darkblue;
transform: translate(10px, 10px);
}
25% {
width: 200px;
height: 200px;
background: chartreuse;
transform: translate(50px, 50px);
}
50% {
width: 250px;
height: 250px;
background: orange;
transform: translate(100px, 100px);
}
75% {
width: 300px;
height: 300px;
background: blueviolet;
transform: translate(50px, 50px);
}
100% {
width: 200px;
height: 200px;
background: red;
transform: translate(10px, 10px);
}
}
</style>
</head>
<body>
<h1>Animation 효과</h1>
<div>
Animation
</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 type="text/css">
p {
column-count: 4;
column-gap: 50px;
column-rule: 2px dotted red;
}
</style>
</head>
<body>
<p>강아지는 개의 새끼를 일컫는다.[1] 갓 태어난 강아지의 체중은 견종에 따라 크게 차이가 나며
소형 견종들은 100~200g, 대형 견종들은 400~500g, 초대형 견종들은 700g 까지 나간다.[1]
강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며[2],
정서적인 변화를 겪기도 한다.[3] 여러가지 견종이 있으며, 사람의 지시를 잘따르는 동물이다.
죽은 강아지를 자신의 소유가 아니라 산과 공원의 장소에 묻으면 불법이며, 최대 100만원 이하의 벌금을 낸다.[4]
고양이는 인류로 부터 오랫동안 반려동물로 사랑받아 왔다. 실례로 고대 이집트의 벽화에는 고양이를 새 사냥에
이용하는 그림이 있다. 고양이와 인간의 공생관계는 농경의 발달로 이집트 문명이 발생했을 무렵 곡식을 저장하는
창고에 모여든 쥐를 따라온 것이 시작으로 알려져 있다. 때문에 고양이는 길들여진 동물인 가축의 특성을 전혀
지니고 있지 않으며, 가축이라기보다는 인간과 공생관계라고 보는 것이 맞다.</p>
</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 type="text/css">
.polaroid{
border: 1px solid gray;
width: 300px;
position: relative;
top: 50px;
left: 100px;
padding: 10px 10px 20px 10px;
box-shadow: 5px 5px 3px gray;
}
.rotate {
transform: rotate(10deg);
}
.caption {
text-align: center;
font-weight: bold;
font-size: 20pt;
color: cornflowerblue;
}
</style>
</head>
<body>
<h2>폴라로이드 느낌의 사진 만들기</h2>
<hr>
<div class="polaroid rotate">
<!-- 와 이렇게 선언하면 클래스가 polaroid , rotate 두개 인겅가봄 -->
<img src="image/jin1.png" width="300" height="300">
<p class="caption">귀여운 쿼카쿼카</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>Document</title>
<style type="text/css">
.navi {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
.navi li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
background-color: cornflowerblue;
}
.navi li a{
display: block;
font-weight: 600;
font-size: 15pt;
padding: 5px 25px;
color: black;
text-decoration: none;
}
.navi li a:hover {
color: white;
}
.navi li ul {
position: absolute;
left: 0;
width: 200px;
background-color: dodgerblue;
list-style: none;
margin: 0;
padding: 0;
opacity: 0;
}
.navi li:hover ul {
opacity: 1;
}
/* ------------------------------------------------- */
.navi li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background-color: none;
}
/* ------------------------------------------------- */
.navi li:hover ul li {
height: 30px;
line-height: 30px;
padding: 5px 0;
}
.navi li ul li a:hover {
background-color: dodgerblue;
}
/* */
.navi li {
transition: all 0.2s;
}
.navi li a {
transition: all 0.6s;
}
.navi li ul{
transition: all 1s;
}
.navi li ul li{
transition: height 0.5s;
}
</style>
</head>
<body>
<h2>서브 메뉴가 펼쳐지는 네비게이션 만들기</h2>
<hr>
<ul class="navi">
<li><a href="">Home</a></li>
<li>
<a href="">웹개발</a>
<ul>
<li><a href="">웹 디자인</a></li>
<li><a href="">HTML5 + CSS</a></li>
<li><a href="">JQuery</a></li>
<li><a href="">웹 어플리케이션</a></li>
</ul>
</li>
<li>
<a href="">게시판</a>
<ul>
<li><a href="">QnA</a></li>
<li><a href="">방명록</a></li>
</ul>
</li>
</ul>
</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 type="text/css">
#gallery{
border: 10px solid black;
height: 300px;
width: 450px;
margin-left: auto;
margin-right: auto;
overflow: visible;
background-color: gray;
box-shadow: gray 10px 10px 15px;
}
#gallery img {
float: left;
width: 300px;
height: 200px;
}
#gallery ul {
margin-left: -30px;
}
#gallery ul li{
list-style-type: none;
display: inline-table;
padding: 10px;
}
.pic {
width: 320px;
height: 240px;
opacity: 0;
visibility: hidden;
position: absolute;
margin-top: 10px;
margin-left: -20px;
border: 1px solid black;
box-shadow: gray 2px 2px 10px;
transition: all 0.7s linear;
}
.small:hover {
cursor: pointer;
}
#gallery ul li:hover .pic {
width: 320px;
height: 240px;
opacity: 1;
visibility: visible;
float: right;
}
</style>
</head>
<body>
<div id="gallery">
<ul>
<li>
<img src="image/jin1.png" class="small">
<img src="image/jin1.png" class="pic">
</li>
<li>
<img src="image/pkinJin.png" class="small">
<img src="image/pkinJin.png" class="pic">
</li>
<li>
<img src="image/V.png" class="small">
<img src="image/V.png" class="pic">
</li>
<li>
<img src="image/cat.png" class="small">
<img src="image/cat.png" class="pic">
</li>
<li>
<img src="image/dog.png" class="small">
<img src="image/dog.png" class="pic">
</li>
</ul>
</div>
</body>
</html>