2020. 9. 28. 19:00ㆍ개발을 파헤치다/Web
웹 개발을 시작하게 되면 가장 먼저 배우는 것이 바로 HTML입니다.
HTML은 Hyper Text MarkUp Language로 우리가 아는 웹사이트 문서를 나타내는 방식이죠.
영어도 말을 하려면 최소한 기본 문장 구조는 알아야 합니다.
프로그래밍 언어도 "언어"이기 때문에 기본적인 구조를 이해해야 웹사이트던 페이지던 만들 수 있죠!
오늘은 웹 개발의 가장 기본이 되는 HTML 문서 구조에 대해서 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<!-- 헤드에는 HTML 페이지의 메타데이터 정보가 들어간다 -->
</head>
<body>
<!-- 유저에게 실제로 보여지는 페이지 내용이 들어간다 -->
</body>
</html>
각 부분에 대해서 좀 더 자세하게 설명을 드릴게요.
먼저 많은 분들이 간과하시는 Document Type부터 설명을 드릴게요.
<!DOCTYPE html>은 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능입니다.
현재 HTML5까지 나와있는데요.
브라우저에서 이 선언을 통해 버전에 맞는 HTML기술로 웹페이지를 보여주게 됩니다.
버전마다 다른 태그, 기능들이 있어 선언을 제대로 안 해주면 웹페이지가 깨져서 나올 수도 있겠죠?
결국 다양한 웹문서의 호환성을 위해 해주는 것이라고 할 수 있습니다.
그다음은 Head 태그인데요.
여기에는 메타 데이터라는 것이 들어가게 됩니다.
메타 데이터는 이 페이지를 나타내기 위해 필요한 정보들을 얘기하는데요.
문서의 제목, 링크들, CSS 스타일 등 여러 가지가 있습니다.
Body에는 실제로 보여지는 내용이 들어가게 되겠죠.
이미지, 텍스트, 영상, 오디오 등 구성에 따라 여러 가지가 들어갈 수 있습니다.
이렇게 기본 구조를 먼저 이해하고나서
원하는 내용들을 채워 넣는 것이 웹개발의 지름길이겠죠?
'개발을 파헤치다 > Web' 카테고리의 다른 글
| WordPress에서 JWT Authentication(JWT 인증) 적용하기 (0) | 2021.10.12 |
|---|---|
| Postman 사용법! Body 타입에 대해 알아보자 (1) | 2020.12.31 |
| 반응형 웹 레이아웃 만들기 - 이미지 바꾸기 (0) | 2018.05.17 |
| Ajax 사용하기 (0) | 2018.03.07 |
| Javascript로 Class 만들기 (0) | 2018.01.06 |