기술소개
HTML : Hyper Text Markup Language
Hyper Text : 링크와 같은기능
Markup : 문법적인 형식
-> 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업 형식을 가진 프로그래밍 언어
Language : 언어
언어의 핵심은 약속이다. 약속을 공유하고 있기 때문에 서로 소통이 가능하다.
기계를 제어하고 싶으면 사람도 이해할 수 있고, 기계도 이해할 수 있는 약속이 필요하며 이를 언어라고 부른다.
HTML은 웹 브라우저에 표시되는 웹 페이지를 컴퓨터에게 만들어달라고 표현하는 언어이다.
사람과 웹 브라우저 사이에서 모두가 이해 가능한 약속(언어)이다.
웹 브라우저에서 우클릭 -> 페이지 소스 보기를 클릭하면 나오는 문자들이 HTML 코드 이다.
기본 문법
태그 : HTML에서 가장 중요한 문법이며 Markup가 태그와 밀접한 관계를 가진다.
텍스트 파일에 내용을 넣고, 인코딩은 utf-8 로 하고, 확장자는 .html 확장자를 사용하여야 한다.
확장자가 html이면 파일을 더블클릭 했을 때 웹 브라우저가 열린다. 운영체제가 해당 확장자를 열 프로그램을 미리 지정하고 있기 때문이다.
텍스트 편집기에 입력된 내용을 웹 브라우저가 화면에 표시해주고 있다.
<strong> </strong>안에 있는 내용은 글씨가 굵게 강조되어 표시된다. 이러한 것들을 태그라 그러고, <strong>를 시작태그 , </strong>를 닫히는 태그라 한다. 시작 태그에서 닫히는 태그 안에 있는 내용을 강조하는 것이다.
웹 브라우저에서는 텍스트 편집기에서 입력한 줄바꿈이 적용되지 않는다.
위와 같이 <h1>태그를 사용하면 제목을 적을 수 있다. h1은 heading 1 이라는 뜻이다. 웹 브라우저는 h1이라는 태그가 사용되면 굵고 큰 글씨로 표현되고, 줄을 바꾼다고 약속되어 있기 때문에 h1 태그를 작성하면 위와 같이 표현한다. 더 작은 제목을 쓰고 싶으면 h2를 사용하면 된다.
태그는 꺽쇠로 시작하고, 꺽쇠 안 태그 이름에 슬래시를 붙인다.
하이퍼텍스트와 속성
a 라는 태그로 다른 웹사이트의 링크를 달 수 있다. 연결될 웹 페이지의 url을 a 뒤 href=""에 넣어야 한다. href와 같은것을 속성 이라고 한다.
웹 페이지에 링크가 생기며 클릭하면 href속성에 작성한 url로 페이지가 이동된다.
위와 같이 target 라는 속성에 "_blank"를 넣으면 새 탭에서 연결된 url 페이지가 열린다. 속성의 순서는 상관 없고, 속성에 따라서 태그의 기능이 추가된다.
a 태그는 문서와 문서가 연결되는 하이퍼 텍스트를 구현한 것이다. a태그는 anchor에서 가져온 것이다. anchor은 배의 닻이라는 의미를 갖고 있고, 연결할 url에 정박해 있다는 의미일 것이다.
GML -> SGML -> SGMLguid -> HTML의 순서로 HTML이 발전하였다.
태그의 중첩과 목록
각각의 항목들을 리스트로 표현하려면 <li>라는 태그를 사용한다.
<li> 태그를 사용하면 각각의 항목들이 시각적으로 구분되게 사용할 수 있다.
서로 성격이 같은 태그들을 다음과 같이 <ul>태그로 묶으면 <ul>태그로 묶인 태그끼리 구분할 수 있다.
위와 같이 태그 안에 태그를 넣어 중첩하여 사용할 수도 있다. 위와 같은 방식으로 사용하면 태그가 복잡해질수록 읽기 힘들어 지기 때문에 들여쓰기를 사용하여 가독성을 높여줄 수도 있다.
위에 있는 순서가 있는 리스트로 표현하려면 ul을 ol로 바꿔 주면 된다.
li 는 list의 약자이고, ol은 ordered list의 약자이고, ul은 unordered list의 약자이다.
문서의 구조
<title> 태그를 사용하면 탭의 제목을 정해줄 수 있다. <meta charset="utf-8">을 사용하면 문서가 깨질 경우를 방지할 수 있다.
<title>HTML - 수업</title>
<meta charset="utf-8">
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<h2>hello world</h2>
html 문서의 위 두줄은 본문과는 관계없는 부가적인 내용들을 담고 있고, 그 아래부터는 본문의 내용들을 담고 있다.
html에서는 문서의 부가적인 정보들과 본문에 해당하는 정보들을 각각 다른 태그에 담도록 약속하고 있다.
본문이 아닌 태그들과 본문인 태그들은 head태그와 body 태그로 구분하기로 약속하고 있다.
또한 문서의 가장 바깥에 html 태그를 두어 그 안에 head 태그와 body 태그를 담기로 약속되어 있다.
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<h2>hello world</h2>
</body>
</html>
DOCTYPE
DOCTYPE은 html문서의 시작 부분에 <!DOCTYPE html>이라는 태그를 넣어 줘야 한다.
DOCTYPE은 Document type declaration의 약자이다. 어떤 방식으로 html코드를 작성했는지 브라우저에게 알려주는 문자이다. 어떠한 표준에 따라 문서를 작성했는지 알려주는 역할을 한다.
웹사이트 만들기
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
<li><a href=1.html>기술소개</a></li>
<li><a href=2.html>기본문법</a></li>
<li><a href=3.html>하이퍼텍스트와 속성</a></li>
<li><a href=4.html>리스트와 태그의 중첩</a></li>
</ol>
<h2>hello world</h2>
</body>
</html>위와 같은 li 태그의 내용에 a태그로 링크를 걸어서 각 페이지 마다 다른 내용을 웹 브라우저에서 보여주는 웹 사이트를 만들 수 있다. 이 실습에서는 본문은 다 동일하게 하고 페이지 구분을 위해 h2 태그의 내용만 수정하였다. 다음은 기본문법에 링크된 페이지(2.html) 이다.
개발도구
html을 사용하여 웹 페이지를 만들 때 사용하는 도구(프로그램)이다. 개발 도구에는 atom, sublime text, bracket등이 있다. 나는 개발도구로 vscode를 사용할 것이다.
HTML의 변천사와 통계
www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html
HTML Tag History
HTML Tags: Past, Present, Proposed © 2012, Martin Rinehart Prerequisite: This page was prepared for students learning from Professional HTML, Volume I of V in the Frontend Engineering series. It is most meaningful to persons currently using HTML who wish
www.martinrinehart.com
위 사이트는 html 버전의 태그들이 어느 버전때 생겨났고, 어느 버전때 사라지게 된 태그들이 있는지 확인할 수 있는 html 연대기 사이트 이다.
www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
위 사이트는 구글에서 분석한 웹 페이지에서 html태그를 얼마나 많이 사용하는가? 어떤 태그들이 웹 페이지에서 많이 등장하는가? 등의 html의 태그에 관련된 통계를 확인할 수 있다.
주요태그
단락 - p
p 태그는 paragraph의 줄임말로 단락을 구분할 때 사용한다. 단락은 줄바꿈과 약간의 여백으로 구분한다.
<html>
<body>
<p>
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
</p>
<p>
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages.
</p>
<p>
With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.
HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets.
</p>
</body>
</html>
p 태그를 사용하면 웹 페이지에서 단락을 구분할 수 있다. 단락간의 간격은 CSS를 통해서 변경시킬 수 도 있다.
'Project H4C Study Group' 카테고리의 다른 글
| [Project H4C] opentutorials HTML(3) (0) | 2021.02.09 |
|---|---|
| [Project H4C] opentutorials HTML(2) (0) | 2021.02.06 |
| [Project H4C] 코드업 기초100제(4) (0) | 2021.02.04 |
| [Project H4C] 코드업 기초 100제(3) (0) | 2021.02.04 |
| [Project H4C] 코드업 기초100제(2) (0) | 2021.02.03 |