[CSS] 반응형 웹 실습하기

Yeongju Yun·2022년 4월 7일

목록 보기

1/1

# 오늘 배운 것

반응형 웹을 구현하기 위한 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을 주면 된다.

Yeongju Yun