움직이는 웹사이트 제작
1. Transform
<style>
div {
transform: rotate(25deg); /*회전, 음수 가능*/
transform: scale(x,y); /*확대 축소*/
transform: skew(10deg, 20deg); /*각도 변경, 음수 가능*/
transform: translate(100px, 200px);
}
</style>- transform은 css 최신 버전에만 사용 가능해서 사용하기 위핸 Prefix 접두사가 필요함.
- -webkit- , -moz-, -ms-, -o-를 transform 앞에 붙여서 사용해야함.
<style>
.transition {
-webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
-moz-transform: translate(100px, 200px); /* 파이어폭스 */
-ms-transform: translate(100px, 200px ; /* 익스플로러 9.0 */
-o-transform: translate(100px, 200px); /* 오페라 */
}
</style>- transform은 맨 뒤의 한개의 속성만 반영됨
2. Transition
<style>
div{
transition-property : width;
transition-duration : 2s;
transition-timing-function : linear
transition-delay : 1s
/* transition: width 2s linear 1s; 이렇게 한줄로도 작성 가능 */
</style>- 가상선택자 hover ( transition이 작동하기 위한 조건)
<style>
.transition:hover { width: 300px; }
</style>3. Animation
<style>
.animation{
animation-name: changeWidth; /*애니메이션 이름*/
animation-duration: 3s;
animation-timing-function: linear;
animation-dealy : 2s;
animation-iteration-count:6;
animation-direction: alternative;
}
@keyframes changeWidth{
from{
width: 300px;}
to{
width : 600px;}
}
</style>- .direction : 애니메이션 진행 방향
alternate: from → to → from
normal: from → to, from → to
reverse: to → from, to → from
4. Transform & Animation
- transform & animation
- 애니메이션 코드를 한 줄로 작성시, 먼저 나오는 숫자가 .duration이고, 나중에 나오는 숫자가 .delay
<style>
.box1 {
animation: rotation 1500ms linear infinite alternate;
}
#keyframes rotation{
from{ transform: rotate(20deg);}
to { transform: rotate(-20deg);}
}
</style>- prefix 작성시 유의사항
<style>
.box1 {
-webkit-animation: rotation 3s linear 1s 6 alternate;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(-10deg); }
to {-webkit-transform: rotate(10deg); }
}
</style>- prefix가 같은 애니메이션끼리 연동
반응형 웹사이트 제작
1. 미디어쿼리
- 미디어쿼리 : PC,모바일,태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
<style>
.media {
width: 500px;
height: 500px;
background-color: red;
}
/* 미디어 쿼리* /
@media (min-width: 300px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: yellow;
}
}
</style>
2. 미디어쿼리 사용 시 주의사항
- 주의할 점 :아래 태그를 꼭 적어주어야함.
- 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일에서 의도한 화면을 볼 수 있음
- .width=device-width: viewport의 가로폭 = 디바이스의 가로폭
- .initial-scale=1.0: 비율은 항상 1.0
<head>
<meta name-"viewport" content="width=device-width, initial-scale=1.0">
하세요
</head>- CSS 속성 상속
<style>
.media {
width: 500px;
height: 500px;
background-color: yellow;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: none;
}
}
</style>- 미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음. 만약 상속을 받지 않고자 하면 속성값으로 none 입력
3. 미디어쿼리 적용하기
아래 모든 내용은 엘리스 SW 엔지니어 트랙 4기 강의 내용에서 발췌되었으며, 개인 학습용으로 정리한 내용입니다. 모든 출처는 엘리스에 있습니다.
백엔드개발자