liTag, olTag&ulTag, TitleTag 및 태그의 구조

■LiTag

목차를 완료하려면 다음과 같이 입력해야 한다.

1.HTML<br>

2.CSS<br>

3.JavaScript<br>

<h1>HTML</h1>

<p style="margin-top : 40px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

<img src="coding.jpg" width="15%">

<p>HTML elements are the building blocks of HTML pages.

With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.

It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.

 

 

결과를 보면 그럴 듯 하게 보입니다. 그러나, HTML을 만든 사람들은 목차를 쓸 때 사용하라고 어떠한 태그를 고안해 냈습니다. 따라서 그 태그를 써야 하는데 바로 그 태그가 <li>태그입니다.

 

따라서 코드를 다음과 같이 수정합니다.

 

<li>1.HTML</li>

<li>2.CSS</li>

<li>3.JavaScript</li>

<h1>HTML</h1>

<p style="margin-top : 40px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

<img src="coding.jpg" width="15%">

<p>HTML elements are the building blocks of HTML pages.

With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.

It 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>

 

 

내용과는 관계 없지만, 무엇인가를 설명하기 위해 불특정 닉네임을 작성해보겠습니다.

예를 들면, egoing, k8805, youbin이라 쓰고 똑같이 써볼까요?

 

<li>1.HTML</li>

<li>2.CSS</li>

<li>3.JavaScript</li>

<li>egoing</li>

<li>k8805</li>

<li>youbin</li>

<h1>HTML</h1>

<p style="margin-top : 40px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

<img src="coding.jpg" width="15%">

<p>HTML elements are the building blocks of HTML pages.

With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.

It 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>

 

 

이러한 경우 서로 구분이 안 되기 때문에 띄어쓰기를 하고 싶은데, 목록 부분에 <br>을 써도 구분되겠지만 이런 경우에 쓰라고 고안된 태그가 있습니다. <li>의 부모 태그 <ul>이란 태그입니다. 코드를 다음과 같이 수정합니다.

 

■ol태그와 ul태그

 

 

<ul>

<li>1.HTML</li>

<li>2.CSS</li>

<li>3.JavaScript</li>

</ul>

<ul>

<li>egoing</li>

<li>k8805</li>

<li>youbin</li>

</ul>

<h1>HTML</h1>

<p style="margin-top : 40px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

<img src="coding.jpg" width="15%">

<p>HTML elements are the building blocks of HTML pages.

With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.

It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items

 

.즉, <li> 같은 항목은 어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 부모 태그가 필요합니다. 그러므로 <li> 태그는 반드시 부모 태그를 가지고 있고, 부모 태그인 <ul> 태그는 반드시 자식 태그를 가지고 있습니다. 참여자 목록을 다시 지웁니다.

 

※ul 태그를 ol태그로 변경할 시 항목에 번호를 매겨서 주니 참고

 

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

 

<h1>HTML</h1>

<p style="margin-top : 40px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

<img src="coding.jpg" width="15%">

<p>HTML elements are the building blocks of HTML pages.

With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.

It 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>

■TitleTag

 

<title>WEB1- HTML</title>

 

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

 

<h1>HTML</h1>

<p style="margin-top : 40px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

<img src="coding.jpg" width="15%">

<p>HTML elements are the building blocks of HTML pages.

With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.

It 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>

 

 

■MetaTag

 

ATOM 우측 하단을 보면 다음과 같이 나와있는데,

컴퓨터는 모든 정보를 0 아니면 1로 최종적으로 저장합니다. 그런데 0과 1을 어떻게 저장할 것인지에 관한 여러 가지 약속들이 있는데, 이 약속 중 하나가 위에 나와있는 UTF-8입니다.

 

그러므로 현재 우리가 작성한 이 파일은 무엇인지는 모르지만, 웹브라우저가 열 때도 UTF-8로 열어야 문제가 없으므로 웹 브라우저에게 이 웹페이지를 열 때 UTF-8로 열라고 지시해야 합니다.

 

<title>WEB1- HTML</title>

<meta charset = "utf-8">

 

 

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

 

......

 

일부 웹 브라우저는 버전에 따라 한글을 정상적으로 번역하지 않아 글씨가 깨져 보이는 현상이 발생할 수 있으므로, 사전에 대비해야 글씨가 깨져보이는 현상에 대비할 수 있습니다.

 

 

■HeadTag, BodyTag

 

위에 설명했던

<title>WEB1 – HTML</title>

<meta charset = “utf-8”>

같은 경우에는 본문을 설명하고 그 밑의 코드들은 전부 본문입니다.

 

<title>은 본문의 제목이 무엇인지를 설명하고 <meta charset=“utf-8”>은 이 본문이 UTF-8이라는 방식으로 저장되어 있다는 것을 설명합니다. HTML을 만든 사람들은 본문을 <body>라는 태그로 묶고 본문을 설명하는 태그는 <head>로 묶기로 했습니다.

 

<head>

<title>WEB1- HTML</title>

<meta charset = "utf-8">

</head>

<body>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

<h1>HTML이란 무엇인가?</h1>

...............

</body>

 

■HTMLTag & <!DOCTYPE HTML>

HTML에 있는 모든 태그는 <head>태그 또는 <body> 태그 중 하나 아래에 놓이게 됩니다. 그리고 head태그와 body태그를 감싸는 최고위층 태그가 있는데, 바로 <html> 태그입니다.

그리고 이 HTML 태그 위에 관용적으로 이 문서에는 HTML이 담겨 있다는 뜻에서

<!DOCTYPE HTML>이라고 쓰면 됩니다.

 

<!DOCTYPE HTML>

<html>

<head>

<title>WEB1- HTML</title>

<meta charset = "utf-8">

</head>

<body>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

<h1>HTML이란 무엇인가?</h1>

...............

</body>

</html>

 

이것이 바로 기본적인 웹사이트의 구조입니다.

지금 바로 매일 같이 방문하는 웹사이트를 방문후 F12키를 눌러봅시다.

 

소스 내용을 살펴보면 맨 위에 <!DOCTYPE HTML>이 보이고 그 밑 HTML, HEAD, BODY태그가 보일 것입니다.

 

 

■aTag

 

<head>

<title>WEB1- HTML</title>

<meta charset = "utf-8">

</head>

<body>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

<h1>HTML이란 무엇인가?</h1>

<p style="margin-top : 40px;">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and web applications.

Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

 

위에 굵게 표시처리되어있는 부분처럼 a태그를 걸면 해당 주소로 링크가 걸리게 된다.

또한, 링크를 클릭했을 때, 새 탭으로 열리게 하고 싶다면

 

<a href="https://www.w3.org/TR/html5/" target=“_blank“> Hypertext Markup Language (HTML)</a>

 

target=“_blank”로 처리를 해주면 된다

 

툴팁처리는 다음과 같이 한다.

 

<a href="https://www.w3.org/TR/html5/" target=“_blank“ title=“HTML5 specification“ >Hypertext Markup Language (HTML)</a>

 

처럼, title 속성을 붙이면 된다. 툴팁은 확인하기가 쉽지 않아. 직접 해보길 권장한다.