안녕하세요 오늘은 반응형 웹에 대해 알아보도록 하겠습니다.
먼저 요즘은 데스크 탑 이외에도 스마트 폰 태블릿 등 다양한 모바일 기기의 이용이 늘어났는데요.
따라서 모바일 웹에 대한 관심도 많아지고 있는 상태입니다.
또한 각 기기마다 다르게 설정해주지 않으면 한쪽으로 치우쳐져 있는 모습을 발견할 수 있는데요.
현재 비주얼 스튜디오 코드로 작성한 사이트를 임의로 배포한 다음
다른 모바일 기기로 들어가게 되면 한쪽으로 치우쳐져 있는 형태를 발견할 수 있습니다.
그리고 데스크 탑으로 네이버로 들어간 것과 다른 모바일 기기로 들어가 보면 레이아웃이
다른 걸 확인할 수 있는데요?
개발자가 많은 곳은 따로 모바일 페이지를 만들어서 다르게 하는 곳도 있지만,
그렇지 않은 경우 한 HTML을 다른 모바일 기기마다 다르게 나오게 한답니다.
반응형 웹
여기서 확인할 수 있는데요.
반응형 웹이란 즉 디바이스 종류에 따라 웹페이지 크기가 자동적으로 변경되어 보이게 하여
사용자가 사용하는 기기에 최적화된 환경으로 보이도록 하는 방법입니다.
그렇다면 어떻게 사용하는 걸까요.?
비주얼 스튜디오 코드를 사용하시는 분이라면
아마 탭을 통해 만드실 텐데요.
viewport
그중 viewport 부분을 보실 수 있습니다.
<meta name="viewport" content="width=device-width,initial-scale=1">
이런 태그를 볼 수 있는데 이 메타 태그는 모바일 반응형을 만들기 위해서
필요한 태그입니다.
뷰포트는 웹 페이지에서 사용자에게 보이는 영역인데요. 각 기기마다 달라지는 것이죠.
기기마다 픽셀과 크기가 다르니깐요.
이를 지정해주는 역할을 하는 것이 해당 태그입니다.
속성으론
width 뷰포트의 가로 크기
device-width 단말기의 물리적, 즉 실제 기기의 가로길이
initial-scale 페이지 처음 접속 시 보일 배율
이렇게 간단하게 세 가지만 알려드렸는데 이 외에도 많으니 사용하는 것에 따라
해당 부분을 변경해주시면 되겠습니다.
미디어 쿼리
viewport 태그를 작성했다면 이제 실제로 적용하기 위해서 사용하는 것은 바로 미디어 쿼리입니다.
미디어 쿼리를 적용하는 방법에도 css를 적용하는 것처럼 3가지 방법이 있는데요.
css에 스타일 적용하는 방법과 비슷하니 css파일 내에서 작성하는 방법으로
알아보도록 하겠습니다.
먼저 문법은
@media screen and (max-width: npx){ }
max-width 부분은 원하시는 걸로 바꾸실 수 있습니다.
max-width, max-height , device-width,aspect-ratio(width/height 비율)
등 사용할 수 있는 것들이 많기 때문에 이 부분은 간단하게 max-width로 하도록
하겠습니다.
html 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p id="test">안녕하세요</p>
</body>
</html>
이렇게 간단하게 html 코드를 작성해보았는데요.
css파일에 미디어 쿼리를 작성하는 것이니 반드시 link태그를 통해
연동시켜주셔야 합니다.
이후 css 코드입니다.
#test{
font-size: 50px;
}
@media screen and (max-width:600px) {
#test{
font-size: 100px;
}
}
이렇게 작성하여 웹페이지를 열어본 가로 크기를 조절해보시면 글씨 크기가
가로 크기에 따라 바뀌는 모습을 확인하실 수 있습니다.
아래 화면은 결과이며 그 아래는 개발자 도구로 바뀐 것을 확인하는 코드입니다.
1. 기본일 경우
2. 미디어 쿼리를 적용했을 경우
이렇게 실제 글씨 크기도 변경되고
기존 css는 줄이 그어지고 미디어 쿼리에 있는 것이 적용되는 것을 개발자 도구에서도
확인할 수 있습니다.
미디어 쿼리 옵션
그 외에 다른 분들 코드를 보게 되면
@media only screen and(크기){}
이렇게 media 다음에 키워드를 볼 수 있는데요.
이 역시도 종류가 다양해서 몇 가지 알려드리자면
only 뒤의 조건만
not 뒤의 조건을 제외한
all 모든 미디어 타입
등 다양한 키워드도 있습니다.
혹시라도 잘못된 것이 있다거나 다른 의견이 있으시다면 댓글로 남겨주시면
감사하겠습니다.
