학습목표

• HTML의 기본 구조와 문법을 설명할 수 있다.
• HTML이 마크업 언어라는 것을 설명할 수 있다.
• 자주 사용되는 HTML 요소를 활용할 수 있다. (div, span, ul, ol, li, input, id, class 등)
• 시맨틱 태그에 대해 설명할 수 있다.
• 웹 문서의 구조와 내용을 HTML로 작성할 수 있다.

HTML

기본형태

• 태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다

<TAG></TAG>
<TAG>CONTENT</TAG>

<h1>토끼와 거북이</h1>
<p>옛날 옛적에 토끼와 거북이가 살았습니다 ...</p>

<!-- 다음과 같이 이해할 수 있습니다. -->
<주제1>토끼와 거북이</주제1>
<문단>옛날 옛적에 토끼와 거북이가 살았습니다 ...</문단>

태그는 열리고(open) 닫히는(close) 태그 구조를 가지고 있는 한 쌍

(시작(start)와 종료(end)구조라고도 함)

<h1>토끼와 거북이</h1>

<!-- 다음과 같이 이해할 수 있습니다. -->
<주제1여기서열림>토끼와 거북이</주제1여기서닫힘>

태그 종료(end)시 /(슬래쉬)가 붙음

속성(Attributes)과 값(Value)

• 태그(요소)의 기능을 확장하기 위해 '속성'을 사용

<TAG 속성="값"></TAG>

<img src="./my_photo.jpg" alt="내 프로필 사진" />
<div class="name">홍길동</div>

<!-- 다음과 같이 이해할 수 있습니다. -->
<이미지삽입 소스위치="./my_photo.jpg" 대체텍스트="내 프로필 사진" />
<의미없는분할 태그별명="name">홍길동</의미없는분할>

• 는 이미지를 삽입할 때 사용하는 태그
• src(source)라는 속성을 사용해서 삽입할 때 이미지의 경로를 지정
• alt(alternative)라는 속성은 이미지를 출력하지 못하는 상황에 이미지 대신 보여질 텍스트를 지정
• 는 의미를 가지지 않는 태그로 어떤 내용이든 묶어내는 기능(Wrap)
• 홍길동 이라는 텍스트를 묶었으나 그 내용이 무엇을 의미하는지 알 수 없기 때문에 name이라는 태그 별명class를 추가
• 태그가 없다면 빈 태그(Empty tag)라 함

부모와 자식 요소

• 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 함

<PARENT>
  <CHILD></CHILD>
</PARENT>

<section class="fruits">
  <h1>과일 목록</h1>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li>바나나</li>
    <li>오렌지</li>
  </ul>
</section>
<!-- 다음과 같이 이해할 수 있습니다. -->
<섹션영역 태그별명="fruits">
  <주제1>과일 목록</주제1>
  <순서없는목록>
    <항목>사과</항목>
    <항목>딸기</항목>
    <항목>바나나</항목>
    <항목>오렌지</항목>
  </순서없는목록>
</섹션영역>

- <section></section>안에는(콘텐츠) <h1></h1>, <ul></ul>, <li></li>가 있고,
- <ul></ul>안에는(콘텐츠) <li></li>가 있음
- <section>는 <h1>과 <ul>의 부모 요소
- <ul>은 <li>의 부모 요소
- <h1>과 <ul>은 <section>의 자식 요소
- <li>는 <ul>의 자식 요소
- <section>은 <li>의 조상(상위) 요소,
- 반대로 <li>는 <section>의 후손(하위) 요소

빈 태그

<!-- `/`가 없는 빈 태그 -->
<TAG>

<!-- `/`가 있는 빈 태그 -->
<TAG/>
<TAG />

• HTML에는 닫히는 개념이 없는 태그들이 존재
• HTML5에서는 위 2가지의 형태를 다 사용할 수 있음
• XHTML이나 린트(Lint)환경 혹은 프레임워크 세팅에 다라 /(종료태그)를 사용하는 것이 필수가 될 수도 있음