4장 - 웹 문서에 다양한 내용 입력하기

4.1 텍스트 입력하기

1. <hn>: 제목 태그
   <!-- 앞/뒤 코드 생략-->
   
   실행 결과:
   

2. <p>: 텍스트 단락 태그, <br>: 줄 바꿈 태그

• <p> ~ </p> : 텍스트를 단락으로 묶어서 표시하는 태그
• <br>: 줄 바꿈 태그
  <!-- 앞/뒤 코드 생략-->
  
  실행 결과:
  

3. <hr>: 가로줄, 분위기 전환 태그
   <hr> 태그는 가로줄을 그리는 용도로 쓸 수도 있고 헤더, 메인, 푸터를 구분할 때 분위기 전환을 위해 쓸 수도 있다.

4. <blockquote>: 인용 태그

   <blockquote>인용문 여기에서 쓰세요.</blockquote>

5. <strong>, <b>: 텍스트 강조 태그

<strong>경고나 주의사항 내용</strong>
<b>굵게 표시할 때 사용하는 태그</b> 

6. <em>,<i>,<cite>: 기울인 텍스트 태그

<em>이탤릭체-강조</em>
<i>이탤릭체-표시</i>
<cite>저작물 제목</cite>

그 외에 다양한 태그들도 있다!

4.2 목록 만들기

1. <ol>, <li>: 순서 목록 (ordered list)

<ol>
	<li>항목1</li>
	<li>항목2</li>
</ol>

2. <ul>, <li>: 순서 없는 목록 (unordered list)

<ul>
	<li>항목1</li>
	<li>항목2</li>
</ul>

3. <dl>, <dt>, <dd>: 설명 목록

<dl>
	<dt>이름</dt>
	<dd>값</dd>
<dl>

4.3 표 만들기

1. <table>, <caption> 태그

<table>
	<caption>표 제목</caption>
</table>

💡 <caption> 태그는 생략할 수 있다.

2. <tr>, <td>, <th>

<table>
	<tr>
		<td>1행 1열</td>
		<td>1행 2열</td>
	</tr>
	<tr>
		<td>2행 1열<td>
		<td>2행 2열</td>
	</tr>
</table>

• 실행 결과:

1행 1열	1행 2열
2행 1열	2행 2열

• 태그를 태그 대신 사용하면 내용이 진하게 표시된다.
• 표를 보다 쉽게 볼 수 있도록 CSS를 적용해야 한다. 이에 대한 자세한 내용은 책 7장에서 다룬다.

3. <thead>, <tbody>, <tfoot>: 표의 구조 태그

<!--04\table-2.html 실습-->  
  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</th>
        <th>가격</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>선물용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>35,000원</td>
    </tr>
    <tr>
      <td>선물용</td>
      <td>5kg</td>
      <td>18~26과</td>
      <td>52,000원</td>
    </tr>
    <tr>
      <td>가정용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>30,000원</td>
    </tr>   
    <tr>
      <td>가정용</td>
      <td>5kg</td>
      <td>18~26과</td>
      <td>47,000원</td>
    </tr>   
  </tbody>
</table>

4. rowspan, colspan 속성

<td rowspan="합칠 셀의 개수">내용</td>
<td colspan="합칠 셀의 개수">내용</td>

5. <col>, <colgroup>: 열을 묶는 태그

<colgroup>
	<col>
	<col>
</colgroup>

💡 <colgroup>, <col> 태그는 무조건 <caption>태그 바로 다음에 사용해햐 한다.

4.4 이미지 삽입하기

1. <img> 태그

<img src="이미지 파일 경로" alt="대체 텍스트">

• src 속성: 이미지 파일 경로
• alt 속성: 대체용 텍스트
• width, height 속성: 이미지 크기 조절

2. <figure> 태그와 <figcaption> 태그

• <figure>: 문서의 주요 내용과는 독립적인 요소를 나타낸다.

<!--04\figcaption-1.html 실습-->
<figure>
    <img src="images/spring.png" alt="제주의 봄">
    <figcaption>가장 먼저 봄을 맞이하는 제주도</figcaption>
  </figure>
  <figure>
    <img src="images/summer.png" alt="제주의 여름">
    <figcation>뜨거운 태양을 닮은 해바라기</figcation>
  </figure>

3. scrset 속성

• scrset 속성은 다양한 해상도나 화면 크기에 맞는 이미지를 브라우저가 자동으로 선택할 수 있게 해주는 속성이다.

<img src=”기본 이미지” srcset=”[파일1, 파일2, 파일3, …]” alt=”대체 텍스트”>

• w 서술자: w는 이미지의 실제 너비를 나타낸다.

<img src="baloon.png" srcset="small.png 700w, large.png 1000w" alt="하늘 위로 올라 가는 풍선">

• x 서술자: x 는 장치의 픽셀 비율을 가리킨다.

<img src="sky.png" srcset="sky-1.png 1x, sky-2.png 2x" alt="파란 하늘 사진">

💡 픽셀 비율값을 알고 싶다면: www.mydevice.io 사이트에 접속하면 된다!

4.5 오디오와 비디오 삽입하기

1. <object>, <embed> 태그

• <object> 태그: 다용도 미디어 삽입 태그 (PDF, 영상, 플래시, HTML 문서 등 다양한 외부 리소스를 삽입 가능)
• <embed> 콘텐츠를 간단하게 삽입할 때 사용 (<object>보다 간단하지만 유연성은 적음)

<object width="너비" height="높이" data="파일"></object>
<embed src="파일 경로" width="너비" height="높이">

• 웹 브라우저에서 지원하는 멀디미디어 파일의 종류는 주로:
  • 비디오: mp4, webm
  • 오디오: mp3, mp4, m4a

2. <audio>, <video> 태그

<!-- 기본형 -->
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>

<!-- 04\audio-1.html 실습 -->
<h1>웹 문서에 오디오 파일 삽입하기</h1>
  <!-- Do it! audio 태그를 사용해 medias/spring.mp3 파일을 삽입해 보세요. -->
  <audio src="medias/spring.mp3" controls></audio>

실행 결과:

• <audio>, <video> 태그의 속성:
  • controls: 사용자가 재생, 일시정지, 음량 등을 조절할 수 있는 컨트롤 바를 표시함.
  • autoplay: 페이지가 로드되면 자동으로 재생함.
  • loop: 미디어가 끝나면 자동으로 다시 시작하여 반복 재생됨.
  • muted: 소리를 끈 상태로 미디어를 시작함.
  • preload: 브라우저가 미디어 파일을 얼마나 미리 불러올지 지정함. 값:
    • none: 아무것도 미리 불러오지 않음
    • metadata: 메타데이터만 불러옴 (길이 등)
    • auto: 브라우저가 판단해서 적절히 불러옴
  • width, height: <video>의 가로, 세로 크기를 픽셀 단위로 지정함.
  • poster="파일이름": <video>에서 영상이 재생되기 전 표시할 썸네일 이미지.

<!-- 04\video-2.html -->
<video src="medias/salad.mp4" controls width="700" poster="images/salad.jpg">
</video>

4.6 하이퍼링크 삽입하기

1. 링크를 삽입하는 <a> 태그와 href 속성

<a href="링크할 주소">텍스트 또는 이미자</a>

• 텍스트 링크 만들기

<!-- 04\link-1.html 실습-->   
    <div>
      <!-- Do it! 텍스트 링크 삽입하기  -->
      <p><a href="order.html">주문서 작성하기</a></p>
    </div>

• 이미지 링크 만들기

<!-- 04\link-2.html 실습-->
<a href="order.html"><img src="images/tangerines.jpg" alt="레드향"></a>

• target 속성: 링크를 새 탭에서 열어준다

<!-- 04\link-3.html 실습-->
<p><a href="order.html" target="_blank">주문서 작성하기</a></p>

2. 점프하는 앵커

<!-- 기본형 -->
<태그 id="앵커명">내용</태그>
<a href="#앵커명">링크</a>

<!-- 04\link-4.html 실습-->
<ul>
      <li><a href="#info">레드향</a></li>
      <li><a href="recipe">레드향 샐러드 레시피</a></li>
      <li><a href="#product">상품 구성</a></li>
    </ul>
    <h1 id="info">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>

    <h2 id="recipe">레드향 샐러드 레시피</h2>
    <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <ol>
      <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
      <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
      <li>드레싱 재료를 믹서에 갈아줍니다.</li>
      <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
    </ol>
    <video src="medias/salad.mp4" controls width="700"></video>
    
    <h2 id="product">상품 구성</h2>