엘리스 4일차 목요일 온라인 강의 css
01
1. Transform
<style>
.transition {
transfrom: rotate(45deg); /* 회전 */
transform: scale(2,3); /* 확대 축소 */
}
</style>
<style>
.transition {
transfrom: rotate(45deg); /* 회전 */
transform: scale(2,3); /* 확대 축소 */
}
</style>
rotate(angle): 입력한 각도만큼 회전, 음수입력가능
scale(x, y): width가로 x배, height세로 y배만큼 변경
<style>
.transition {
transform: skew(10deg, 20deg); /* 각도 변경 */
transform: translate(100px; 200px); /* 위치 변경 */
}
</style>
skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비튼다.
translate(x, y): 선택한 오브젝트의 좌표를 x,y 변경
<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>
transform은 최신CSS 버전에서만 가능하지만, prefix를 추가하면 하위버전의 브라우저에서도 실행 가능 ex) IE
2. Transition
<style>
.transition {
transition-property: width;
transition-duration: 2s;
}
</style>
property: 속성값
duration: 효과가 나타나는데 걸리는 시간
<style>
.transition {
transition-timing-function: linear;
transition-delay: 1s;
}
</style>
timing-function: 효과의 변화 속도, linear:일정하게
delay: 특정 조건 하에서 발동, 1s: 1초후
<style>
.transition:hover { width: 300px; }
</style>
:hover: css에서 미리 만들어놓은 클래스이다.
마우스를 올렸을때 나타나는 효과
태그, id, class는 실제로 html에 존재
<style>
.transition {
transition: width 2s linear 1s;
}
.transition:hover { width: 300px; }
</style>
종합예시.
보통 shorthand방식으로 많이 쓴다고 한다.
앞에나오는 숫자가 무조건 duration, 뒤에나오는게 delay
앞에께 조건, 뒤에께 실제 애니메이션 결과값
3. Animation
/* 조건 */
.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; ]
}
name은 임의로 설정하면 된다.
duration, timing-funciton, delay는 transition에서와 같다.
iteration-count: 반복횟수
direction: 애니메이션 진행방향
1) alternate: from -> to -> from
2) normal: from -> to, from -> to
3) reverse: to -> from, from -> to
4. 애니메이션 응용
.box1 {
animation: rotation 1500ms linear infinite alternate;
}
@keyframes rotation {
from { transform: rotate(-10deg); }
to { transform: rotate(10deg); }
}
먼저나오는숫자가 duration, 나중에 나오는 숫자가 delay
.box1 {
-webkit-animation: rotation 3s linear 1s 6 alternate;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(-10deg); }
to {-webkit-transform: rotate(10deg); }
prefix 같은거끼리 연동됨
02
1. 미디어쿼리
.media {
width: 500px;
height: 500px;
background-color: red;
}
/* 미디어쿼리 */
@media (min-width: 320px) and (max-width: 800px) {
width: 300px;
height: 300px;
background-color: yellow;
}
.media {
width: 500px;
height: 500px;
background-color: red;
}
/* 미디어쿼리 */
@media (min-width: 320px) and (max-width: 800px) {
width: 300px;
height: 300px;
background-color: yellow;
}
min-width, max-width: 브라우저 가로폭 최소, 최대
2. 미디어쿼리 사용시 주의사항
<meta name-"viewport" content="width=device-width, initial-scale=1.0">
head 안에 viewport 넣어야함
viewport: 디지털기기의 화면상에 표시되는 영역, 너비와 배율을 설정해야함
width=device-width: viewport의 가로 = 디바이스의 가로
initial-scale=1.0: 비율은 항상 1.0
미디어쿼리 외부 영역에 있는 CSS 속성 상속받음, 상속안받으려면 none
pc버전에서 제목 width50%, nav바 width 50%라면 모바일버전에서는 각각 100%로 조정한다.
여러 선택자를 한번에 사용할때
#footer .copyright p,
#footer .address p {
width: 100%;
}
Author And Source
이 문제에 관하여(엘리스 4일차 목요일 온라인 강의 css), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chss3339/엘리스-4일차-목요일-온라인-강의-css저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)