2021. 2. 6. 22:00ㆍ웹/HTML 기본
html 문서를 작성할 때 기본이 되는 틀이 있습니다.
저는 항상 아래의 내용을 기본으로 쓰고 시작합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>보면 매우 간단합니다.
doctype 선언을 해주는 코드 <!DOCTYPE html>
html로 작성될 코드가 시작될 거라는 <html>
html의 머리 부분을 맡는 <head> </head>
html의 몸 부분을 맡는 <body> </body>
로 구성되어 있습니다.
head 부분에는 실제 우리의 화면에 보이지 않는 것을 보통 담습니다.
이 웹사이트에 사용될 스크립트나 이 웹사이트의 설정들(?)을 담는 곳입니다.
우리는 우리의 웹사이트의 이름을 정해줘야 합니다. 이때 사용될 title 태그는 이 문서의 제목을 정해줍니다.
<html>
<head>
<title>CONAS의 코딩</title>
</head>
...
다음과 같이 웹브라우저 상단에 자신이 정한 제목이 뜨게 될 겁니다.
또, 우리는 메타데이터를 담는 meta 태그가 필요합니다.
여러 종류가 있지만 가장 많이 사용되는 것에 대해 알아보겠습니다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
...
charset(character set)은 웹에서 사용하는 문자들의 집합을 의미합니다.
utf-8은 문자의 인코딩 방법 중 하나로 전 세계의 대부분의 언어를 포함하고 있습니다.
만약 이 meta 태그를 사용하지 않는다면 글자 깨짐 현상이 생길 수 있음을 주의하세요.
viewport는 화면에 보여주는 크기를 설정한다는 내용입니다.
아래부터는 content 안에 들어갈 수 있는 속성들 입니다.
width=device-width는 웹에서 보여주는 넓이를 기기의 넓이로 설정한다는 것입니다.(이걸 추전 합니다^^)
만약 웹에서 보여주는 높이를 장치의 높이로 설정하고 싶다면 height=device-height를 사용하면 됩니다.
initial-scale=1.0은 초기 화면 크기의 비율을 1.0으로 설정한다는 뜻입니다.
user-scalable=no는 사용자가 화면의 확대 축소를 못하게 하는 것입니다.
확대축소를 허용하고 싶다면 이 코드는 안 적으셔도 됩니다. 이미 기본값은 yes(확대 축소 허용)로 설정되어 있습니다.
minimum-scale= 는 최소로 축소할 수 있는 값입니다. 기본값은 0.25입니다. (숫자는 n배를 의미합니다.)
initial-scale= 는 최대로 확대할 수 있는 값입니다.(숫자는 n배를 의미합니다.)
또 head에 들어갈 수 있는 것들과 meta태그의 여러 속성들이 있지만 지금 당장 필요한 것이 아니기 때문에 여기서 마치겠습니다.
'웹 > HTML 기본' 카테고리의 다른 글
| [HTML 기본] #4 주석 (0) | 2021.08.03 |
|---|---|
| [HTML 기본] #2 <DOCTYPE HTML> (0) | 2021.02.06 |
| [HTML 기본] #1 HTML에 대하여 (0) | 2021.02.05 |