공부할 내용 (223~276쪽)
1. 위치 속성으로 HTML 요소 배치하기
-positon 속성
HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할때 사용한다.
형식 positon: <속성 값>
속성 값
static - 요소를 기본흐름에 배치한다.
relative - 요소를 기본 흐름에 따라 배치하지만 촤표속성을 사용 할 수 있다.
absolute - 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치한다.
fixed - 위치가 고정되어 있다.
sticky - 지정한 좌표의 임계점에 이르면 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>Document</title>
<style>
body{
margin:0;
}
.box{
width:100px;
height:100px;
}
.red-box{
background-color:aqua;
}
.green-box{
background-color:blueviolet;
position:absolute;
left:100px;
}
.blue-box{
background-color:red;
}
</style>
</head>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>
</html>
2.clear 속성
float 속성을 해제할때 사용한다.
<!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>Document</title>
<style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color:aqua;
float:left;
}
.green-box{
background-color:blueviolet;
float:left;
}
.blue-box{
background-color:red;
clear:left;
}
</style>
</head>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>
</html>
3. 전환 효과 속성 적용하기
-transition-property 속성
전환 효과를 적용할 대상 속성을 지정한다.
-transition-duration 속성
전환효과의 지속시간을 설정하는데 사용한다.
-transition-delay 속성
전환 효과의 지속 시간을 설정하는데 사용한다.
-transiton-timing-function 속성
전환효과의 진행속도를 지정한다.
<!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>Document</title>
<style>
.container{
padding:10px;
color:white;
border:1px dashed black;
}
.ha{
width:100px;
background-color:red;
transition-property:width;
margin-bottom:10px;
transition-duration:1s;
}
.container:hover .ha{
width:200px;
}
.ha:nth-child(1){
transition-timing-function:linear;
}
.ha:nth-child(2){
transition-timing-function:ease;
}
.ha:nth-child(3){
transition-timing-function:ease-in
}
.ha:nth-child(4){
transition-timing-function:ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<div class="ha">linear</div>
<div class="ha">ease</div>
<div class="ha">ease-in</div>
<div class="ha">ease-in-out</div>
</div>
</body>
</html>
4. 애니메이션 속성으로 전환 효과 제어하기
애니메이션 속성은 전환 효과 속성과 다르게 키 프레임을 정의해서 실행한다.
@keyframes <키 프레임명>{
0% {}
n% {}
}
- animation-name 속성
특정요소에서 적용할 키 프레임명을 지명한다.
- animation-duration 속성
애니메이션 지속 시간을 설정한다.
- animation-delay 속성
애니메이션 실행을 지연시킨다.
- animation-fill-mode 속성
애니메이션이 끝나도 원래상태로 돌아가지 않고 애니메이션이 종료된 시점의 상태를 유지한다.
-anmimation-iterator-count 속성
애니메이션의 실행 횟수를 조절할수 있다.
- animation-play-state 속성
애니메이션 재생 상태를 지정한다.
<!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>Document</title>
<style>
div{
width:100px;
height:100px;
animation-name:bgchange;
animation-duration:1s;
animation-fill-mode:both;
animation-delay:3s;
animation-iteration-count:6;
}
@keyframes bgchange {
0%{background-color:aqua;}
25%{background-color:red;}
50%{background-color:blueviolet;}
100%{background-color:orange;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5. transform 속성
요소에 특정 변형효과를 지정할 수 있다.
-구글 폰트 적용하기
구글 폰트에는 수백가지의 다양한 글꼴이 있으며 사용하기도 쉽다
구글 웹폰트로 검색하여 사용이 가능하다.
-아이콘 폰트 적용하기
다양한 아이콘을 웹 폰트를 사용하는 것처럼 간단하고 쉽게 사용하는 기술이다.
'학습단 > HTML+CSS+Javascript 학습단' 카테고리의 다른 글
| 7장 자바스크립트 시작하기 (0) | 2023.03.15 |
|---|---|
| 6장 효과적인 레이아웃을 위한 CSS 속성 다루기 (0) | 2023.03.14 |
| 5장 css 필수 속성 다루기 (0) | 2023.03.11 |
| 4장 CSS 선택자 다루기 (0) | 2023.03.10 |
| 3-2장 실무에서 자주 사용하는 HTML 필수 태그 다루기 (0) | 2023.03.09 |
