안녕하세요, Davey입니다. 지난번 포스팅에 이어서, 웹페이지 기본 지식에 대해서 알아보면서, 같이 공부하고 싶은 사항에 대해서, 포스팅하고 있습니다. 오늘은 HTML (Hyper Text Markup Language)와 그 문서에 나와있는 속성에 대해서 한 번 설명드리도록 하겠습니다. 일단 HTML (Hyper Text Markup Language)가 무엇인지부터 설명드리면서 시작하도록 하겠습니다.
HTML(Hyper Text Markup Lanaguage)
: HTML은 HyperText Markup Language의 약자라는 것은 눈치 채셨을 겁니다. 거의 모든 웹페이지는, HTML 문서로 이뤄져 있으며, 그 안에, HTML 태그들로 구성됩니다. 각 HTML의 태그들은, 웹페이지를 개발하는 개발자에 의해, 디자인(Label, 웹페이지 상태 부분 위치), 이벤트(기능)를 구성하는 데 사용됩니다.
HTML(Hyper Text Markup Lanaguage) 태그 및 저장 파일 타입
: HTML 태그는 "<>"와 같이 표현을 해야 합니다. HTML Tag에는 크게 두 가지 Type을 구성이 됩니다.
1. 시작 탱크(start tag, opening tag) & 종료 태그(end tag, closing tag)
: 대부분의 HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성됩니다. 종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재합니다.
2. 빈 태크 (Empty Tag) 하지만, 앞에 설명한 것과 다르게
: 빈 태크 (Empty Tag)은 시작 태그는 있지만, 종료 태그는 없습니다. 예를 들면, <img> <br> <hr> 등이 있을 수 있습니다.
3. 저장 파일 Type (. html)
: HTML 문서는 가장 많이 사용하는 게 윈도의 기본 프로그램인, 메모장으로 만들 수 있으며, 요즘에는 메모장이 아닌 다른 에디터로 편리하게 코드를 작성할 수 있습니다. HTML 문서의 작성을 마친 후에 저장을 하면, 확장자가 자동으로. html로 .html 저장됩니다. 그런데, 메모장과 같은 기본 에디터 프로그램으로 코드 구현 시에는, 확장자명을 임의로 수정을 해줘야 합니다.
HTML Version & W3(World Wide Web Consortium)
1) HTML의 Version
: HTML의 Version에 대한 설명은 아래 Table 참조 부탁드립니다.
2) W3(World Wide Web Consortium)
: W3C는 World Wide Web Consortium의 약자입니다. 보통 인터넷 웹사이트를 열 때 보면, 대부분 앞에, "www"이라고 붙여서 입력하는 걸 확인하실 수 있습니다. 좀 더 풀어서 설명드리면, W3C는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관입니다. 이러한 W3C가 관리하는 대표적인 웹 표준은 다음과 같습니다.
1. HTML
2. CSS
3. DOM
4. SVG
5. XHTML
6. XML
그럼 1, 2, 3번 항목에서 설명한 HTML 코드를 정말 간단하게 구현해보도록 하겠습니다. HTML 코드는 아래 참조하세요.
==================================================================================
# document type을 먼저 선언을 함.
<!DOCTYPE html>
# html 에서 사용한 언어를 표시 합니다. English는 기본적으로 선언이 되서 그런지, 따로 선언하지 않아도, 잘 입력이 됨.
<html lang="ko">
<html lang="en">
# 크게 Head와 Body로 이루어져 있음, Head를 먼저 선언함.
<head>
<meta charset="UTF-8">
</head>
# body에는 문서의 내용을 기재하시면 됨. 크게 Head와 Body로 이루어져 있음, Head를 먼저 선언함.
<body>
# "h" 은 Title의 글자 형태로 크게 출력이 되고, Bold 처리가 됨.
<h1>첫번째 제목</h1>
<h2> First Title </h2>
# "p" 은 Title의 글자보다 작고, Bold 처리를 하지 않음.
<p> 첫번째 내용 </p>
<p> 두번째 내용 </p>
</body>
# 마지막에, "html"를 선언을 해줌.
</html>
==========================================================================
이상입니다. HTML은 대학교 때 처음으로 살짝 배우고 이 번에 공부하면 다시 공부하고 있습니다. 이럴 거였으면, 대학교 때 정말 열심히 공부할 걸 이라는 생각이 많이 들고 있습니다. 이 포스팅을 보시는 분이 대학생이시고, 전공이 프로그램이랑 관련이 있다면, 정말 열심히 공부해보시라고 추천드립니다. 4차 혁명, AI가 도래하는 시대에, 정말 프로그래밍 잘하면 너무나도 유망하고, 능력 있는 사람이 되는 걸음을 먼저 띄는 거라고 생각합니다. 그리고 같이 같이 공부하시면 같이 성장하시죠! 저도 열심히 하겠습니다. 그럼 마무리하겠습니다. 감사합니다.
참조 자료 : tcpschool.com/
제 Posting이 조금이나마 정보 전달에 도움이 되셨길 빌며, 되셨다면, 구독, 댓글, 공감 3종 세트 부탁드립니다. 감사합니다.
[저작권이나, 권리를 침해한 사항이 있으면 언제든지 Comment 부탁드립니다. 검토 후 수정 및 삭제 조치하도록 하겠습니다. 그리고, 기재되는 내용은 개인적으로 습득한 내용이므로, 혹 오류가 발생할 수 있을 가능성이 있으므로, 기재된 내용은 참조용으로만 봐주시길 바랍니다. 게시물에, 오류가 있을 때도, Comment 달아 주시면, 검증 결과를 통해, 수정하도록 하겠습니다.]
'HTML & CSS' 카테고리의 다른 글
| 웹페이지 크롤링 + re 정규 표현식을 이용하여 조건 속성 값 정의 하기 (0) | 2021.03.01 |
|---|---|
| 웹 페이지 크롤링 작업 수행 위한 기초 지식 이해하기 - requests 라이브러리 (0) | 2021.02.27 |
| 웹 페이지 기본 지식 이해하기 - HTTP (Hyper Text Transfer Protocol) 과 웹페이지 호출 Method GET & POST (0) | 2021.02.20 |
| BeautifulSoup 패키지를 이용해서 HTML 내용 가져오기 (14) | 2021.02.13 |
| 웹 페이지 크롤링 작업 수행 위한 기초 지식 이해하기 - OPEN API 이용하기 (4) | 2021.02.13 |
댓글