[CSS3] HTML/CSS 15일차

HTML / CSS

✔ Preview

viewport, @keyframes, 미디어쿼리(반응형) 정리

---

✍ Summary

반응형 웹 (Responsive Web)

: 하나의 웹사이트로 PC, 태블릿, 스마트폰 등 다양한 디스플레이 기기에 맞추어 화면의 크기가 자동으로 변화하도록 만든 웹페이지이다.

 

 

Viewport

: 웹페이지가 사용자에게 보여지는 영역이다. PC를 기준으로 작성된 웹페이지를 모바일에서 열게 되면 웹사이트의 글자들이 매우 작게 보이게 되는 문제가 생기는데 viewport는 이를 조절할 수 있도록 한다. 모바일기기에서 렌더링되는 영역과 뷰포트의 크기, 줌 레벨 등을 조절할 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

출처: https://www.woorank.com/en/edu/seo-guides/how-to-use-the-mobile-viewport-for-seo

 

@Keyframes

: 애니메이션의 중간중간의 특정 지점을 선택해 키프레임을 설정함으로써 세밀하게 애니메이션을 제어할 수 있도록 하는 속성이다.

@keyframes example {
  0% {
    margin-left: 100%;
    width: 300%;
  }

  100% {
    margin-left: 0%;
    width: 100%;
  }
}

 

Media Query (미디어쿼리)

: 반응형 웹페이지를 작성할 때 사용되는 쿼리로서, 특정 스타일을 css를 통해 선택적으로 적용하려 할 때 주로 사용한다. 이 쿼리를 이용해 PC, 태블릿, 모바일 등 다양한 조건의 뷰포트에 맞추어 화면을 구성할 수 있다.

출처: https://itnext.io/an-instructive-how-to-on-writing-css-media-queries-ab7c3c44b02e

/* 스크린(pc, 태블릿, 모바일)이면서 900~1000px 사이면 적용 */
@media screen and (min-width: 900px) and (max-width: 1000px) {
	header {
		position: relative;
		width: 100%;
		height: 80px;
	}
	nav, section {
		width: 100%;
		margin-left: 0;
	}
}


/* 스크린(pc, 태블릿, 모바일)이면서 800~900px 사이면 적용 */
@media screen and (min-width: 800px) and (max-width: 900px) {
	header {
		position: relative;
		width: 100%;
		height: 80px;
	}
	nav, section {
		width: 100%;
		margin-left: 0;
	}
}

/* 스크린(pc, 태블릿, 모바일)이면서 700~800px 사이면 적용 */
@media screen and (min-width: 700px) and (max-width: 800px) {
	header {
		position: relative;
		width: 100%;
		height: 80px;
	}
	nav, section {
		width: 100%;
		margin-left: 0;
	}
}


/* 스크린(pc, 태블릿, 모바일)이면서 550~700px 사이면 적용 */
@media screen and (min-width: 550px) and (max-width: 700px) {
	header {
		position: relative;
		width: 100%;
		height: 130px;
	}
	nav {
		display: none;
	
	}
	section {
		width: 100%;
		margin-left: 0;
	}
	article {
		height: 150px;
	}
}



/* 스크린(pc, 태블릿, 모바일)이면서 ~550px 사이면 적용 */
@media screen and (max-width: 550px) {
	header {
		position: relative;
		width: 100%;
		height: 130px;
	}
	nav {
		display: none;
	
	}
	section {
		width: 100%;
		margin-left: 0;
	}
	article {
		height: 150px;
	}
}