HTML과의 첫 만남

HTML이란 무엇인가?

HTML(Hypertext Markup Language)은 웹 페이지를 만드는 데 사용되는 마크업 언어이다. 웹 페이지의 구조와 내용을 정의하므로 모든 웹 사이트의 중추이다. HTML은 태그를 사용하여 웹 페이지의 다양한 요소를 정의하는 간단한 언어이다.

Element

우리가 만들어본 HTML 문서에서는 아직 작성하지 않았지만 갭ㄹ자 도구에서 확인할 수있다.
<>를 사용하여 시작하고 </>를 사용하여 끝나는 전체를 뜻한다.

기초

HTML은 태그를 사용하여 웹페이지의 여러 요소를 정의하는 마크업 언어이다. 태그는 "<"및">"와 같은 꺽쇠 괄호가 있다. HTML 문서는 사용중인 HTML 버전을 브라우저에 알려주는 DOCTYPE 선언으로 시작한다. HTML 문서의 루트 요소는 문서의 헤드 및 본문 섹션을 포함하는 HTML 태그이다.

HTML 요소 구조

HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공합니다.

또한, HTML 요소는 시작 태그로 시작해서 종료 태그로 끝납니다.

ex)

<!DOCTYPE html>
<html>
  <head>
    <title>블록 10기입니다.</title>
  </head>
  <body>
    <div>영역을 나누는 엘리먼트 입니다.</div>
    <h1>제목을 나타내는 엘리먼트입니다.</h1>
    <h2>제목을 나타내는 엘리먼트입니다.</h2>
    <h3>제목을 나타내는 엘리먼트입니다.</h3>
    <h4>제목을 나타내는 엘리먼트입니다.</h4>
    <h5>제목을 나타내는 엘리먼트입니다.</h5>
    <h6>제목을 나타내는 엘리먼트입니다.</h6>

    <pre>
        입력한 내용을 그대로 나타내는 엘리먼트입니다.
    그대로 나타낸다는 것은
        HTML 파일에서 보는 그대로 출력됩니다.

           그렇기 떄문에 프리티어가 pre 엘리먼트의 자식은 건들이지 않습니다.
    </pre>
    <strong
      >문장을 나타내는 엘리먼트입니다. 굵게 표현됩니다. strong 엘리먼트는
      공지사항 등 긴급한 내용을 강조항 때 사용합니다.
    </strong>
    <b
      >strong과 마찬가지로 문장을 나타내는 엘리먼트 입니다. b 엘리먼트는
      그냥의미 없는 굵은 글씨입니다.
    </b>
    <hr />
    수평선입니다.
    <del>delete, 삭제된 내용을 나타내는 엘리먼트 입니다.</del>
    <ins>insert, 입려된 내용을 나타내는 엘리먼트 입니다.</ins>
    <i>기울어진 글자를 나타내는 엘리먼트 입니다.</i>
    <em>기울어진 글자를 나타내는 엘리먼트 입니다. 강조할때 사용합니다.</em>
    <p>2<sub>2</sub></p>
    <p>2<sup>2</sup></p>
    <div>이 위로는 Text, 즉 글자 관련 element입니다.</div>
    <hr />
    <div>
      <ul>
        <li>ul, unordered list, 순서가 없는 리스트</li>
        <li>늘려봅시다.</li>
        <li>목록의 아이템을 나타냅니다.</li>
      </ul>
      <ol>
        <li>ordered list, 순서가 있는 리스트</li>
        <li>늘려봅시다.</li>
        <li>목록의 아이템을 나타냅니다.</li>
        <table>
          <thead>
            <tr>
              <th>번호</th>
              <th>이름</th>
              <th>성별</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <td>박상현</td>
              <td>남자</td>
            </tr>
            <tr>
              <th>2</th>
              <td>주성우</td>
              <td>남자99</td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th colspan="2">The table header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>The table body</td>
              <td>with two columns</td>
            </tr>
          </tbody>
        </table>
      </ol>
    </div>
  </body>
</html>

블록 10기입니다.

영역을 나누는 엘리먼트 입니다.

제목을 나타내는 엘리먼트입니다.

        입력한 내용을 그대로 나타내는 엘리먼트입니다.
    그대로 나타낸다는 것은
        HTML 파일에서 보는 그대로 출력됩니다.

           그렇기 떄문에 프리티어가 pre 엘리먼트의 자식은 건들이지 않습니다.

문장을 나타내는 엘리먼트입니다. 굵게 표현됩니다. strong 엘리먼트는 공지사항 등 긴급한 내용을 강조항 때 사용합니다. strong과 마찬가지로 문장을 나타내는 엘리먼트 입니다. b 엘리먼트는 그냥의미 없는 굵은 글씨입니다.

수평선입니다. ~~delete, 삭제된 내용을 나타내는 엘리먼트 입니다.~~ insert, 입려된 내용을 나타내는 엘리먼트 입니다. 기울어진 글자를 나타내는 엘리먼트 입니다. 기울어진 글자를 나타내는 엘리먼트 입니다. 강조할때 사용합니다.

2₂

2²

이 위로는 Text, 즉 글자 관련 element입니다.

ul, unordered list, 순서가 없는 리스트
늘려봅시다.
목록의 아이템을 나타냅니다.

ordered list, 순서가 있는 리스트
늘려봅시다.
목록의 아이템을 나타냅니다.

번호	이름	성별
1	박상현	남자
2	주성우	남자99

The table header
The table body	with two columns

출력 값

ex).2

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

Simple table with header

First name	Last name
John	Doe
Jane	Doe

Table with thead, tfoot, and tbody

Header content 1	Header content 2
Footer content 1	Footer content 2
Body content 1	Body content 2

Table with colgroup

Countries	Capitals	Population	Language
USA	Washington D.C.	309 million	English
Sweden	Stockholm	9 million	Swedish

Table with colgroup and col

Lime	Lemon	Orange
Green	Yellow	Orange

Simple table with caption

Awesome caption
Awesome data

HTML

Elements & Attributes

엘리먼트의 종류

HTML 엘리먼트는 아래와 같은 모습으로 분류할 수 있다. 각각의 요소는 다양한 분류에 속할 수 있고, 어떠한 분류에도 속하지 않는 것도 있다.

metadata (메타데이터) 메타의 일반적인 의미는 데이터를 설명하는 데이터라는 의미다. HTML에서 메타데이터란 엘리먼트가 감싸고 있는 데이터의 성격을 정의(noscript, script, style)하거나, 문서를 설명하는(title, meta) 역활을 하는 엘리먼트들을 의미한다.
flow content (플로우 컨텐츠) body 엘리먼트 하위에서 사용되는 엘리먼트들이나, 응용프로그램에서 사용되는 엘리먼트들은 대부분 플로우 컨텐츠로 분류된다. flow content는 그 자식으로 문자나, 포함된 컨텐츠를 자식으라 가져야 한다. 포함된 컨턴츠란 img와 같이 외부의 자원을 문서에 삽입할 때 사용하는 엘리먼트들을 의미한다.(audio, canvas, embed, iframe등)
sectioning content (섹션 컨텐츠) 기능이나 의미에 따라서 구간을 구분짓는다. 예를들면 nav 엘리먼트는 문서 안에서 네비게이션에서 사용되는 엘리먼트들을 감싸서 네비게이션 영역을 분류할 수 있다.
Heading content (제목 컨텐츠) 제목을 표현할 때 사용하는 엘리먼트.(h1~h6, hgroup)
Phrasing content (구문 컨텐츠) 문자나 구문을 표시하는 엘리먼트. 구문 컨텐츠가 모여서 문단(paragraphs)를 만든다.
Embedded content (포함된 컨텐츠) 다른 자원을 문서에 삽입하는 엘리먼트를 의미한다. 이를테면 iframe은 웹페이지라는 자원을 현재 문서 안에 삽입할 수 있게 해준다.
Interactive content (대화형 컨텐츠) 사용자와 상호작용하기 위한 엘리먼트. a, input, button 과 같은 것들이 있다.

<html> : HTML 문서의 범위를 설정.

<body> : HTML 문서의 구조를 설정.

<title> : 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정.

<base /> : HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정.(한문서에 하나의 <base /> 요소만 포함 가능)

<h1>,<h2>, <h3>, <h4>, <h5>, <h6> : 문서의 정보 계층을 구조화.

(Heading, 문서나 구분된 영역의 제목을 설정, 문서의 목차. 숫자가 낮을수록 높은 단계(중요한)의 제목.)

<header> : 문서의 헤더를 설정,(보통 로고, 제목, 검색 등을 포함)

<footer> : 문서의 푸터를 설정.(보통 작성장, 저작권, 관련 문성 등을 포함)

<main> : 문서의 주요 콘텐츠를 설정.(IE 지원 불가, 한 문서에 하나의 <main> 요소만 포함 가능

<article> : 독립적으로 구분되거나 재사용 가능한 영역을 설정. (매거진/신문 기사, 블로그 등

일반적으로 <h1>~<h6>를 포함하여 식별.
작성일자와 시간을 <time>의 datetime 속성으로 작성.

<section> : 문서의 일반적인 영역을 설정.

일반적으로 <h1>~<h6>를 포함하여 식별.

<aside> : 문서의 별도 콘텐츠를 설정. (보통 광고나 기타 링크 등의 사이드바(Side bar)를 설정)

<nav> : 다른 페이지 링크를 제공하는 영역을 설정.
(Navigation, 보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정)

<address> : <body>, <article>, <footer> 등에서 연락처 정보를 제공하기 위해 포함하여 사용.

<div> : 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.
(Division, 꾸미는 목적으로 사용)

어떤 콘텐츠든 좋습니다. <p>, <table>같이 말이죠. 써보세요!

문자 콘테츠

<ol>, <ul>, <li>

각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정.
(Ordered List, Unordered List, List Item, 순서가 필요하거나(<ol>) 순서가 필요하지 않은(<ul>) 목록을 정의)

<ol>과 <ul>은 자식으로 <li>만 포함 가능.
<li>는 단독으로 사용할 수 없으며, <ol>이나 <ul>에 자식으로 포함되어야 함.
정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있음.

<ol> : 정렬된 목록을 설정.

<li>: 항목을 설정.

<dl>, <dt>, <dd>

용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정.
(Description List, Definition Details, Definition Term)

<dl>은 <dd>, <dt>만을 포함해야 함.
키(key)/값(value) 형태를 표시할 때 유용.

<p> : 하나의 문단을 설정.
(Paragraph)

일반적으로 정보통신보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공함.

<hr> : 문단의 분리(주제에 의한)를 위해 설정.
(Horizontal Rule)

대부분의 경우 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로만 사용해야 함.

<pre> : 서식이 미리 지정된 텍스트를 설정.
(Preformatted Text)

텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음.
기본적으로 Monospace 글꼴 계열로 표시됨.

<blockquote> : 일반적인 인용문을 설정.
(Block Quotation)

인라인 텍스트

<a> : 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정.(Anchor, 외부로 내보내기)

<abbr> : 약어를 지정 머리글자를 나탠다.(Abbreviation, 보통 tittle 속성을 사용 하여 전체 글자나 설명을 제공)

<b> : 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용한다.

<mark> : 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

<em> : 택스트의 강세를 나타냅니다. <em> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.

<strong> : <strong> 요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표현합니다.

<i> : 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.

<dfn> : <dfn> 요소는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다.<dfn에서 가장 가까운 <p>, <dt>/<dd><section> 조상 요소를 용어 정의로 간주 합니다.

<cite> : 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.

<q> : 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. <q>는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 <blockquote> 요소를 사용하세요.

<u> : 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 기본값에서는 단순한 밑줄로 표시 하지만 CSS를 사용해 바꿀 수 있습니다.

<code> : 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다.( 사용자 에이전트(user agent)는 사용자를 대표하는 컴퓨터 프로그램으로, 웹 맥락에선 브라우저를 의미합니다.

<kbp> : 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.

<sup> : <sup>요소는 타이포그래피상의 이유로만 사용해야 합니다. 즉, 프리젠테이션이나 모양을 위한 목적이 아니라 타이포그래피 규칙이나 표준을 준수하도록 텍스트의 위치를 변경하는 것입니다.

<sub> : 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.

<time> : 날짜나 시간을 나타내기 위한 목적으로 사용.

<span> : 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.

<br /> : 줄바꿈을 설정.

표 콘텐츠

<table>, <tr>, <th>, <td>

- 데이터 표(<table>)의 행(줄 / <tr>)과 열(칸, 셀(Cell) / <th>, <td>)을 생성.
(Table Row, Table Header, Table Data)

John Doe

Jane Doe

'블록체인 sw개발자' 카테고리의 다른 글

[HTML] <input><meta> 아이디 , 설문조사 만들기 (0)	2023.06.14
웹 브라우저와 웹 편집기 및 Visual studio code 설치와 기능 (0)	2023.06.13
웹 브라우저의 종류 와 구조 (0)	2023.06.13
컴파일러와 인터프리터 (0)	2023.06.12
프론트엔드와 백엔드 (0)	2023.06.12

sang969

HTML 기초

제목을 나타내는 엘리먼트입니다.