css3 Animation 미디어쿼리, 레이아웃,css 메뉴 만들기 에 대해 알아보자
1. transform 속성
확대,축소,회전 위치 변경등 다양하게 가능함- 브라우저 별로 업데이트 되지 않는 부분까지 적용하게 하려면 아래와 같이 적용 해 주어야 함
-webkit- (크롬,사파리)
-moz- (파이어 폭스)
-ms- (익스플로러)
1.1 transform rotate
- 선택된 오브젝트 회전 (평면적으로)
- -degree(마이너스각도)로도 회전가능함 (그럼 반대로 출력 됨)
- 내가 사용하는 브라우저의 하위버전까지 고려한다면 앞에 prefix 있어야함
-ms- 이렇게 필요한 브라우저에 맞춰서 prefix를 적어주어야함
<div class="transform"></div>.transform { //이렇게 표현하면 10도 각도로 transform 회전한 형태 보임
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);}1.2 transform scale
- 선택된 오브젝트를 확대/축소 가능
- scale(x,y)x(세로만큼), y(가로만큼)
- 몇 배로 키우겠다(2,4) width 2배, height 4배
.transform{
width: 100px;
height: 100px;
background-color: red;
transform: scale(2, 3); }1.3 transform skew
-3D로 X축/Y축을 회전함, 평면적으로 회전하는 rotate이랑 다른 개념
- transform: skew(10deg, 30deg); 3d로 x축,y축으로 틀게 만듬
.transform {
width: 100px;
height: 100px;
background-color: red;
transform: skew(10deg, 30deg);
}1.4 transform translate
- 좌표 이동시키는 속성값 , 자기자신을 기준으로 100px,200px x축 y축 이동한 것
애니메이션 작업은 transform 작업하는게 좋음! transform은 GPU를 사용해서 그나마 로딩속도가 낮아짐! 엔진을 분리해서 속도가 빨라지는 효과 가있음.transform { width: 100px; height: 100px; background-color: red; transform: translate(100px,200px);4 }
2. transition
- 애니메이션이 특정 조건에 의해 변화되는 것을 보여줌
- transition 아래의 순서대로 기입 필요, 그 후에 적용될 transition기입해줌
이건 작성하다 느낀건데.. 세미콜론과 콜론(,;)사이에 공백이 있을 때 코드가 제대로 작용이 되지 않기도 한다.. 항상 공백을 없애서 기록해야 겠다
- transition-property:width;
- transition-duration: 2s;
- transition-timing-function: linear; 일정한 속도를 유지해
- transition-delay:1s; hover를 1초 뒤에 적용아래와 같은 코드가 적용 가능하다! 즉. 아래 hover 했을때, 2초동안 .transition {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay:1s;
}
.transition: hover {
width: 300px;
height:300px;
background-color:blue;
}
이렇게 한줄로도 정리 가능하다 순서는 (prop-duration-functiond-delay)
.transition {
width:100px;
height:100px;
background-color:red;
transition:all 2s ease .1s;
}
.transition:hover {
width:300px;
height:300px;
background-color:blue;
}
transition : all 2s ease-out 1s이렇게하면 아래 hover에 있는 모든 효과를 다 한번에 적용해라는것
즉 all 은 transition before를 모두 select해서 뒤의 trnasition을 효과를 줘라 라는것
3. animation
- 에니메이션 효과 또한 시간 진행에 따른 애니메이션을 표현할때 사용 함
- animation-name:changeWidth; 을통해 해당 animation에 이름을 주고 @keyframes 영역을 통해 어떻게 애니메이션 적용할건지 알려줘야함
- transition 처럼 무엇을 해야 적용하는게 아닌 웹페이지를 열때 바로 재생이 가능한것이 특징 transition 속성값과 겹치는게 많음
animation-name:changeWidth;
animation-duration: 2000ms; 초단위는 1s 로 하고 더 잘게는 1000단위로 나뉨
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 4;//에니메이션이 동작하는 횟수
animation-direction: normal; //정방향은 normal 값을 안넣어도 정방향으로 감 반대로 가고싶을땐 reverse사용 가능
animation 또한 한줄로 정리 가능
animation: changeWidth 2s linear 1s 4 normal;
normal이아니면 alternate값을 주면 총 2회 반복효과를 하게 됨 (8번)
이렇게 코드를 작성하고 나면 @keyframes 영역을 통해 어떻게 애니메이션 적용할건지 알려줘야함
@keyframes changeWidth {
from {
width:300px;
height:300px;
background-color: yellow;
}
to {
width: 600px;
height:600px;
background-color:blue;
}
}
에니메이션에 prefix를 넣으려면 (keyframes에도 다 적용을 시켜 줘야함)
@-webkit-keyframes spinLion {
from{ -webkit-transform: rotate(-10deg);
}
to { -webkit-transform: rotate(10deg);
}
} 안에 명시 해줘야함
key frame은꼭 before and after 가 아닌
@keyframes spinLion {
0%{ transform: rotate(-10deg);
}
50%{ }
85%{ }
100% { transform: rotate(10deg);
} 도 가능하다
} 참조 url (http://jeremyckahn.github.io/stylie/) 여기서 원하는 애니메이션을 기입해서 붙여넣기 가능함
코드에 html제거 하고 붙여넣기 하면 됨!
animation-timing-function 종류
- ease : 시작과 종료를 부드럽게
- inear : 모든 애니메이션이 일정한 간격 또는 속도로 작동
- ease-in : 서서히 시작
- ease-out : 서서히 종료
- ease-in-out : 서서히 시작하여 서서히 종료
animation-direction 종류
- normal : 정방향으로 진행
- reverse : to에서 시작하여 from으로 끝남
- alternate : 처음은 정방형으로 진행하고 그 다음은 역방향으로 진행
- alternate-reverse : 처음은 역방향으로 진행하고 그 다음은 정방향으로 진행
4. media query
-
웹형/모바일형에 따라 반응형,적응형 웹사이트를 만들기 위해 필요한 것이 미디어쿼리
-
~사이즈의 화면에서는~ 이렇게적용해라 라는 원리
-
미디어 쿼리와 받드시 같이 입력해야하는 html 코드가 있음. 그건바로 뷰포트
모바일의 경우 웹페이지를 모바일 스크린에 맞춰 자동으로 스케일링이 되는데, 이를 금지하기 위해 initial-scale=1.0으로 설정 —> 타이틀 위에 아래와 같이 기입함
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
@media(min-width: 767px) {
.pc {
background-color: yellow;
}
}
@media(min-width: 1000px) {
.pc {
background-color: blue;
}
}
@media ( min-width:100px) and (max-width:600px) {
.pc {
color: blue;
font-size: 30px;
background-color: yellow;
}
}- max-width값을 적용하지 않아도 이후에 min값을 또 적용 해놓으면 그 사이 값으로 자동적으로 max 값이 적용되는 원리이니 그렇게도 활용 가능 함
5. css로 메뉴 만들기 (nav)
먼저 아래와 같은 메뉴구성의 틀을 html로 만들어 준다
<nav class="menu1">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>.menu1 ul {
list-style: none;
}
/*먼저 menu 리스트를 없애준뒤/*
a {
text-decoration: none;/* text-deco를 없애주면 underline이 없어진다/*
} 그렇게 하고 css 코드를 적용시켜 준다.
.menu1 li {
display: inline-block;
/*li element의 기본은 block이라 inlineblock으로 변경해준다
그냥inline으로 적용 안하는 이유는 아래에 나옴 */
width: 100px;
height: 50px;
background-color: yellow;
border: solid 10px red;
text-align: center;
line-height: 50px;/*이렇게 표현시 메뉴 버튼안에 글자를 중앙정렬 가능*/
}
혹은 높이를적용하지않고 padding값을 줌으로서도 중앙정렬이 가능함
padding-top: 10px;
padding-bottom: 10px;
/*패딩값을 적용하게 하려면, block요소로는 힘들기 때문에 inline-block요소를 적용하는 것임/*- a tag 전체 적용으로 버튼 효과 주기
.menu1 a {
display: block;
width:100px;
height: 50px;
text-decoration: none;
text-align: center;
line-height: 50px; */ height를 높이와 똑같이 줌
}아니면 li 태그의 부모사이즈 기준으로 적용하기 위해 (부모 크기안에서 full-size 적용)
.menu1 a {
display: block; /*position absolute를 적용하면 width/height 적용가능 함/*
width:100%;
height: 100%;
text-decoration: none;
text-align: center;
}
.menu1 ul {
list-style: none;
overflow: hidden;
}overflow: hidden을 적용해서 float 시킨부분을 적용시키지 않다고 설정해놓을 수 있음!
- 메뉴 값으로 이동하는 효과 주기
<li><a href="#id값">메뉴1</a></li>id 값을 주면 웹사이트 내의 그 위치로 이동하게 된다.
코린이 프론트엔드 개발자💻💛🤙🏼