반응형

HTML(Hyper Text Markup Language)

  • 웹페이지의 기초(내용, 구조등)를 만드는 마크업 언어

마크업 언어(Markup Language)

  • 태그 등을 이용하여 문서나 데이터의 구조를 표현하는 언어

HTML 기본 태그

HTML Layout 태그

html 화면을 구성하는데 사용하는 html tag

htmlLayoutTag

태그 이름 설명
<header> • html layout 태그중 하나로 상단영역에 위치합니다.
• 사이트 이름, 문서 대표제목, 로고등을 포함합니다.
<nav> • 다른 페이지 또는 현재 페이지 내부로의 이동을 위한 링크들이 모여습니다.
• 보통 카테고리, 메뉴들의 집합을 표현할때 사용합니다.
<section> • html layout 태그중 하나로 header 태그와 footer 태그 사이에 위치합니다.
• 여러 article을 포함하며 본문을 표현하는 영역입니다.
<article> • section 내부에 위치하며 컨텐츠의 제목,내용을 포함합니다.
<aside> • html layout 태그중 하나로 header 태그와 footer 태그 사이에 위치합니다.
• 보조 메뉴, 광고 등 본문(section)과 상관없는 내용을 표시합니다.
<footer> • html layout 태그중 하나로 하단영역에 위치합니다.
• 저작권, 저자의 이름, 연락처 등을 표시합니다.

Html 구조 및 태그사용 예시

<!--Html 태그 구조 및 사용법 예시 -->

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Html 태그구조 연습</title>

  <!-- Html태그내부 inline 스타일 시트 -->
  <p style="color:green;">초록색으로 지정합니다</p>

  <!-- 내부(internal) 스타일시트 -->
  <style type="text/css">
    body {
      font-size: 9pt;
    }
  </style>

  <!-- 외부(external) 스타일시트 -->
  <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>
  <header>
    <nav>
      <a href="">link_item1</a>
      <a href="">link_item2</a>
    </nav>

    <div>
      <h1>대표제목</h1>
    </div>
  </header>

  <section>
    <article>
      <h2>소제목</h2>
      <p>본문내용</p>
      <p>본문내용</p>
    </article>

    <aside>
      <p>광고내용</p>
    </aside>

    <div>
      <!-- 순서가 필요없는 리스트 -->
      <ul>
        <li></li>
        <li></li>
      </ul>
      <!-- 순서가 필요한 리스트 -->
      <ol>
        <li></li>
        <li></li>
      </ol>
      <!-- 단어에 대한 리스트 -->
      <dl>
        <dt>단어 이름</dt>
        <dd>단어에 대한 설명</dd>
      </dl>
    </div>
  </section>

  <footer>
    <p>저자 이름</p>
  </footer>
</body>

</html>
반응형
저작자표시

'웹(Web)개발 > 2. Html' 카테고리의 다른 글

3. HTML id, class 의미  (0) 2020.10.12
2. HTML display별 태그정리(block, inline, inline-block)  (0) 2020.08.15

+ Recent posts

티스토리툴바