글의 내용을 정의하는 태그들

Heading 태그

• 제목을 구성할 때 사용되는 태그로 제목의 단계에 따라 h1부터 h6태그로 나누어져 있다.

• 사이즈와 굵기가 달라진다.

글의 제목

글의 제목

글의 제목

글의 제목

글의 제목

글의 제목

<h1>글의 제목</h1> 
<h2>글의 제목</h2>
<h3>글의 제목</h3>
<h4>글의 제목</h4>
<h5>글의 제목</h5>
<h6>글의 제목</h6>

h1부터 최상위 주제(대주제) -> h6까지 하위 주제(소주제)

Paragraph 태그

• 하나의 문단을 지정할 때 사용하는 태그이다. 이 태그로 지정된 문장은 하나의 문단으로 묶여서 화면에 보여지게 된다.

하나의 문단으로 보여준다.

 <p> 하나의
문단으로 
보여준다.</p>

Break 태그

• 코드 상에서 줄바꿈을 해도 웹 페이지 상에서는 줄바꿈이 되지 않는다. 줄바꿈을 하려면 break태그를 사용해서 줄바꿈을 지정해준다.
  Br태그는 닫는 태그 없이 사용이 가능한데 이런 태그들을 홀태그라고 한다.

하나의 문단으로
보여준다.

<p> 하나의
문단으로 <br>
보여준다.<p>

Italic 태그

• 특정 글자들에 기울임체(이탤릭체)를 적용하고 싶을 때 사용한다.

안녕하세요 홍길동 입니다.

안녕하세요 <i>홍길동</i> 입니다.

Strong, bold 태그

• 특정 글자들을 강조하고 싶을 때 사용합니다.

안녕하세요 홍길동 입니다.
안녕하세요 홍길동 입니다.

안녕하세요 <b>홍길동</b> 입니다.
안녕하세요 <strong>홍길동</strong> 입니다.

Horizontal rule 태그

문서 내에 가로선을 넣고 싶을 때 사용합니다.
홀태그 형태로 하나의 태그만 사용한다.

안녕하세요

---

가로선 등장

안녕하세요
  <hr>
  가로선 등장

리스트를 나열하는 태그들

Ordered list 태그

• 순서가 있는 항목들을 나열할 때 사용합니다.
• 순번이 나타난다.

1. 사과
2. 메론
3. 오렌지

<ol>
  <li>사과</li>
  <li>메론</li>
  <li>오렌지</li>
</ol>

Unordered list 태그

• 사과
• 메론
• 오렌지

<ul>
  <li>사과</li>
  <li>메론</li>
  <li>오렌지</li>
</ul>

태그들 사용해보기

자기소개서

---

좋아하는 음식

• 피자
• 치킨
• 햄버거
• 라면

가고싶은 여행지 순위

1. 서울
2. 부산
3. 창원

나를 소개한다면?

저는 홍길동입니다. 저는 서울에서 태어났습니다. 저는 홍길동입니다.
저는 서울에서 태어났습니다. 저는 홍길동입니다.
저는 서울에서

태어났습니다.

저는 10살 때 처음으로 미술을 배웠습니다.

저는 10살 때 처음으로 미술을 배웠습니다.

저는 10살 때 처음으로 미술을 배웠습니다. 저는 10살 때 처음으로 미술을 배웠습니다.

      <h1>자기소개서</h1>
      <hr/>
      <h3>좋아하는 음식</h3>
      <ul>
        <li>피자</li>
        <li>치킨</li>
        <li>햄버거</li>
        <li>라면</li>
      </ul>
      <h3>가고싶은 여행지 순위</h3>
      <ol>
        <li>서울</li>
        <li>부산</li>
        <li>창원</li>
      </ol>
      <h3>나를 소개한다면?</h3>
      <p>저는 <i>홍길동</i>입니다. 
        저는 <strong>서울</strong>에서 태어났습니다.
        저는 <i>홍길동</i>입니다. <br/>
        저는 <strong>서울</strong>에서 태어났습니다.
        저는 <i>홍길동</i>입니다. <br/>
        저는 <strong>서울</strong>에서 <br></br> 태어났습니다.</p>
      <p>
        저는 10살 때 처음으로 미술을 배웠습니다.
      </p>
      <p>
        저는 10살 때 처음으로 미술을 배웠습니다.
      </p>
      <p>
        저는 10살 때 처음으로 미술을 배웠습니다.
        저는 10살 때 처음으로 미술을 배웠습니다.
      </p>

HTML 요소의 두 형태

• 화면 영역을 차지하는 형태에 따라 Block과 Inline 형태로 나뉨

Block 요소

• 화면의 레이아웃, 얼개를 짜거나 구성을 나눌 때 자주 사용, 이 요소에 css 스타일을 적용해서 화면의 레이아웃을 완성함

div : block요소의 대표적인 태그로 아무 의미를 담지 않는 블록 요소로 아래의 블록 요소들의 상위 개념이다.

section : 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소

article : 동일한 내용 구성이 반복될 때 구분하기 윟나 블록 요소

header : 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소

footer : 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소

Inline 요소

• 화면의 레이아웃에 영향을 미치지 않고 특정 내용을 강조하거나 구분하고 싶을 때 사용합니다.
  앞에서 배운 b, i 등의 요소가 이에 속하고 대표적인 태그로 span이 있다.

span : 아무 의미도 내포하지 않은 대표적인 inline 요소, css스타일과 함께 특정 내용을 강조하거나 구분하고 싶을 때 사용한다.

하이퍼미디어

• 웹 페이지의 내의 미디어를 통해 다른 연관 정보로 넘어갈 수 있게 하는 연결고리. 즉 링크를 의미한다.
• 웹사이트의 링크들이다.

a(anchor)태그 : 특정 내용에 링크를 생성할 때 사용합니다. href(hyper reference) 속성으로 이동할 리소스를 지정합니다.

네이버

<a href="https://www.naver.com">네이버</a>

img(image) 태그 : 이미지를 삽입할 때 사용합니다. src(source) 속성으로 이미지의 주소를 지정하면 해당 이미지가 표시됩니다. 홀태그 형식으로 사용됩니다.

embed 태그 : 외부 콘텐츠를 삽일할 때 사용됩니다. 보통 유튜브, 플래시와 같은 외부 미디어 객체를 웹 사이트에 포함시키고 싶을 때 사용합니다.
(음성, 영상, 폼 등)

표 작성하기

table : 표의 시작과 끝

tr : 표의 하나의 행(row)

th, td : 표의 열(column)

-> th아니면 td만 가능하다.
rowspan : 합칠 행의 수
ex) <td rowspan ="2"> </td>

rowspan : 합칠 열의 수
ex) <td colspan ="2"> </td>