이번에는 HTML의 기본적인 작성 구조에 대해서 알아보려고 합니다.
일단 제가 임시로 작성한 코드를 첨부하겠습니다.
<!-- DOCTYPE(Document Type) : HTML 의 버젼별로 선언해주는 선언문 -->
<!DOCTYPE html>
<!-- HTML(HyperText Markup Language) : 하이퍼텍스트를 가장 중요한 특징으로 하는
마크업이라는 형식을 가진 프로그래밍 언어 -->
<html>
<!-- 웹에 직접적으로 표시되진 않지만 메타데이터들을 표시.-->
<head>
<!-- 유니코드를 위한 가변 길이 문자 인코딩 방식. 한글깨짐 방지 -->
<meta charset="UTF-8">
<!-- 웹페이지 최상단에 표시되는 타이틀 -->
<title> Welcome To HTML </title>
</head>
<!-- 본문 -->>
<body>
<!-- <h1> ~ <H6> : 제목 -->
<h1> Welcome To HTML!</h1>
<!-- <strong> : 문장을 굵게 표시.-->
<strong> HTML에 오신 여러분을 환영합니다!</strong>
</body>
</html>HTML 문서의 구조를 설명하기 이전에 왜 이렇게 작성하느냐! 라고 의문을 가지실 수 있습니다.
위 코드와 같이 작성하는 이유는 코딩들 시작하기에 앞서 이 언어를 쓰기 위해서 정해놓은 '약속' 이라고 보시면 됩니다.
만약 이를 지키지 않고 작업을 하고 실행을 시킨다면 오류가 나지 않더라도 추후 수정에 있어서 불편함을 초래할 수 있고 다른 사람이 코드를 읽음에 있어서 불편함을 초래 할 수 있기 때문에 정해놓은 것이라고 할 수 있습니다.
이제 이 약속에 대해서 알아보면
크게 <head></head> 와 <body></body> 로 나눌 수 있습니다.
<head>는 위 그림에서 보면 본문을 제외한 부분을 말하고
<body>는 해드가 아닌 본문을 바디라고 합니다.
그리고 <head>와 <body> 모두를 <html>로 감싸고 있습니다.
'Front 개발 기술 > HTML' 카테고리의 다른 글
| HTML 문법(form) (0) | 2020.07.23 |
|---|---|
| HTML 이미지삽입. (0) | 2020.07.23 |
| HTML의 기본 문법(title, h1~h6, br, p, u, [ul, ol, li], strong, a) 속성 (0) | 2020.07.23 |
| HTML 이란 무엇인가?? (0) | 2020.07.23 |
| HTML을 시작하며.... (0) | 2020.07.23 |
