[HTML] 다양한 내용 입력하기

✅텍스트 입력하기

<hn> 태그

• 제목 표시
• 기본형: <hn> 제목 </hn>
• 제목을 표시할 때 사용하는 태그

<h1>제목</h1> <h2>제목</h2> <h3>제목</h3>

<p> 태그

• 텍스트 단락기본형: <p> 텍스트 </p>

 

<br> 태그

• 줄 바꾸기
• 닫는 태그가 없음

 

<blockquote> 태그

• 인용문 넣기
• 기본형: <blockquote> 인용 내용 </blockquote>
• 다른 텍스트보다 안으로 들여 써짐

<blockquote>어준혁의 설국열차</blockquote>

<strong>, <b> 태그

• 굵게 표시
• 기본형: <strong> 내용 </strong>, <b> 내용 </b>
• <strong>: 중요한 내용이라서 강조해야 할 때
• <b>: 단순히 굵게 표시할 때

<strong>어준혁의 설국열차</strong>

 

<em>, <i> 태그

• 기울이기: 이탤릭체로 표시
• 기본형: <em> 내용 </em>, <i> 내용 </i>
• <em>: 흐름상 특정 부분을 강조하고 싶을 때
• <i>: 단순히 이탤릭체로 표시할 때

<em>어준혁의 설국열차</em>

 

---

✅목록 만들기

<ol>, <li> 태그

• 순서가 있는 목록

<ol>             <li>어준혁</li>             <li>어준혁</li>             <li>어준혁</li>         </ol>

<ul>, <li> 태그

• 순서가 없는 목록

<ul>             <li>어준혁</li>             <li>어준혁</li>             <li>어준혁</li>         </ul>

<dl>, <dt>, <dd> 태그

• '이름(제목)'과 '값(설명)' 형태로 된 목록
• <dt> 태그 - 이름(제목) 지정
• <dd> 태그  - 값(설명) 지정
• 하나의 <dt>에 여러 개의  <dd> 값을 가질 수 있다.

---

✅표 만들기

표를 만드는 태그

• <table>: 표 전체
• <caption>: 표 제목
• <tr>: 행
• <td>: 셀
• <th>: 제목 셀 -> 내용을 진하게 표시, 셀 안에서 중앙 배열

 

구조 정의

• <thead>, <tbody>, <tfoot> 태그 사용
• 웹 브라우저 화면에서는 보이지 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다.
• 시각 장애인도 표의 구조를 쉽게 이해할 수 있다.
• CSS로 제목, 본문, 요약에 다른 스타일을 적용할 수 있다.

<table> <caption>표 제목</caption> <thead> <tr> <th>제목셀</th> <th>제목셀</th> <th>제목셀</th> <th>제목셀</th> </tr> </thead> <tbody> <tr> <td>셀1</td> <td>셀2</td> <td>셀3</td> <td>셀4</td> </tr> </tbody> </table>

 

행/열 합치기

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

<table> <caption>표 제목</caption> <thead> <tr> <th>제목셀</th> <th>제목셀</th> <th>제목셀</th> <th>제목셀</th> </tr> </thead> <tbody> <tr> <td colspan="2">셀1</td> <td>셀3</td> <td rowspan="2">셀4</td> </tr> <tr> <td>셀1</td> <td>셀1</td> <td>셀3</td> </tr> </tbody> </table>

<col>, <colgroup> 태그

• 행 또는 열 합치기

---

✅이미지 삽입하기

<img> 태그

• 웹 문서에 이미지를 삽입할 때 사용
• 기본형: <img src="이미지 파일 경로" alt="대체용 텍스트">
• width, height 속성
  • 이미지 크기 조정하기 -> 크기를 명시하지 않으면 원본 크기로 출력
  • width와 height를 각각 지정 할 수 있다.
  • width와 height 중 1개만 지정하면, 나머지 속성은 자동으로 비율을 계산된다.

---

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

<object> 태그

• 음악 파일 뿐만 아니라 동영상이나 자바 애플릿, PDF 파일 등 다양한 개체를 삽입
• 기본형
  • <object width="너비" height="높이" data="파일"></object>

 

<embed> 태그

• 대부분 브라우저에서 사용 가능
  • <object>, <audio>, <video> 태그를 지원하는 브라우정서 멀티미디어를 삽입할 때 사용
• 기본형
  • <embed src="파일경로"  width="너비" height="높이">
  • 닫는 태그 없음

<audio>, <video> 태그

• <audio src="오디오 파일 경로"></audio>
• <video src="비디오 파일 경로"></video>

---

✅하이퍼링크 삽입하기

<a> 태그

• 다른 문서, 혹은 다른 사이트로 연결해 주는 기능
• 기본형
  • <a href="링크할 주소">텍스트 또는 이미지</a>
  • target="blank"로 지정하면 연결된 문서가 새 탭으로 열림