✏️ Today I Learned (2022.04.07)
📖 온라인 강의
- 움직이는 웹사이트 제작
- 반응형 웹사이트 제작
📝 움직이는 웹사이트 제작
1. Transform
rotate, scale
1
2
3
4
5
6
|
<style>
.transition {
transfrom: rotate(45deg); /* 회전 */
transform: scale(2,3); /* 확대 축소 */
}
</style>
|
cs |
- .rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능
- .scale(x, y): 숫자는 비율의 의미하며 width를 x배, height를 y배 만큼 확대
skew, translate
1
2
3
4
5
6
|
<style>
.transition {
transform: skew(10deg, 20deg); /* 각도 변경 */
transform: translate(100px; 200px); /* 위치 변경 */
}
</style>
|
cs |
- .skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂
- .translate(x, y): 선택한 오브젝트의 좌표 변경
prefix 접두사
1
2
3
4
5
6
7
8
|
<style>
.transition {
-webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
-mox-transform: translate(100px, 200px); /* 파이어폭스 */
-ms-transform: translate(100px, 200px ; /* 익스플로러 9.0 */
-o-transform: translate(100px, 200px); /* 오페라 */
}
</style>
|
cs |
- Transform은 CSS의 최신 버전에서만 실행 가능한 키워드이지만, prefix를 추가하면 하위 버전의 브라우저에서도 실행 가능
2. Transition
property, duration
1
2
3
4
5
6
7
|
<style>
.transition {
transition-property: width;
transition-duration: 2s;
}
</style>
|
cs |
- .property: 효과를 적용하고자 하는 css 속성
- .duration: 효과가 나타나는데 걸리는 시간
timing-function, delay
1
2
3
4
5
6
7
|
<style>
.transition {
transition-timing-function: linear;
transition-delay: 1s;
}
</style>
|
cs |
- .timing-function: 효과의 속도 (linear는 ‘일정하게’라는 의미)
- .delay: 특정 조건 하에서 효과 발동 (1s는 ‘1초 후’라는 의미)
가상 선택자: hover
1
2
3
4
|
<style>
.transition:hover { width: 300px; }
</style>
|
cs |
- css에서 미리 만들어 놓은 클래스로, 마우스를 올렸을 때라는 조건
- Note: .transition:hover를 띄어쓰기 없이 작성해야 함
종합 예시
1
2
3
4
5
6
7
|
<style>
.transition {
transition: width 2s linear 1s;
}
.transition:hover { width: 300px; }
</style>
|
cs |
- 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안 속도 일정하게 변하는 애니매이션 효과 발동
3. Animation
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.animation {
animation-name: changeWidth; /* 애니매이션 이름 */
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6;
animation-direction: alternate;
}
@keyframes changeWidth {
from { width: 300px; }
to {width: 600px; ]
}
|
cs |
- .iteration-count: 애니메이션 반복 횟수
- .direction: 애니매이션 진행 방향
- alternate: from → to → from
- normal: from → to, from → to
- reverse: to → from, to → from
4. 애니메이션 응용
Transform & Animatio
- 애니메이션 코드를 한 줄로 작성시, 먼저 나오는 숫자가 .duration이고, 나중에 나오는 숫자가 .delay
prefix 작성시 유의사항
1
2
3
4
5
6
7
8
9
|
.box1 {
-webkit-animation: rotation 3s linear 1s 6 alternate;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(-10deg); }
to {-webkit-transform: rotate(10deg); }
}
|
cs |
- prefix가 같은 애니메이션끼리 연동
📝 반응형 웹사이트 제작
1. 미디어쿼리 소개
미디어쿼리란 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.media {
width: 500px;
height: 500px;
background-color: red;
}
/* 미디어쿼리 */
@media (min-width: 320px) and (max-width: 800px) {
width: 300px;
height: 300px;
background-color: yellow;
}
|
cs |
- min-width와 max-width로 브라우저 가로폭 설정
- 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미
2. 미디어쿼리 사용시 주의사항
viewport: 너비와 배율을 설정할 때 사용하는 메타 태그의 속성
1
2
|
<meta name-"viewport" content="width=device-width, initial-scale=1.0">
|
cs |
- 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미
- 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일에서 의도한 화면을 볼 수 있음
- .width=device-width: viewport의 가로폭 = 디바이스의 가로폭
- .initial-scale=1.0: 비율은 항상 1.0
CSS 속성 상속
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: none;
}
}
|
cs |
- 미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음
- 만약 상속을 받지 않고자 하면 속성값으로 none 입력
💡느낀 점
저번시간에 이고잉님이 말씀해주신 미디어쿼리를 비롯해 많은 반응형 웹의 예제들을 실습문제를 통해서 알아볼수 있었다. 오늘도 하루 성장했다.
'엘리스 SW 엔지니어 트랙 2기' 카테고리의 다른 글
[TIL] 엘리스 SW 엔지니어 트랙 2기 day 06 (2) | 2022.04.12 |
---|---|
[TIL] 엘리스 SW 엔지니어 트랙 2기 day 05 (2) | 2022.04.11 |
[TIL] 엘리스 SW 엔지니어 트랙 2기 day 03 (0) | 2022.04.10 |
[TIL] 엘리스 SW 엔지니어 트랙 2기 day 02 (0) | 2022.04.07 |
[TIL] 엘리스 SW 엔지니어 트랙 2기 day 01 (2) | 2022.04.07 |
댓글