Responsive Web (반응형 웹)
요즘에는 웹 브라우저를 데스크탑에서만 보지 않고 모바일, 테블릿 등등 여러 사이즈의 디바이스를 통해 웹 브라우저를 이용을 한다.
한마디로 브라우저를 접속했을 때 사용한 디바이스 사이즈에 따라 반응하는 웹사이트!
⭐ 필수로 써야할 것 ⭐
viewport meta
viewport : 사용자가 사용하고 있는 브라우저 창의 크기 = 화면 사이즈
<!docutype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>meta : 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그이며, 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있다. 닫는 태그가 없는 태그로, 태그의 속성을 통해 정보를 제공한다.
즉, meta는 우리 눈에 보이지 않지만 문서에 추가적인 정보를 줘야할 때 사용하는 태그이다.
위의 코드를 설명하자면
width=device-width, initial-scale=1.0
화면 사이즈의 가로 사이즈는 디바이스 사이즈로 맞추고 처음의 보여줄 때 1.0 배율로 보여줘! 라는 뜻
➡ meta태그를 선언을 해야 반응형 웹이 정상적으로 작동을 한다.
media query
@media (조건) {
스타일
}
@media screen and (min-width: 768px) {
// 브라우저 가로 사이즈가 최소 768px = 768px 이상일 때!
}@media 키워드로 시작하고 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다.
