20220407_TIL 반응형 웹 실습하기
# 오늘 배운 것
반응형 웹을 구현하기 위한 CSS 속성에 대해 학습함.
- Transform : 각도, 크기, 위치 설정
- Transition : 특정 조건 하에 효과 적용
- Animation : 조건 지정할 필요 없이 조건 적용 가능
- 미디어쿼리 media : 브라우저 가로폭에 따른 효과 적용
# 알게된 점
prefix 접두사 사용
반응형 웹을 구현하기 위한 CSS 속성에 대해 학습함.
- Transform : 각도, 크기, 위치 설정
- Transition : 특정 조건 하에 효과 적용
- Animation : 조건 지정할 필요 없이 조건 적용 가능
- 미디어쿼리 media : 브라우저 가로폭에 따른 효과 적용
prefix 접두사 사용
IE 상위 버전에서 위의 기능들을 지원하게 하려면 prefix 접두사를 작성해야 한다.
.transition {
-webkit-transform: translate (loops, 200px); //크롬, 사파리
-mos-transform: translate (loops, 200px); //파이어폭스
-ms-transform: translate (loops, 200px); //익스플로러 9.0
-o-transform: translate (loops, 200px); //오페라
}
transition 속성 작성 시 주의점
transition 속성을 한줄로 작성할 때 duration의 순서가 무조건 delay보다 먼저이다.
.transition {
transition: width 2s linear 1s;
}
.transition:hover {
width: 300px;
}
위 의 코드에서 2s가 duration 즉, 효과 지속 시간을 의미하고 뒤의 1s는 delay를 나타낸다.
코드 작성 시 주의해야 한다. 클래스 transition에 마우스를 올리면 2초 동안 일정하게 width 값이 300px로 변하게 되는데 마지막 속성인 delay 값이 지정되어 있어 마우스오버 1초 후에 적용된다.
Animation 효과 이용하기
.box {
animation: rotation 3s linear 1s 6 alternate;
}
@-webkit-keyframes rotation {
from {-webkit- transfom: rotate(-10deg);} //시작
to {-webkit- transfom: rotate(10deg);} //끝
}
prefix인 webkit을 작성할 때 keyframes와 그 내부 속성 transition에도 각각 작성해야 적용된다. 그리고 애니메이션 속성은 keyframes을 무조건 작성해줘야 한다. 위에서 rotation이라는 애니메이션을 조건을 작성하고 나서 keyframes에서 애니메이션 시작과 끝까지의 뭐를 바꿀지 작성하면 된다. 위의 예시에서는 각도를 -10deg에서 10deg로 회전하게 끔 만들었다.
미디어 쿼리 media
<meta name="viewport" content="width=device-width, initial-scale=1.0">
html문서 헤드에 메타 값을 작성해야 미디어쿼리가 제대로 구동된다.
위의 내용을 간단하게 설명하자면 이름이 viewport이고 내용은 뷰포트의 가로폭과 디바이스의 가로폭이 같고, 초기값은 1.0을 유지함을 의미한다.
.media {
width: 500px;
height: 500px;
background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: yellow;
}
}
미디어 쿼리는 @media ( ) and ( ) { } 구조를 기억하면 좋다.
최소넓이가 300px, 최대넓이가 800px이면 미디어쿼리를 실행하게 된다. 즉 위의 범위에서는 가로세로 300px, 배경색이 노랑색이 된다.
미디어쿼리는 외부 영역에 있는 css속성을 상속받기 때문에 미디어쿼리 내 배경색을 지정하지 않았다면 .media의 속성을 상속받아 빨강색일 것이다. 만약 이러한 속성을 상속받지 않고자 한다면 속성값으로 none을 주면 된다.
Author And Source
이 문제에 관하여(20220407_TIL 반응형 웹 실습하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeongjuyun/20220407-TIL-반응형-웹-실습하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)