데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 25일차 강의 정리
CSS
10. 전환, 변환
실습 1. transition
<!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 50px;
background: red;
/*
transition-property: all;
transition-duration: 2s;
transition-property: background;
transition-duration: 7000.as
*/
/* /속성, 지속시간, d*/
transition: 1s cubic-bezier(0.65, 0, 0.66,-0.56 )
}
.box::hover {
width: 300px;
background: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
실습 2. transformation
<!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>Document</title>
<style>
div[class^="box"] {
width: 200px;
height: 200px;
background: orange;
margin: 50px;
font-size: 30px;
text-align: center;
line-height: 200px;
transition: 2s;
}
.box1:hover {
transform:rotate(-720deg);
}
.box2:hover {
transform: translateX(100px);
}
.box3:hover {
transform: scale(0.7, 1.5);
}
.box4:hover {
transform: skew(0, 20deg);
}
.box5:hover {
transform: translate(30px, -20px) skewX(-20deg) scale(0.7);
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</body>
</html>
11. animation
실습 1. name, duration
<!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: green;
}
.box:hover {
/*
animation-name: grow-up;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-direction: alternate-reverse;
*/
animation: grow-up 1s ease-in-out 1s infinite alternate;
}
@keyframes grow-up {
0% {
width: 100px;
}
50% {
width: 500px;
}
100% {
width: 300px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
실습 2. direction
<!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
margin: 30px;
animation: move 1s linear 0.5s infinite alternate-reverse;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(100px, 0);
}
50% {
transform: translate(100px, 100px);
}
75% {
transform: translate(0px, 100px);
}
100% {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
실습 3. fill-mode
<!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
margin: 30px;
animation: move 2s 2s;
animation-fill-mode: forwards;
/*
animation-fill mode 속성들
none : 기존 위치 시작 -> 애니메이션 시작 위치 이동 -> 애니메이션 동작-> 기존 위치로 가서 종료
forwards : 기존 위치에서 시작 -> 애니메이셔 시작 위치 이동 -> 애니메이션 동작 -> 애니메이션 종료 위치에서 종료
backwards : 애니메이션 시작 위치에 시작 -> 동작 후 기존 위치로 이동
both : 애니메이션 시작 위치에서 시작 -> 동작 후 애니메이션 종료 지점에서 종료.
*/
}
@keyframes move {
0% {
transform: translate(100px, 100px);
background: dogerblue;
}
100% {
transform: translate(300px, 100px);
background: yellowgreen;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
실습 4. play-state
<!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
margin: 30px;
animation: size-up 3s linear infinite alternate;
text-align: center;
line-height: 100px;
}
@keyframes size-up {
0% {
width: 100px;
}
100% {
width: 100%;
}
}
.box::before {
content: '재생중';
font-size: 24px;
font-weight: bold;
color: #fff;
}
.box:hover {
animation-play-state: paused;
background-color: skyblue;
}
.box:hover::before {
content: '중지됨';
color: #000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
프레임워크
<!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 50px;
background: red;
/*
transition-property: all;
transition-duration: 2s;
transition-property: background;
transition-duration: 7000.as
*/
/* /속성, 지속시간, d*/
transition: 1s cubic-bezier(0.65, 0, 0.66,-0.56 )
}
.box::hover {
width: 300px;
background: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!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>Document</title>
<style>
div[class^="box"] {
width: 200px;
height: 200px;
background: orange;
margin: 50px;
font-size: 30px;
text-align: center;
line-height: 200px;
transition: 2s;
}
.box1:hover {
transform:rotate(-720deg);
}
.box2:hover {
transform: translateX(100px);
}
.box3:hover {
transform: scale(0.7, 1.5);
}
.box4:hover {
transform: skew(0, 20deg);
}
.box5:hover {
transform: translate(30px, -20px) skewX(-20deg) scale(0.7);
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</body>
</html><!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: green;
}
.box:hover {
/*
animation-name: grow-up;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-direction: alternate-reverse;
*/
animation: grow-up 1s ease-in-out 1s infinite alternate;
}
@keyframes grow-up {
0% {
width: 100px;
}
50% {
width: 500px;
}
100% {
width: 300px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
margin: 30px;
animation: move 1s linear 0.5s infinite alternate-reverse;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(100px, 0);
}
50% {
transform: translate(100px, 100px);
}
75% {
transform: translate(0px, 100px);
}
100% {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
margin: 30px;
animation: move 2s 2s;
animation-fill-mode: forwards;
/*
animation-fill mode 속성들
none : 기존 위치 시작 -> 애니메이션 시작 위치 이동 -> 애니메이션 동작-> 기존 위치로 가서 종료
forwards : 기존 위치에서 시작 -> 애니메이셔 시작 위치 이동 -> 애니메이션 동작 -> 애니메이션 종료 위치에서 종료
backwards : 애니메이션 시작 위치에 시작 -> 동작 후 기존 위치로 이동
both : 애니메이션 시작 위치에서 시작 -> 동작 후 애니메이션 종료 지점에서 종료.
*/
}
@keyframes move {
0% {
transform: translate(100px, 100px);
background: dogerblue;
}
100% {
transform: translate(300px, 100px);
background: yellowgreen;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
margin: 30px;
animation: size-up 3s linear infinite alternate;
text-align: center;
line-height: 100px;
}
@keyframes size-up {
0% {
width: 100px;
}
100% {
width: 100%;
}
}
.box::before {
content: '재생중';
font-size: 24px;
font-weight: bold;
color: #fff;
}
.box:hover {
animation-play-state: paused;
background-color: skyblue;
}
.box:hover::before {
content: '중지됨';
color: #000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>부트스트랩은 현재 버전이 5버전까지 나와 있으나, 여기서는 bootstarpk의 3버전 기준으로 사용하기로 한다.
12. 부트스트랩
실습 1. form-sample
<!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>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="user">이름</label>
<input type="text" class="form-control" id="user"> <br>
<label for="pwd">비밀번호</label>
<input type="password" class="form-control" id="pwd"> <br>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>실습 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>Document</title>
<!-- 합쳐지고 최소화된 원본 부트스트랩 css -->
<link rel="stylesheet" href="./css/bootstrap.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="./css/bootstrap-theme.css">
<!-- 자바스크립트 기능 사용을 위한 원본 파일 -->
<link rel="stylesheet" href="./js/bootstrap.js">
<style>
div[class^="col"] {
border: 1px solid red;
padding: 10px;
}
.inner {
border-color: blue;
background: #ccc;
}
</style>
</head>
<body>
<!--
bootstrap의 grid 시스템은
하나의 행에 박스를 수평으로 쉽게 배치할 수 있습니다.
col-md-?의 총 합은 한 행당 12가 되어야 합니다.
그리드의 class 속성에는
xs: 항상 가로로 배치 (모바일)
sm: 768px 이하에서는 세로로 표시 시작 (태블릿)
md: 992px 이하에서는 세로로 표시 시작 (노트북, 데스크탑)
lg: 1200px 이하에서 세로로 표시 시작 (데스크탑)
-->
<!-- 클래스 이름이 container 안에서 작성하는 것을 권장. -->
<div class="container">
<!-- 블록 요소의 한 행을 차지하게 하는 박스 영역. -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-1 col-lg-2">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="col-md-6 inner">1-1박스</div>
<div class="col-md-6 inner">1-2박스</div>
</div>
<div class="col-md-4">
<div class="col-md-6 inner">1-1박스</div>
<div class="col-md-6 inner">1-2박스</div>
</div>
</div>
<div class="row">
<div class="col-md-5">col-md-5</div>
<div class="col-md-offset-2 col-md-5">col-md-5</div>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-4">col-md-4</div>
<div class="col-md-7">col-md-7</div>
</div>
</div>
</body>
</html>실습 3. 레이아웃 예시
<!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>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
header {
height: 100px;
background: skyblue;
border-radius: 15px;
padding: 10px;
margin: 10px auto;
text-align: center;
line-height: 100px;
}
ul {
background: #ccc;
padding: 10px;
border-radius: 10px;
list-style: none;
}
#banner {
background: #ccc;
height: 200px;
padding: 10px;
border-radius: 10px;
}
footer {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h2>그리드 시스템을 이용한 레이아웃</h2>
</header>
<div class="row">
<div id="menu" class="col-md-2">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<div id="content" class="col-md-8">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nulla velit. Vivamus
facilisis vel quam vel condimentum. Phasellus facilisis mi id convallis gravida. Nam egestas
diam enim, eu hendrerit turpis ornare eget. Sed justo massa, congue id feugiat a,
condimentum quis ipsum. Phasellus convallis, ex nec molestie gravida, nunc dui varius quam,
mollis dictum urna eros eu enim. Nullam tristique sollicitudin ultrices. Suspendisse
vulputate, mi id suscipit mollis, lectus sapien egestas magna, sit amet fermentum risus eros
a ipsum. In quam diam, auctor eu urna eget, ornare accumsan odio.
</p>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nulla velit. Vivamus
facilisis vel quam vel condimentum. Phasellus facilisis mi id convallis gravida. Nam egestas
diam enim, eu hendrerit turpis ornare eget. Sed justo massa, congue id feugiat a,
condimentum quis ipsum. Phasellus convallis, ex nec molestie gravida, nunc dui varius quam,
mollis dictum urna eros eu enim. Nullam tristique sollicitudin ultrices. Suspendisse
vulputate, mi id suscipit mollis, lectus sapien egestas magna, sit amet fermentum risus eros
a ipsum. In quam diam, auctor eu urna eget, ornare accumsan odio.
</p>
</div>
</div>
</div>
<div id="banner" class="col-md-2">
여기는 기타 부가적인 배너 자리
</div>
</div>
<hr>
<footer>
여기는 하단 푸터 부분입니다.
</footer>
</div>
</body>
</html>실습 4. table-sample
<!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>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="container">
<h4 class="text-primary">기본 table 코드</h4>
<table class="table table-hover table-bordered table-condensed">
<thead>
<tr class="warning">
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>테이블 테스트 테이블 테스트</td>
<td>홍길동</td>
</tr>
<tr>
<td>2</td>
<td>테이블 테스트 테이블 테스트</td>
<td>김철수</td>
</tr>
<tr>
<td>3</td>
<td>테이블 테스트 테이블 테스트</td>
<td>박영희</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>실습 5. modal-sample
<!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>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap-theme.css">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#testModal">
모달창 열기
</button>
<div id="testModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">모달 제목</h4>
</div>
<div class="modal-body">
<p>모달 내용은 어쩌고 저쩌고....</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>Author And Source
이 문제에 관하여(데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 25일차 강의 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@crisine/데이터융합-JAVA응용-SW개발자-기업-채용연계-연수과정-25일차-강의-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
