box-sizing : 박스 너비 기준
content-box : (기본값) 크기 변경, 기존 width/height + 외부에 padding, border, margin 더함
border-box : 처음 설정된 크기 유지, padding 등은 테두리 안쪽으로 추가됨
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<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>박스 너비 기준 정하기</title>
<style>
.box{
width: 300px;
height: 150px;
margin: 10px;
padding: 30px;
}
.box1{
box-sizing: content-box;
border: 2px solid rgb(255, 180, 180);
background-color: beige;
}
.box2{
box-sizing: border-box;
border: 2px solid rgb(170, 170, 255);
background-color: azure;
}
</style>
</head>
<body>
<div class="box box1">
<p>content박스로 구성</p>
</div>
<div class="box box2">
<p>border박스로 구성</p>
</div>
</body>
|
cs |
float : 기본 레이아웃 흐름에서 벗어나 페이지의 왼쪽/오른쪽으로 이동
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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>float 속성</title>
<style>
.girl {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img class="girl" src="images/girl.jpg" alt="">
<h1>소녀들</h1> <!-- h1,p : 블록 -->
<p>목요일인 16일은 전국이 대체로 흐린 가운데 중부 내륙지방을 중심으로 비가 내리겠다. 수도권과 충남권, 전북은 아침까지, 충북은 오전까지, 강원내륙·산지와 경북권은 오후까지 비가 이어지겠다. 예상 강수량은 5∼20㎜다.</p>
</body>
|
cs |
column 관련
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<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>다단 편집</title>
<style>
.area{
-webkit-column-count: 3; /*vendor prefix*/
-moz-column-count: 3;
column-count: 3;
column-gap: 20px; /*단 사이 간격*/
column-rule: 2px dotted red; /*단 사이 선*/
background-color: beige;
}
.area h2{
column-span: all; /*다단에서 해제*/
text-align: center;
}
</style>
</head>
<body>
<div class="area">
<h2>기온 점차 오름세, 기온 변화↑...내일 낮 더위</h2>
<p>서울 등 수도권은 여전히 하늘이 흐린 상태고, 기온도 21도 정도로 예년 수준을 크게 밑돌고 있습니다.</p>
<p>하지만 충청 이남 지방은 비교적 맑은 날씨를 회복하면서 기온이 빠르게 오르는 모습인데요.</p>
<p>현재 이들 지역은 대부분 25도 안팎까지 기온이 올랐고, 특히 영남 지방은 28도를 웃돌며 다소 더운 날씨가 이어지고 있습니다.</p>
</div>
</body>
|
cs |
transition (전환)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<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>전환 효과</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: azure;
border: 2px solid blue;
/* transition-property: width;
transition-duration: 2s;
transition-timing-function: ease; 빨라졌다 느려짐
transition-delay: 1s; 1초 후 적용 */
transition: width 2s ease, height 5s ease, border 3s; /*property duration timing*/
/* transition: all 2s; */
}
#box:hover{
width: 500px;
height: 500px;
border: 10px dotted greenyellow;
}
img{
opacity: 0.1;
transition: opacity 3s;
}
img:hover{
opacity: 1;
}
</style>
</head>
<body>
<div id="box"></div>
<img src="images/car_green.jpg" alt="">
</body>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<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>전환 효과 응용</title>
<style>
h2{
text-align: center;
}
.menu{
list-style-type: none;
text-align: center;
}
.menu a {
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 20px;
padding: 10px;
margin-bottom: 5px;
text-decoration: none;
color: white;
background-color: #abc;
transition: width 2s ease, color 2s;
}
.menu a:hover {
width: 450px;
color: darkblue;
}
</style>
</head>
<body>
<h2>움직이는 메뉴</h2>
<ul class="menu">
<li><a href="#">회사소개</a></li>
<li><a href="#">제품소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">자료실</a></li>
</ul>
</body>
|
cs |
transform (변형)
1. translate(이동)
2. scale(크기)
3. rotate(회전)
4. skew(왜곡,비틈)
참고:
https://webclub.tistory.com/432
http://ioio2034a.dothome.co.kr/animation_css/transform.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<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>변형 효과</title>
<style>
.translate{
transition: transform 2s;
}
.translate:hover{
transform:translate(100px,300px); /*x, y좌표 이동 거리*/
}
.scale{
transition: transform 2s;
}
.scale:hover{
transform: scale(0.5); /* n배 확대/축소 */
}
.rotate{
transition: transform 2s;
}
.rotate:hover{
transform: rotate(45deg); /*3차원 이미지 => x y z*/
}
.skew{
transition: transform 2s;
}
.skew:hover{
transform: skew(50deg,50deg); /*x, y축 기준 n도 기울임 (반시계)*/
/*하나의 값만 지정시 skewX 기능*/ }
</style>
</head>
<body>
<img class="translate" src="images/car_purple.jpg" alt="">
<br><img class="scale" src="images/car_red.jpg" alt="">
<br><img class="rotate" src="images/car_green.jpg" alt="">
<br><img class="skew" src="images/car_purple.jpg" alt="">
</body>
|
cs |
※ screw
양수값 => screwX : (x축 고정) y축을 반시계방향으로 n도 기울임 / screwY: (y축 고정)x축을 시계방향으로 n도 기울임
X축은 좌/우로, Y축은 상/하로 기울이는 효과
- 네이버 이미지확대 기능 (크기는 고정, 틀 안에서 이미지만 확대되어 일부 잘리게)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<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>변형</title>
<style>
div{
width: 250px;
height: 240px;
border: 1px solid black;
overflow: hidden;
}
img{
transition: transform 0.4s;
}
img:hover{
transform: scale(1.1);
}
p{
width: 200px;
height: 20px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<img src="images/girl.jpg" alt="">
</div>
<p>오늘은 목요일 아침부터 비가 내렸다</p>
</body>
|
cs |
- 변형 기준점 변경
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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>변형 관련 속성</title>
<style>
div{
width: 500px;
height: 300px;
border: 1px solid;
padding-top: 100px;
text-align: center; /*블록 내 인라인요소 조정*/
}
div img{
transform-origin: left top; /*기준점 설정*/
transition: transform 2s;
}
div img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="images/car_green.jpg" alt="">
</div>
</body>
|
cs |
- 원근감
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<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>변형 관련 속성 (원근감)</title>
<style>
div{
width: 250px;
height: 240px;
border: 1px solid;
display: inline-block;
margin-right: 10px;
}
.rotatex{
transform: rotateX(50deg); /*x축 기준 n도 회전 (양수 시계방향)*/
}
#per{
perspective: 300px; /*회전하는 방향으로 원근감 생성*/
}
</style>
</head>
<body>
<div>
<img src="images/girl.jpg" alt="">
</div>
<div id="nop">
<div class="rotatex">
<img src="images/girl.jpg" alt="">
</div>
</div>
<div id="per">
<div class="rotatex">
<img src="images/girl.jpg" alt="">
</div>
</div>
</body>
|
cs |
- rotate
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<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>변형 속성 응용</title>
<style>
div{
width: 200px;
height: 200px;
}
.area{
border: 1px solid;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
perspective: 300px;
}
.box{
background-color: rgb(223, 223, 255); /*보라*/
transform: rotateY(45deg);
}
.inBox{
background-color: rgb(255, 255, 187); /*노랑*/
transform-origin: left top;
transform: rotateX(45deg);
}
#tr1{
transform-style: flat; /*하위요소를 평면 처리*/
}
#tr2:hover{
transform-style: preserve-3d; /*하위요소에 3d효과 적용*/
}
</style>
</head>
<body>
<div class="area">
<div class="box" id="tr1">
<div class="inBox"></div>
</div>
</div>
<div class="area">
<div class="box" id="tr2">
<div class="inBox"></div>
</div>
</div>
</body>
|
cs |
- border 응용 - 사용자 지정 마커
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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>
p{
width: 0;
height: 0;
border: 1px solid;
border-width: 10px;
border-top-color:red;
border-bottom-color: lime;
border-right: none; /*네모 반 삭제*/
border-top-color: white;
border-bottom-color: white;
}
</style>
</head>
<body>
<p></p>
</body>
|
cs |
애니메이션
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<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>애니메이션</title>
<style>
@keyframes colorChange { /*개발자가 이름 지정*/
from {
background-color: rgb(181, 181, 255);
border: 1px solid blue;
}
to {
background-color: powderblue;
border: 5px dotted yellowgreen;
border-radius: 50%;
}
}
@keyframes rotate {
from{
transform: rotate(0deg);
}
to{
transform: rotate(90deg);
}
}
div{
width: 100px;
height: 100px;
background-color: rgb(181, 181, 255);
margin-bottom: 20px;
}
#box1{
/*animation-name: colorChange;
animation-duration: 3s;
animation-direction: alternate;
역으로 실행 => iteration-count 2개부터 사용 가능 (역 수행도 count)
animation-iteration-count: 2; 반복
animation-timing-function: ease-in; 변화 속도*/
/*animation: colorChange 3s alternate infinite ease-in;
=> name duration direction iteration-count timing-function*/
animation: colorChange 2s infinite, rotate 2s alternate infinite;
}
#box2{
animation-name: rotate;
animation-duration: 3s;
animation-delay: 2s;
}
#box1:hover{
animation-play-state: paused; /*잠시 멈춤*/
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<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>애니메이션</title>
<style>
@keyframes bg {
0%{
background-color: beige;
}
25%{
background-color: aqua;
transform: translate(30px,20px); /*이동*/
}
75%{
background-color: blueviolet;
}
100%{
background-color: rgb(255, 191, 191);
}
}
#box{
width: 100px;
height: 100px;
background-color: rgb(230, 230, 255);
animation-name: bg;
animation-duration: 3s;
animation-fill-mode: forwards; /*애니메이션 마지막 phase에 정지*/
}
</style>
</head>
<body>
<div id="box"></div>
</body>
|
cs |
- 응용 문제 - 이미지 위치 틀 고정, 배경이미지만 아래로 이동 후 원위치
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<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>애니메이션 응용</title>
<style>
.corona{
width: 100%;
height: 200px;
background: url(images/corona.jpg) no-repeat;
background-size: 100%;
animation: move 3s;
}
.corona h2{
color: white;
font-size: 2em;
text-align: center;
padding-top: 70px;
}
.corona span{
color: red;
}
@keyframes move {
0%{
background-position: 0 0;
}
50%{
background-position: 0 100%;
}
100%{
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="corona">
<h2> <span>코로나</span> 방심말고 끝까지~~~</h2>
</div>
</body>
|
cs |
- 응용2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<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>애니메이션 응용</title>
<style>
.corona{
width: 100%;
height: 200px;
background: url(images/corona.jpg) no-repeat;
background-size: 100%;
animation: move 5s alternate;
}
.corona h2{
color: white;
font-size: 2em;
text-align: center;
padding-top: 70px;
}
.corona span{
color: red;
}
@keyframes move {
/* 0%{
background-position: 0 0;
}
50%{
background-position: 0 100%;
}
100%{
background-position: 0 0;
} */
from{
background-position: 0 0;
}
to{
background-position: 0 100%;
}
}
</style>
</head>
<body>
<div class="corona">
<h2> <span>코로나</span> 방심말고 끝까지~~~</h2>
</div>
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220620 - css(홈페이지 구현 실습) (0) | 2022.06.21 |
|---|---|
| 220617 - css (position, table 관련, filter, transition 문제), 홈페이지 구현 (0) | 2022.06.18 |
| 220615 - css - 그라데이션, 레이아웃, 테두리 (0) | 2022.06.16 |
| 220614 - css - 선택자(가상, 가상 요소), 문단, 리스트, 배경 스타일 (0) | 2022.06.15 |
| 220613 - css (텍스트 스타일, 선택자 - 형제, 속성, 가상 ) (0) | 2022.06.14 |
