HTML

HTML이란?

HTML(Hyper Text Markup Language)은 웹 페이지를 구성하는 기본적인 마크업 언어이다. HyperText는 웹 페이지에서 다른 페이지로 이동할 수 있는 HyperLink를 지원하여, 페이지 내에서 클릭만으로 다른 페이지로의 이동이 가능하게 한다.

HTML 태그 구성 요소

HTML 태그는 기본적으로 <열린태그 속성='속성값'>콘텐츠</닫힌태그>의 형식을 따른다. 여기서 속성은 태그가 갖고 있는 추가 정보를 의미하며, 속성 값은 그 속성이 어떤 역할을 수행할지에 대한 구체적인 지시사항이다.

<열린태그 속성 = ‘속성값'> 콘텐츠 </닫힌태그>

  • 속성: HTML 태그가 갖고 있는 추가 정보이다.
  • 속성 값: 어떤 역할을 수행할지 구체적인 명령을 진행하는 것이다.

HTML 문서의 기본 구조

<!DOCTYPE html> <!-- 문서가 HTML5로 이루어졌다는 선언 -->

<html>          <!-- HTML 문서의 시작과 끝 -->

<head>          <!-- 웹사이트와 관련된 노출되지 않는 간단한 정보 -->
    <meta charset='UTF-8'> <!-- 모든 문자를 웹브라우저에서 깨짐 없이 표시하겠다는 의미 -->
    <title>...</title> <!-- 탭에 위치한 웹사이트의 제목 -->
</head>

<body>          <!-- 눈에 보이는 정보 -->
    <h1>...</h1>
</body>

</html>

HTML Basic Tags

  • <html>: 웹 페이지의 시작과 끝을 나타낸다.
  • <head>: 웹 페이지의 메타 정보를 담고 있다. 외부 파일 링크 등도 이곳에 포함된다.
  • <body>: 브라우저에 실제로 표시되는 내용이 들어간다.
  • <title>: 문서의 제목을 나타낸다. 브라우저의 탭에 표시된다.
  • <meta>: 문자 인코딩 및 문서의 키워드, 뷰포트 설정 등 메타 정보를 정의한다.
  • <div>: 콘텐츠를 논리적으로 묶는 데 사용되는 태그이다.
  • <span>: 인라인 요소를 그룹화하는 데 사용된다.
  • <a>: 하이퍼링크를 생성한다.
  • <script>: 실행 가능한 코드를 문서에 포함시키거나 참조한다.
  • <link>: 외부 스타일 시트와 같은 리소스를 문서에 연결한다.
  • <img>: 이미지를 문서에 삽입한다.
  • <p>: 문단을 정의한다.
  • <li>, <ul>, <ol>: 리스트를 만든다.
  • <style>: 문서에 CSS 스타일 정보를 포함시킨다.
  • <br>: 줄바꿈을 생성한다.
  • <input>: form의 요소 중 하나로 사용자가 정보를 입력할 때 사용된다.
<input type="유형" 속성="속성값">
  • <form>: get, post 방식으로 내용을 전송할 수 있다.
  • <iframe>: 외부 페이지를 삽입할 때 사용된다. 보통 동영상을 삽입하는 용도로 사용된다.
  • <strong>: 중요한 내용을 강조할 때 사용되는 태그이다.
  • <i>: 이탤릭 체를 적용한다.
  • <button>: form 요소 중 하나로 페이지에 버튼을 넣고 form을 전송하거나 reset할 때 사용된다. type=submit, type=reset이 있다.

HTML Semantic Tags

  • <header>: 페이지의 머리말을 나타낸다. 로고, 제목, 검색 폼 등이 위치할 수 있다.
  • <nav>: 내비게이션 링크들의 집합이다.
  • <section>: 문서의 섹션을 정의한다.
  • <aside>: 본문과는 독립적인 콘텐츠를 나타낸다. 예를 들어, 사이드바나 광고 영역 등이다.
  • <footer>: 페이지의 바닥글을 나타낸다. 저작권 정보, 연락처 정보 등이 위치할 수 있다.

주요한 태그들

IMG 태그

<img src="logo.png" alt="회사로고">
  • <img> 태그: 웹 페이지에 이미지를 삽입할 때 사용한다. 닫는 태그가 없는 self-closing 태그이다.
  • src 속성: 이미지의 위치를 지정한다. 여기서는 "logo.png"라는 이미지 파일을 불러오도록 설정했다.
  • alt 속성: 이미지가 정상적으로 불러와지지 않을 때 대체 텍스트를 제공한다. 이는 웹 접근성을 향상시키는 중요한 속성이다.

H 태그

<h1>Hello World</h1>
  • <h1> ~ <h6> 태그: 제목과 부제목을 표현하는 데 사용한다. <h1>은 가장 높은 수준의 제목을 나타내며, 숫자가 클수록 폰트 사이즈가 작아진다. 웹 접근성 지침에 따라, 한 페이지에서 <h1> 태그는 하나만 사용하는 것이 권장된다.

P 태그

<p>Nice to meet you</p>
  • <p> 태그: 문단(paragraph)을 나타낸다. 텍스트 콘텐츠를 구분하는 데 사용되며, 자동으로 상하에 여백이 추가된다.

UL 태그, LI 태그

<ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
</ul>
  • <ul> 태그: 순서가 없는 리스트(unordered list)를 생성한다. 주로 메뉴 버튼 생성에 사용된다.
  • <li> 태그: 리스트 항목(list item)을 나타낸다. <ul> 또는 <ol>(순서가 있는 리스트) 태그 안에서 사용된다.

공간을 나타내는 태그들

<header>
    <nav>
        ...
    </nav>
</header>

<main role="main">
    <article>
        <h1>...</h1>
        ...
    </article>
</main>
  • <header> 태그: 페이지의 머리글 영역을 정의한다. 로고나 네비게이션 바 등을 포함할 수 있다.
  • <nav> 태그: 네비게이션 링크들을 담는 공간이다. <ul>, <li>, <a> 태그와 함께 사용되어 메뉴를 구성한다.
  • <main> 태그: 문서의 주요 내용을 담는다. 웹 표준과 접근성을 고려하여 role="main" 속성을 추가하기도 한다.
  • <article> 태그: 독립적으로 구분되거나 재사용 가능한 영역을 정의한다. 주요 정보나 콘텐츠를 담는 데 사용된다.

HTML 태그의 성격: Block vs Inline

HTML 태그는 크게 블록 레벨 요소와 인라인 레벨 요소로 구분된다.
  • Block: 블록 레벨 요소는 새로운 줄에서 시작하며, 가능한 많은 너비를 차지한다. 예를 들어, <div>, <p>, <h1> 등이 있다.
  • Inline: 인라인 레벨 요소는 콘텐츠와 함께 한 줄에 나타난다. 공간을 만들 수 없으며, 주로 텍스트 내부에서 사용된다. 예를 들어, <span>, <a> 등이 있다.