CSS 트랜지션 효과
css속성이 변할 때 애니메이션 효과를 주는 기능으로 트랜지션을 사용하면 상태 변화가 부드럽게 이루어질 수 있다.
- transition-property: 애니메이션이 적용될 속성
- transition-duration: 애니메이션 지속 시간
- transition-timing-function: 애니메이션 속도 곡선
- transition-delay: 애니메이션 시작 전 대기 시간
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트랜스폼</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #007bff;
transition: background-color 0.5s ease, transform 0.5s ease;
}
.box:hover {
background-color: #0056b3;
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
트랜스폼 애니메이션 효과
요소의 위치, 크기, 회전 같은 것들을 조절할 떄 사용하는데 transform 속성으로 2D나 3D변형 적용 가능하다
- translate(): 이동
- rotate(): 회전
- scale(): 크기를 조절
- skew(): 기울임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트랜스폼</title>
<style>
.transform-box {
width: 100px;
height: 100px;
background-color: #28a745;
transition: transform 0.3s ease;
}
.transform-box:hover {
transform: rotate(50deg) translateX(45px) scale(1.2);
}
</style>
</head>
<body>
<div class="transform-box"></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>미디어쿼리y</title>
<style>
.container {
padding: 20px;
background-color: #f8f9fa;
}
@media (max-width: 768px) {
.container {
padding: 10px;
background-color: #e9ecef;
}
}
@media (max-width: 480px) {
.container {
padding: 5px;
background-color: #dee2e6;
}
}
</style>
</head>
<body>
<div class="container">
창 크기에 색 바뀜
</div>
</body>
</html>
부트스트랩 CDN 설정
부트스트랩을 사용하는 간단한 방법은 CDN을 사용하는 것이다.CDN은 부트스트랩의 CSS, JavaScript 파일을 웹에서 직접 불러와서 사용하는 방식이다.(따로 파일을 다운 받을 필요 없다)
부트스트랩 사용
그리드 시스템: container, row, col사용한다
<div class="container">
<div class="row">
<div class="col-md-4">1열</div>
<div class="col-md-4">2열 2</div>
<div class="col-md-4">3열 3</div>
</div>
</div>
버튼: btn클래스로 버튼만들고 btn-primary, btn-secondary 같은 걸로 추가해서 색깔 조절한다
<button type="button" class="btn btn-primary">Primary Button</button>
부트스트랩 모달창 데이터 읽/쓰기
모달은 팝업창을 제공하는 컴포넌트이며 모달을 사용해서 데이터를 입력받고, 출력할 수 있다.
크게 3가지로 구성하는데 아래와 같다.
- 버튼: 모달을 여는 버튼
- 구조: .modal, .modal-dialog, .modal-content 등이 있다. 내부에는 제목, 본문 등이 포함된다
- 입력받은 데이터를 처리하려면 JavaScript를 사용하여 값을 읽고 원하는 작업을 수행할 수 있다
