안녕하세요~ 뉴핀입니다.
2022.08.08 - [Programming/WEB] - [HTML5.0] 시맨틱(semantic)하다는 것에 대하여... - 2편. 시맨틱 웹
[HTML5.0]시맨틱(semantic)하다는 것에 대하여... - 2편. 시맨틱 웹
안녕하세요~ 뉴핀의 테드입니다. [HTML5.0]시맨틱(sementic)하다는 것에 대하여... - 1편. 시맨틱 태그 안녕하세요~ 뉴핀의 테드입니다. 오늘은 시맨틱 웹의 개념을 알아보고 시맨틱 하다는 것의 의미
nufyn.tistory.com
저번 시간에는 시멘틱 웹을 구현하려면 어떻게 해야 하는가! 에 대하여 알아보았습니다. 결과적으로 여러분들이 할 일은 '시맨틱 웹의 목적과 장점을 정확히 알고, 시맨틱 하게 웹페이지를 구현하는 것'입니다. 1편에서도 말씀드렸듯이 HTML5.0에는 시맨틱 웹을 위한 '시맨틱 태그'가 있습니다. 아직까진 '<div>'로 가득 찬 웹페이지들이 더 많이 남아있지만 브라우저들은 점점 발전하여 시맨틱 태그의 손을 들어줄 것이고, 시맨틱 한 웹페이지들에게 더 많은 혜택을 줄 것입니다. 여러분들도 시맨틱 웹을 구현하여 미래로 나아갑시다.
오늘은 HTML5.0에 대해서 배워볼 겁니다. 드디어 웹 프런트엔드 개발자로서 시작하게 될 겁니다.
1. HTML(Hyper Text Markup Language)의 의미
HTML은 Hyper Text Markup Language의 줄임말입니다. 처음 접하신 분들에게는 생소할 수 도 있지만 결국 세상에 있는 모든 코드는 언어(Language)이자 문장입니다.
Hyper Text의 의미
HyperText는 조금 이상하긴 하지만 현대에는 '웹페이지 혹은 웹 문서에서 쓰이는 text'라고 정의됩니다. HyperText라고 부르는 어원을 살펴보자면 HTML을 처음에 기획한 사람은 인터넷 상에서 문서를 쉽게 공유, 이용하고 싶었고 보통의 text가 아닌 hyper 한(초월한, 뛰어넘은) text를 만들고 싶었습니다. 여기서 '뛰어넘다'는 실제로 점프하듯이 다른 페이지로 넘어가는 것. 즉, 페이지를 초월하여 연결되는 것을 의미합니다. 쉽게 말해 하이퍼링크(ppt 쓸 때 사용하는 그거 맞습니다.)를 가진 text, 그것이 HyperText입니다.
Markup Language의 의미
Markup Language는 '태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지'입니다. 즉,
안녕?
나는 테드야
넌 누구니?
의 문장을 표현을 '한국어'라는 언어로 했다면, 'Markup Language'는
<인사말> 안녕? </인사말>
<제목> 나는 테드야</제목>
<물음> 넌 누구니? </물음>
이라는 식으로 표기(태그)를 붙여서 표기하는 언어입니다. 태그는 구조적으로 명시되어있으므로, 태그마다의 서열이 있습니다. 또한 의미와 기능을 가지고 있습니다. 이러한 태그들 덕에 저희는 웹페이지에서 이미지도 볼 수 있고, 링크를 통해 다른 페이지로 이동할 수도 있죠.
이해가 되셨나요?
HyperText Markup Language를 한마디로 표현하자면 '웹문서에서 쓰는 언어'입니다.
언어라는 관점에서 보면 '웹브라우저와 소통하기 위한 도구'라고도 볼 수 있습니다.
2. HTML을 써보자
이때까지 저희는 시맨틱 태그의 정체와 태그에 담긴 의미, 그리고 태그란 무엇인가에 대하여 배웠습니다. 알게 모르게 여러분들은 html의 기본 문법과 굉장히 친해졌을 겁니다. 아래의 코드를 한 번 볼까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>안녕?</header>
<h1>난 테드야</h1>
<p>넌 누구니?</p>
</body>
</html>익숙한 모습이 보이시나요?
<인사말> 안녕? </인사말>
<제목> 나는 테드야 </제목>
<물음> 넌 누구니? </물음>
<body> </body>라고 태그가 명시된 부분 안쪽을 '본문'이라고 합니다. 본문에 적힌 'HTML 코드'가 위에서 제가 예시로 들었던 마크업 언어와 똑같은 구조를 가지고 있습니다. 그리고 실제로 사용되는 태그이기도 합니다. 1편에서 살펴본 시맨틱 태그 중 하나인 '<header>'도 보이네요. 이제 보이시나요?
이상으로, HTML이란 무엇인가! 와 HTML 태그의 사용법을 배워보았습니다. 기본적으로 위의 내용만으로도 순수한 웹문서를 만들어낼 수 있습니다. '강조표시가 있는 긴 글' 정도지만요.
다음 시간에는 다양한 종류의 태그들을 배우고 여러분들이 직접 사용해보고 웹문서상에 출력해보는 실습시간을 가지도록 하겠습니다. HTML을 통해 구조를 짜고, style을 입혀 아래와 같은 웹문서를 직접 구현해보는 겁니다!
더 궁금한 점이 있다면 댓글 남겨주세요!!
감사합니다.
'Programming > WEB' 카테고리의 다른 글
| 크롬 확장프로그램 만들기 (1) (0) | 2022.11.28 |
|---|---|
| [HTML5.0] 시맨틱(semantic)하다는 것에 대하여... - 5편. <Main> (0) | 2022.11.07 |
| [HTML5.0] 시맨틱(semantic)하다는 것에 대하여... - 4편. header (0) | 2022.10.19 |
| [HTML5.0]시맨틱(semantic)하다는 것에 대하여... - 2편. 시맨틱 웹 (0) | 2022.08.08 |
| [HTML5.0]시맨틱(sementic)하다는 것에 대하여... - 1편. 시맨틱 태그 (0) | 2022.07.25 |
댓글