반응형
HTML 문서의 기본 구조 요약. VScode(Visual Studio Code)에서 html:5를 입력하면 나오는, 자동완성으로 작성된 HTML 기본 파일 기준이다.
- 일반적으로 HTML 문서의 메인 페이지는 index.html이라는 파일명으로 사용한다.
- HTML 태그는 여는 태그와 닫는 태그로 구성된다. <tag>내용</tag>
<!DOCTYPE html> <!--1-->
<html lang="en"> <!--2-->
<head> <!--3-->
<meta charset="UTF-8"> <!--4-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--5-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--6-->
<title>Document</title> <!--7-->
</head>
<body> <!--8-->
</body>
</html>
편의상 해당 태그 옆에 <!--text--> 주석 태그로 해당하는 번호를 적어놓았다.
- HTML 웹표준 문서임을 나타낸다.
- 사용 언어 (한국어면 "ko")
- <head>는 문서에 필요한 파일들을 불러오고 세팅하는 영역이다.
- 문자 인코딩 방식. UTF-8과 EUC-KR 두 종류가 있는데, 현재 보편적으로 쓰이는 것은 UTF-8이다.
- 브라우저별 호환성을 맞춰주기 위한(크로스브라우징) 기준. 비표준 버전에서 접속시 강제로 표준 모드로 바꿔준다.
- 미디어의 크기에 따라 웹페이지의 사이즈와 디자인이 변화하는 반응형 웹을 위한 설정.
- 문서 제목
- <body> 영역에 문서의 실제 내용들이 들어간다.
VScode가 가장 무난하게 쓰이는 웹표준 기준으로 구성을 해주기 때문에 크게 손댈 부분은 없지만, 그래도 각각의 역할을 알아야 앞으로 필요한 부분을 입맛에 맞춰 고쳐나갈 수 있을 거 같아 정리해보았다. 하나 하나 깊게 들어가면 훨씬 복잡하겠지만 일단은 러프하게 전체 구조 정도만 알아두고, 필요할 때 자세히 알아가기로 한다.
많이 배우진 않았지만, 전에는 손코딩으로 일일이 적거나 따로 만들어놓고 끌고오곤 했었는데... 참 세상이 좋아졌구나 싶다. 이렇게 자동완성 기능을 쓰는 게 초보자에겐 안좋다는 의견도 있긴 하지만, 덕분에 초보자들의 코딩 진입장벽이 많이 낮아진 거 같다. 한 글자만 삐끗해도 제대로 안굴러가는 것이 코딩이기에 더더욱!
반응형
