오늘은 뭔가 첫날보다 양이 적어서 좋았다
어제에 이어서 오늘도! HTML, CSS 수업이었다
다음주부터 JS하면 따라가기 너무 힘들까봐 걱정되긴 하지만 아직까진 너무 재밌다!!
그럼 오늘도 배운 내용 정리!!
Transform, Transition, Animation
Transform, Transition, Animation은 CSS라는 최신 CSS 언어에 등장한 속성으로 다양한 효과를 만들 수 있다!
Transform
👉웹사이트의 특정 영역에서 위치를 변경, 회전, 확대, 축소하는 경우 사용한다.
transform: rotate(45deg);
-
rotate(x deg): 입력한 각도만큼 회전, 음수도 가능 -
scale(x,y): 숫자는 비율을 의미 width를 x배, height를 3배 -
skew(x deg, y deg): x,y축을 기준으로 입력한 각도만큼 회전 -
translate(x px, y px): 위치 변경 (x,y로) -
prefix 접두사: 다른 버전의 브라우저에서 실행을 원할 경우 transform 앞에 적어줘야 함
- 파이어폭스: -moz- - 익스플로러 9.0: -ms- - 오페라: -0- - 크롬, 사파리: -webkit-prefix가 있는 코드와 없는 코드 둘 다 작성해야 모든 브라우저에 적용됨
-> 여러개의 transform이 있을 경우 마지막에 작성한 것만 적용됨
Transition
👉 변화하는 과정을 보여주고 싶을 때 사용
transition-property: width;
-
property: 효과를 적용하고자 하는 css 속성 -
duration: 효과가 나타나는데 걸리는 시간 -
timing-function: 효과의 속도, linear는 일정하게 -
delay: 특정 조건 하에서 효과 발동 -
가상선택자
.transition:hover {width:300px;}: css에서 미리 만들어 놓은 클래스 '마우스을 올렸을 때' 라는 조건, 즉 마우스를 올렸을 때 width가 300px로
->.transition:hover는 띄어쓰기 없이 작성해야한다!
transition은 transition:로 종합해서 쓸 수 있다. 순서는 상관 없지만 먼저 나오는 숫자가 duration 나중에 나오는 숫자가 delay, 만약 숫자가 하나이면 무조건 duration을 나타낸다.
Animation
👉 조건에 상관없이 이벤트를 적용하고자 할 때 사용한다.
animation-name: changeWidth;
-
iteration-count: 애니메이션 반복 횟수 -
direction: 애니메이션 방향 진행- altenate: 처음부터 끝으로
- reverse: 끝에서 처음으로
- normal: 처음 -> 끝 -> 처음
-
@keyframes name { from {} to {} }: 애니메이션의 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정한다.
animation도 transition과 같이 속성들을 한 줄로 작성할 수 있다.
transform과 animation을 같이 쓸 수도 있다.
미디어쿼리
👉 pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
@media (min-width: 320px) and(max-width: 800px){ }
-
min-width와 max-width로 브라우저 가로폭을 설정해서 해당 값 사이에서는 중괄호 안의 css속성으로 대체한다.
-
미디어 쿼리가 정상적으로 출력되는지 확인하기 위해서는 크롬의 개발자도구를 사용하거나 troy labs를 사용한다. 단 troy labs는 결과물이 서버에 등록되어 있어야 한다.
-
viewport: 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미 너비와 배율을 설정할 때 사용하는 메타 태그 속성 중 하나이다. 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1">
-> 가로폭은 디바이스의 가로폭으로 비율은 항상 1로 한다는 의미 -
CSS 속성 상속 : 미디어쿼리 외부 영역에 있는 CSS 속성을 상속받기 때문에 상속을 받지 않으려면 none을 입력해야 한다.
