HTML을 공부하면서 웹을 만들 경우 반응형 디자인이 매우 중요하다는 것을 알게 되었다.
○ 반응형 디자인이란?
우리는 PC뿐 아니라 스마트폰이나 태블릿 등 다양한 기기를 통해서 웹에 접속하게 되는데 그 기기에 맞게 웹이 나타나게 된다. 그런데 따로 설정을 해주지 않으면 기본적으로 PC에서 접속한 화면을 스마트폰이나 태블릿에서도 그대로 보여주기 때문에 불편함이 생길 수 있다.
다음은 웹에서 예제로 만든 페이지다. 간단하게 구현이 되어 있고 다른 꾸밈은 거의 없는 상황인데 지금은 PC에서 웹 브라우저로 접속했고 그 기준으로 만들었기 때문에 별다른 이상없이 잘 나온다.
○ viewport를 구현했는데 모바일에서는 한글 깨짐 현상이 발생한다면?
하지만 이를 그대로 가져와서 모바일에서 접속을 할 경우 다음과 같이 한글이 깨지는 현상이 생길 수 있다. 그래서 방법을 찾고자 구글에 검색을 해보았다.
그랬더니 다음과 같은 meta 태그를 body태그 사이에 넣어야 한다고 나온다.
| <meta name="viewport" content="width=device-width, initial-scale=1.0" charset=“utf-8”/> |
여기에는 viewport라는 개념이 들어가는데 이것이 아까 말한 반응형 디자인을 구현하는 HTML5에서의 기능이다.
좀 더 추가로 설명을 하자면 기능은 viewport로 구현을 하고 content는 기기(device)의 넓이에 맞게끔 설정을 해준다. 그리고 initial-scale이라는 것이 있는데 이건 페이지의 비율을 말한다 여기서 1로 설정을 하게 되면 화면에 딱 맞게끔 나온다. 그리고 charset은 어떤 언어로 인코딩을 할지 설정하는 부분인데 utf-8로 설정해주는 것이 좋다. 설정을 해주지 않을 경우 인코딩 과정에서 자동 번역이 될 수 있는데
잘못하면 한글이 아닌 다른 언어로 번역해서 깨지는 결과를 초래할 수도 있다.
○ 한글 깨짐 두 번째 해결 방법
그런데 이렇게 했는데도 똑같이 깨지는 화면이 나왔다.... 그래서 어떻게 해결을 해야하나 싶어서 다시 구글링을 했고 아래와 같은 코드를 추가하는 방법을 알게 되었다.
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
이 방법은 HTML4.01에서 쓰이던 버전인데 HTML5가 나오기 전까지 문자 인코딩을 해주던 방식이었다. 지금은 잘 사용하지는 않지만
혹시나 한글 깨짐 현상이 발생하는 것에 대처법이 될 수도 있다.
ㄴㄴㄴ
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset=“utf-8”/> |
결과적으로 두 가지의 meta 코드를 <head></head> 사이에 입력하면 한글 깨짐 현상이 없어진다는 것이다.
그래서 해결이 됐을까??
다행히 해결이 잘 되었다. 한글로 적절하게 문자인코딩이 되어서 내가 원하던 페이지를 구현하게 되었다. 게다가 viewport에서 설정해준 값들도 잘 적용이 된 모습을 볼 수 있다.
추가적으로 meta에 대해서 말하자면 meta는 작성하고 있는 웹페이지에 대한 여러 가지의 메타 정보를 담고 있다. 여기에서 설정된 메타 정보대로 그대로 사용자에게 보여지기 때문에 meta 코드에 대해서는 반드시 이해를 하고 넘어가야 한다.
'개발 & 기술' 카테고리의 다른 글
| 하루에 얼마나 걸었는지 삼성 헬스 걸음수 체크하기 (0) | 2021.06.03 |
|---|---|
| 아이패드 사진 HEIC 파일 JPG 변환하기 (0) | 2021.06.02 |
| 다양한 맥북 캡쳐 단축키 정리하기 (0) | 2021.05.31 |
| 맥북 4k모니터 연결 필수품 DP케이블(DP to USB-C) (1) | 2021.05.31 |
| 비전공자 개발자 국비지원학원 첫 번째 주 수업 후기(국민취업지원제도 2유형 2단계 비대면 출석 Zoom강의) (0) | 2021.05.30 |
댓글