목록 (List)

순서없는 목록 (Unordered List)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
  <body>
    <h2>순서없는 목록 (Unordered List)</h2>
    <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
  </body>
</html>

 

 

순서있는 목록 (Ordered List)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
  <body>
    <h2>순서있는 목록 (Ordered List)</h2>
    <ol>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ol>
  </body>
</html>

 

 

 

 

type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있음

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h2>순서있는 목록 (Ordered List)</h2>
<ol type="I">
    <li value="2">test1</li>
    <li value="4">test2</li>
    <li>test3</li>
</ol>
</body>
</html>

type 어트리뷰트로 대문자 로마숫자 사용

 

 

 

 

 

start 어트리뷰트로 리스트의 시작값을 지정할 수 있음

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h2>순서있는 목록 (Ordered List)</h2>
<ol start="3">
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>
</body>
</html>

start 어트리뷰트로 시작값 3부터 시작

 

 

 

 

 

 

reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h2>순서있는 목록 (Ordered List)</h2>
<ol reversed>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>
</body>
</html>

reversed 어트리뷰트 사용 역순으로 표현됨

 

 

 

 

 

 

중첩 목록

목록 태그는 내비게이션 메뉴를 만들 때 자주 사용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h2>중첩 목록</h2>
    <ul>
      <li>test1</li>
      <li>test2
        <ol>
          <li>test</li>
          <li>test</li>
        </ol>
      </li>
      <li>test3</li>
    </ul>
</body>
</html>

 

 

 

 

테이블

표(table)를 만들 때 사용하는 태그

과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나

모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<table border="1">
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Score</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
</body>
</html>

 

 

 

 

테이블 태그의 어트리뷰트

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">

    <style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <h2>2개의 culumn을 span</h2>
    <table>
      <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
      </tr>
      <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
      </tr>
    </table>

    <h2>2개의 row를 span</h2>
    <table>
      <tr>
        <th>Name:</th>
        <td>Bill Gates</td>
      </tr>
      <tr>
        <th rowspan="2">Telephone:</th>
        <td>555 77 854</td>
      </tr>
      <tr>
        <td>555 77 855</td>
      </tr>
    </table>
  </body>
</html>

 

 

하이퍼링크(hyper link)란?

HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공

한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능

 

HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당

 

 

 

예제 ) 클릭시 google 사이트로 이동

<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.google.com">Visit google.com!</a>
  </body>
</html>

클릭
이동

 

 

 

 

href 어트리뷰트

href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미

 

디렉터리(Directory)

- 루트 디렉터리 ( 최상위 디렉터리 )

   ( Unix: / ) , ( Windows: C:\ )

 

- 홈 디렉터리 ( 사용자에게 각각 할당된 개별 디렉터리 )

  ( Unix: /Users/{계정명} ) , (Windows: C:\Users\{계정명})

 

- 작업 디렉터리 ( 작업 중인 파일의 위치한 디렉터리

   ( ./ )

 

- 부모 디렉터리 ( 작업 디렉터리의 부모 디렉토리 )

   ( ../ )

 

 

 

 

 

파일 경로(File path)

파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법

경로에는 절대경로와 상대경로가 있음

 

- 절대경로(Absolute path)

현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다.

루트 디렉터리를 기준으로 파일의 위치를 나타냄

 ex)

 

 

 

- 상대경로(Relative path)

현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킴

ex)

 

 

 

 

 

fragment identifier

페이지 내부 이동 방법

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<h2 id="top">Top of page!</h2>
<a href="#bottom">⬇Go to bottom</a>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p>
<p>He didn't say any more, but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought-frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon; for the intimate revelations of young men, or at least the terms in which they express them, are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat, a sense of the fundamental decencies is parcelled out unequally at birth.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>




<a href="#top">⬆Go to top</a>
<h3 id="bottom">bottom of page!</h3>
</body>
</html>

 

Go to bottom 버튼 클릭시 맨 밑으로 이동

http://localhost:63342/homework/test.html?_ijt=icjhf0bikhprd62pk0nict84km&_ij_reload=RELOAD_ON_SAVE#bottom

이동하고나면 주소창에 'http://... /#'가 입력되는 것을 확인

해쉬태그로 인해 이동한 위치가 주소창에 나타남

 

 

 

 

반대로 밑에서 Go to top 클릭시 맨 위로 이동

http://localhost:63342/homework/test.html?_ijt=icjhf0bikhprd62pk0nict84km&_ij_reload=RELOAD_ON_SAVE#top

위에 처럼 해쉬태그로 인해 이동한 위치가 주소창에 나타남

 

 

 

 

 

 

target 어트리뷰트

target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정

Value Description
_self 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈
(기본값)
_blank 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈

target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 있음

따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장

 

 

 

 

_blank

<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Visit google.com!</a>
  </body>
</html>

클릭 시 새탭으로 오픈

 

 

 

_self

<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.google.com" target="_self" rel="noopener noreferrer">Visit google.com!</a>
  </body>
</html>

클릭 시 현재 탭에서 오픈

 

제목 (Headings) 태그

Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있음

h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 큼

 

시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋음

검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 큼

<!DOCTYPE html>
<html>
  <body>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <h4>heading 4</h4>
    <h5>heading 5</h5>
    <h6>heading 6</h6>
  </body>
</html>

 

글자 형태 (Text Formatting) 태그

bold

bold체를 지정

제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없음

<!DOCTYPE html>
<html>
  <body>
    <p>This text is normal.</p>
    <b>This text is bold.</b>
    <p style="font-weight: bold;">This text is bold.</p>
  </body>
</html>

 

 

strong

b tag와 동일하게 bold체를 지정

하지만 의미론적(Semantic) 중요성의 의미를 갖음

표현되는 외양은 b tag와 동일

웹표준을 준수하고자 한다면 strong를 사용하는 것이 바람직

<!DOCTYPE html>
<html>
  <body>
    <p>This text is normal.</p>
    <strong>This text is strong.</strong>
  </body>
</html>

 

Italic

Italic체를 지정

의미론적(Semantic) 중요성의 의미는 없음

<!DOCTYPE html>
<html>
  <body>
    <p>This text is normal.</p>
    <i>This text is italic.</i>
    <p style="font-style: italic;">This text is italic.</i>
  </body>
</html>

 

emphasized

emphasized(강조, 중요한) text를 지정

Italic체로 표현

의미론적(Semantic) 중요성의 의미를 갖음

<!DOCTYPE html>
<html>
  <body>
    <p>This text is normal.</p>
    <em>This text is emphasized.</em>
  </body>
</html>

 

 

small

small text를 지정

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML <small>Small</small> Formatting</h2>
  </body>
</html>

mark

highlighted text를 지정

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML <mark>Marked</mark> Formatting</h2>
  </body>
</html>

 

 

del

deleted (removed) text를 지정

<!DOCTYPE html>
<html>
  <body>
    <p>The del element represents deleted (removed) text.</p>
    <p>My favorite color is <del>blue</del> red.</p>
  </body>
</html>

 

 

ins

inserted (added) text를 지정

<!DOCTYPE html>
<html>
  <body>
    <p>The ins element represent inserted (added) text.</p>
    <p>My favorite <ins>color</ins> is red.</p>
  </body>
</html>

 

 

sub / sup

sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정

<!DOCTYPE html>
<html>
  <body>
    <p>This is <sub>subscripted</sub> text.</p>
    <p>This is <sup>superscripted</sup> text.</p>
  </body>
</html>

 

 

 

본문 태그

p

단락 (Paragraphs)을 지정

<!DOCTYPE html>
<html>
  <body>
    <h1>This is a heading.</h1>
    <p>Paragraphs 1</p>
    <p>Paragraphs 2</p>
  </body>
</html>

 

 

br

br tag는 (강제)개행 (line break)을 지정 

br tag는 빈 요소(empty element)로 종료태그가 없음

 

<!DOCTYPE html>
<html>
  <body>
    <p>This is<br>a para<br>graph with line breaks</p>
  </body>
</html>

 

 

HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시

1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시

 

 

 

&nbsp

연속적 공백을 삽입하는 방법

<!DOCTYPE html>
<html>
  <body>
    <p>This is&nbsp; a para&nbsp; &nbsp; graph</p>
  </body>
</html>

 

 

 

pre

형식화된(preformatted) text를 지정

pre 태그 내의 content는 작성된 그대로 브라우저에 표시

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
  <body>
  
    <pre>
var myArray = [];
console.log(myArray.length); // 0

myArray[1000] = true;  // [ , , ... , , true ]

console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined
    </pre>
  
  </body>
</html>

 

 

hr

수평줄 삽입

<!DOCTYPE html>
<html>
  <body>
    <h1>HTML</h1>
    <p>HTML is a language for describing web pages.</p>
    <hr>
    <h1>CSS</h1>
    <p>CSS defines how to display HTML elements.</p>
  </body>
</html>

 

 

q ( " " ) 

짧은 인용문(quotation)을 지정

브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감쌈

<!DOCTYPE html>
<html>
  <body>
    <p>Browsers usually insert quotation marks around the q element.</p>
    <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
  </body>
</html>

 

 

blockquote

긴 인용문 블록을 지정

브라우저는 blockquote 요소를 들여쓰기

css를 이용하여 다양한 style을 적용할 수 있음

<!DOCTYPE html>
<html>
  <body>
    <p>Browsers usually indent blockquote elements.</p>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </blockquote>
  </body>
</html>

'HTML' 카테고리의 다른 글

목록(List)와 표(Table) 형식 표현을 위한 태그  (0) 2023.01.27
Hyperlink  (0) 2023.01.27
웹페이지의 구성하는 기본 태그  (1) 2023.01.26
HTML5 기본 문법  (0) 2023.01.25
HTML5 시맨틱 태그  (0) 2023.01.19

문서 형식 정의 tag

문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달

문서의 최상위에 위치해야 하며 대소문자를 구별하지 않음

 

문서별 기술 양식

HTML5

<!DOCTYPE html>

 

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

 

html tag

html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재

모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한

<!DOCTYPE>는 예외

 

 

html은 글로벌 어트리뷰트를 지원, 특히 lang 어트리뷰트를 사용하는 경우가 많음

<html lang="ko">

한국어를 주언어로 사용하는 경우

 

 

 

 

head tag

head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재

메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않음

head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없음

 

 

title tag

문서의 제목을 정의

정의된 제목은 브라우저의 탭에 표시

<head>
    <meta charset="utf-8">
    <title>문서 제목</title>
</head>

 

style tag

style 요소에는 HTML 문서를 위한 style 정보를 정의

<head>
  <meta charset="utf-8">
  <title>문서 제목</title>
  <style>
    body {
      background-color: green;
      color: white;
    }
  </style>
</head>

 

 

 

 

 

link 요소에는 외부 리소스와의 연계 정보를 정의, 주로 HTML과 외부 CSS 파일을 연계에 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

 

href = style.css을 파일을 불러올것을 지시

rel = 불러오는 파일이 stylesheet임을 알려줌

 

css파일 적용된 모습

 

 

 

script tag

script 요소에는 client-side JavaScript를 정의

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>
  </head>
  <body>
    test
  </body>
</html>

JavaScript 실행

 

 

src 어트리뷰트를 사용하면 외부 JavaScript 파일을 로드할 수 있음

1. 절대 주소(absolute URL)
ex) src=“http://www.tcpschool.com/sample.js”

 

 

 


2. 상대 주소(relative URL)
ex) src=“/scripts/sample.js”

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>practice</title>

    </head>
    <body>

        <button onclick="btn_alert('test')"> 완료! </button>

        <script type="text/javascript" src="main.js"></script>

    </body>
</html>

.js 파일 생성

src 어트리뷰트 사용 test.html파일에서 main.js 파일 불러오기

 

 

 

 

 

 

 

 

meta tag

meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용

 

 

 

 

charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의

밑에 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>안녕하세요</p>
    <p>Hello</p>
    <p>こんにちは</p>
    <p>你好</p>
    <p>שלום</p>
    <p>สวัสดี</p>
  </body>
</html>

 

 

 

 

Keywords

SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords을 정의

현재는 있어도 없어도 어떠한 문제도 발생하지 않는다고 한다.(

밑에 예시

<meta name="keywords" content="키워드1, 키워드2, 키워드3">

 

 

 

Description

웹페이지의 설명을 정의

밑에 예시

<meta name="description" content="웹페이지 설명">

 

 

 

 

author

웹페이지의 저자을 명기

<meta name="author" content="cojun">

 

 

 

refresh

웹페이지를 30초 마다 Refresh

<meta http-equiv="refresh" content="30">

 

 

 

 

 

 

 body tag

body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재

메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술

'HTML' 카테고리의 다른 글

목록(List)와 표(Table) 형식 표현을 위한 태그  (0) 2023.01.27
Hyperlink  (0) 2023.01.27
텍스트 관련 태그  (0) 2023.01.26
HTML5 기본 문법  (0) 2023.01.25
HTML5 시맨틱 태그  (0) 2023.01.19

HTML5

HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어

웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화

HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식(document type)을 HTML5로 지정

<html>과 </html> 사이에 기술

<head>와 </head> 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않음

웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치

 

 

멀티미디어

플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원

 

그래픽

SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽 지원

 

통신

기존 HTML은 단반향 통신만이 가능하였으나 HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능 

 

디바이스 접근

카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어

 

오프라인 및 저장소

오프라인 상태에서도 애플리케이션을 동작 할수 있음, HTML5가 플랫폼으로서 사용될 수 있음을 의미

 

시맨틱 태그

HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명할 수 있음 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있음

 

CSS3

HTML5는 CSS3를 완벽하게 지원

 

 

 

 

 

요소(Element)

HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 콘텐츠(content)로 구성  

<p>반갑습니다!</p>

 

태그는 대소문자를 구별하지 않으나

HTML4의 경우 소문자를 추천하고 있으므로 HTML5에서도 소문자를 사용하는 것이 일반적

 

 

요소의 중첩 (Nested Element)

요소는 다른 요소를 포함할 수 있다. 이때 부자관계가 성립 부자관계로 정보를 구조화

 

<body>
<h1>안녕하세요</h1>
<p>반갑습니다!</p>
</body>

중첩 관계(부자 관계)로 웹페이지의 구조(structure)를 표현

 

<body>
   <h1>안녕하세요</h1>
   <p>반갑습니다!</p>
</body>

중첩 관계(부자 관계)를 시각적으로 파악하기 쉽게 indent(들여쓰기)를 활용

 

 

 

 

빈 요소(Empty Element)

content(내용)를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라 한다.

 

빈 요소 중 대표적인 요소

 - br

 - hr

 - img

 - input

 - link

 - meta

 

 

 

 

 

어트리뷰트 (Attribute)

어트리뷰트(Attribute 속성)이란 요소의 성질, 특징을 정의하는 명세

요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공

어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룸

 

 

 

글로벌 어트리뷰트 (HTML Global Attribute)

 

글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 

몇몇 요소에는 효과가 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대체로 모든 요소에 사용될 수 있음

 

자주 사용되는 글로벌 어트리뷰트

 id : 유일한 식별자(id)를 요소에 지정, 중복 지정이 불가

 class : 스타일시트에 정의된 class를 요소에 지정, 중복 지정 가능

 hidden : css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않음

 lang : 지정된 요소의 언어 지정, 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있음

 style : 요소에 인라인 스타일 지정

 tabindex : 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정

 title : 요소에 관한 제목을 지정

 

 

 

 

 

주석 (Comments)

주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않음

 

<head>
    <meta charset="UTF-8">
    <!--주석은 화면에 표시되지 않는다.-->
    <p>test</p>
    <!--주석은 화면에 표시되지 않는다.-->
</head>

주석은 빼고 test만 출력 된 모습

 

 

'HTML' 카테고리의 다른 글

목록(List)와 표(Table) 형식 표현을 위한 태그  (0) 2023.01.27
Hyperlink  (0) 2023.01.27
텍스트 관련 태그  (0) 2023.01.26
웹페이지의 구성하는 기본 태그  (1) 2023.01.26
HTML5 시맨틱 태그  (0) 2023.01.19

+ Recent posts