HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

하쮸·2024년 9월 6일

HTML(Hypertext Markup Language)

HTML_CSS_JavaScript

목록 보기

4/7

웹 문서를 작성할 때 가장 많이 사용하는 형식은 텍스트, 이미지, 표임.
- 이것들을 웹 문서에 삽입하는 HTML 태그

1. 텍스트 입력하기.

1-1. `<hn>` 태그

제목을 나타내는 태그.
웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시함.
<hn> 태그에서 h는 제목을 뜻하는 heading을 줄임말.
- n의 자리에는 1 ~ 6의 숫자가 들어가고 숫자가 작아질 수록 텍스트가 작아짐.
<hn> 태그는 닫는 태그인 </hn>을 반드시 사용해야 함.

1-2. `<p>, <br>` 태그

텍스트 단락을 만드는 태그와 줄을 바꾸는 태그.

<p>내용</p>
<br>

<p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐.
편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시 됨.
- 텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시할 수 없을 경우 자동으로 줄이 바뀜.
<br> 태그를 사용하면 줄을 바꿀 수 있음
- <br> 태그는 단독으로 사용하므로 닫는 태그가 필요없음.

<br> 태그와 <p> 태그의 차이점

<br> 태그를 2번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것 처럼 화면에 표시할 수 있음.
하지만 실제로는 단락이 만들어진 게 아니므로 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생김.
따라서 텍스트 단락을 만들 때는 <p> 태그를 사용.

1-3. `<blockquote>` 태그

인용할 때 쓰는 태그.
브라우저가 인용문을 인식할 수 있게 하려면 <blockquote>, <blockquote> 태그로 인용문을 감싸 줘야 함.
웹 브라우저는 <blockquote> 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 씀.

1-4. `<strong>, <b>` 태그

텍스트를 굵게 표시해주는 태그.
텍스트를 굵게 표시할 때에는 <strong>, <b> 태그를 사용.

<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>

눈으로 볼 땐 차이가 없지만 화면 낭독기에서는 차이가 발생.
(보이는 것이 아니라 의미가 중심.)
경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 <strong> 태그를 사용.
키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용.

1-5. `<em>, <i>` 태그

기울인 텍스트를 입력해 주는 태그.
<em>, <i> 는 텍스트를 기울여 표시할 때 사용.

<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>

<em> 태그에서 em은 강조를 뜻하는 emphasis의 줄임말.
- <em> 태그는 문장에서 흐름상 특정 부분을 강조할 때 사용.
<i> 태그에서 i는 기울기체를 뜻하는 italic의 줄임말.
- <i> 태그는 마음속의 생각이나 용어, 관용구 등에 사용.

1-6. 다양한 텍스트 관련 태그

종류	설명	예시
`<abbr>`	줄임말을 표시하고 title속성을 함께 사용할 수 있음.	`<abbr title="Internet of Things">IoT</abbr>`
`<cite>`	웹 문서나 포스트에서 참고한 내용을 표시	`<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중</p>`
`<code>`	컴퓨터 인식을 위한 소스코드	`<code>function savetheLocal()</code>`
`<small>`	부가 정보처럼 작게 표시해도 되는 텍스트	`<p>가격 : 13,000원 <small>(부가세 별도)</small></p>`
`<sub>`	아래 첨자를 표시	`<p>물의 화학식은 H<sub>2</sub>O입니다</p>`
`<sup>`	위 첨자를 표시	`<p>E = mc<sup>2</sup></p>`
`<s>`	취소선을 표시	`<p><s>34,000원</s>19,000</p>`
`<u>`	밑줄을 표시	`<u>텍스트에 단순히 밑줄 긋기</u>`
`<ins>`	공동 작업 문서에서 새로운 내용을 삽입	`<ins>새로운 내용을 삽입합니다</ins>`
`<del>`	공동 작업 문서에서 기존 내용을 삭제	`<del>기존 내용을 삭제합니다</del>`

2. 목록 만들기.

웹 문서에서 목록은 단순히 어떤 항목을 나열할 때뿐 아니라 특히 CSS와 함께 사용해서 내비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 사용.

2-1. `<ol>, <li>` 태그

순서 있는 목록을 만드는 태그.
순서있는 목록(ordered list)이란 말 그대로 각 항목을 순서대로 나열한 것.
- 순서있는 목록은 기본적으로 숫자 1, 2, 3, ... 으로 번호를 붙임.
  - type 속성을 사용하면 영문자나 로마 숫자등으로 순서를 나타낼 수 있음.
  - 순서 목록은 기본적으로 '1'부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수 있음.
  - type = "1" : 숫자(기본값)
    type = "a" : 영문 소문자
    type = "i" : 로마 숫자 소문자
<ol>은 ordered list의 줄임말, <li>는 list의 줄임말.
목록을 표시할 내용 앞뒤에 각각 <ol>, </ol> 태그를 두고 그 사이에 <li>, </li> 태그를 삽입.

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

2-2. `<ul>, <li>` 태그

순서 없는 목록을 만드는 태그.
순서 없는 목록(unordered list)은 항목의 순서가 중요하지 않을 때 사용.
<ul>은 unordered list의 줄임말.
<ul>, </ul> 태그를 목록 앞뒤로 붙인 후 <li>, </li> 태그를 삽입.
항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을 불릿(bullet)이라고 함.

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

2-3. `<dl>, <dt>, <dd>` 태그

설명 목록을 만드는 태그.
설명 목록(description list>이란 이름(name), 값(value) 형대로 된 목록.
이름(단어명) 부분을 지정하는 <dt> 태그와 값(설명) 부분을 지정하는 <dd> 태그로 구성.
<dl>, </dl> 태그 사이에는 한 쌍의 <dt> 태그와 <dd> 태그를 넣음.
- <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수 있음.

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

3. 표 만들기

3-1. 표의 구성 요소

표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어짐.
- 셀은 행과 열이 만나 이루어진 곳. 표의 내용이 들어가는 한 칸을 의미함.

3-2. `<table>, <caption>` 태그

표를 만드는 태그.
표의 시작과 끝을 알려주는 <table>, </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 삽입함.
표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption> 태그를 사용.
- <caption> 태그를 사용하면 제목은 표의 위쪽 중앙에 표시됨.

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

3-3. `<tr>, <td>, <th>` 태그

<tr> 태그는 행을 만들고 , <td> 태그는 행 안에 있는 셀을 만듦.
- <table> 태그 안에 <tr>, <td> 태그가 모두 모여야 하나의 셀을 만들 수 있음.

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

표의 제목 행에 셀을 만들 때는 <td> 태그 대신 <th> 태그를 사용.
- <th> 태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열 됨.

3-4. `<thead>, <tbody>, <tfoot>` 태그

표의 구조를 지정하는 태그.
- 제목 <thead>, 본문 <tbody>, 요약 <tfoot>
CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수 있음.
표의 본문이 길어 한 화면을 넘어갈 경우 자바스크립트를 이용해 <thead>, <tfoot> 태그는 표의 위아래를 고정하고 <tbody> 태그만 스크롤 하도록 만들 수 있음.

3-5. rowspan, colspan 속성

행이나 열을 합치는 속성.
표는 <tr>, <th>, <td> 태그를 이용해서 여러 셀로 구성.
행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td>, <th> 태그에서 이루어짐.
행을 합치리면 rowspan 속성을 사용, 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 지정.

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

3-6. `<col>, <colgroup>` 태그

<colgroup>
  <col>
</colgroup>

열을 묶어주는 태그.
- 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 함. 그럴 때 사용하는 태그.
<col> 태그는 1개의 열을 지정할 때 사용, <colgroup> 태그는 <col> 태그를 2개 이상 묶어서 사용.
- <colgroup> 태그는 닫는 태그 <colgroup> 가 있지만 <col> 태그는 닫는 태그가 없음.
<col>, <colgroup> 태그는 반드시 <caption> 태그 다음에 써야 함.
<col> 태그를 사용할 때는 <colgroup> 태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col> 태그를 넣어야 함.
같은 스타일 속성을 사용하는 <col> 태그가 있다면 span 속성을 사용해서 묶어줄 수 있음.

4. 삽입하기.

4-1. `<img>` 태그

이미지를 삽입하는 태그.
- src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 함.
- alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어줄 텍스트를 입력.
  - alt 속성을 지정하면 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타남.
  - alt 속성에 들어갈 텍스트는 이미지 안에 포함된 텍스트를 알려줘야 함.

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

이미지 파일 경로를 나타내는 src 속성
- 경로란 현재 HTML 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는 지 알려줌.
- 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해짐.
- 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src속성에는 간단히 이미지 파일의 이름만 적으면 됨.
```
<img src="이미지 파일 이름.확장자명">
```
- 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일이 있다면 src속성에 하위 폴더와 함께 이미지 파일 이름을 적어야 함.
```
<img src="하위 폴더명/이미지 파일 이름.확장자명">
```
이미지 크기를 조절하는 width, height 속성
- <img> 태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시 됨.
  - 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶다면 width, height 속성을 사용.
  - width는 이미지의 너비, height는 이미지의 높이
    - 2개 속성 모두 사용할 수도 있고 1개만 사용할 수도 있음.
    - width, height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산.
    - width, height에서 사용할 수 있는 단위는 %(퍼센트), px(픽셀).
      - % : 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정.
        Ex) width="50%"
        
        웹 브라우저 창의 크기가 달라질 때마다 이미지 크기도 달라짐.
      - px : 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시.
        Ex) width="150"
        
        웹 브라우저 창의 크기와 상관없이 고정된 크기로 표시.

4-2. `<object>, <embed>` 태그

다양한 멀티미디어 파일을 삽입할 때 쓰는 태그.
<object> 태그는 오디오 파일 뿐만 아니라 비디오, 자바 애플릿, PDF등 다양한 멀티미디어 파일을 삽입할 때 사용.

<object width="너비" height="높이" data="파일"></object>

data 속성에 보여 줄 멀티미디어 파일을 지정.
width, height 속성을 사용.
<embed> 태그는 HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있음.
- src 속성을 사용해 삽입할 멀티미디어 파일을 지정함.
- 닫는 태그가 없음.

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

4-3. `<audio>, <video>` 태그

멀티미디어 파일 관련 태그는 HTML5 웹 표준이 정해지면서 가장 많이 변한 부분.
- HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있음.
HTML에서 배경 음악이나 효과음등 오디오 파일을 삽입할 때는 <audio> 태그를 사용.
비디오 파일을 삽입할 때는 <video> 태그를 사용.

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

사용자가 음악, 영상을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성

<audio src="medias/spring.mp3" controls></audio>

비디오 파일의 너빗값을 지정하지 않으면 웹 브라우저에 가득 차게 나타나므로 너빗값을 적절히 지정하는 것이 좋음.

<video src="medias/salad.mp4" controls width="700"></video>

<audio>, <video> 태그의 속성

종류	설명
controls	플레이어 화면에 컨트롤 바를 표시함.
autoplay	오디오나 비디오를 자동으로 재생.
loop	오디오나 비디오를 반복 재생.
muted	오디오나 비디오의 소리를 제거.
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정함. 사용할 수 있는 값은 auto, metadata, none이고 기본값은 preload="auto"
width, height	비디오 플레이어의 너비와 높이를 지정함. width나 height의 값 중에서 하나만 지정할 경우 나머지는 자동으로 계산해서 표시
poster="파일 이름"	`<video>` 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정함.

대부분의 웹 브라우저에서는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지하고 있음.

<audio src="medias/spring.mp3" autoplay loop></audio>

플레이어 표시 없이 배경음악 넣고 자동재생 + 반복.

4-4. 하이퍼 링크.

하이퍼 링크는 클릭만 하면 연결된 곳으로 바로 이동해 웹 사이트를 더욱 편리하게 사용할 수 있는 중요한 기능.

4-4-1. `<a>` 태그와 href 속성

링크는 <a> 태그로 만듦.
- 텍스트를 사용하면 텍스트 링크.
- 이미지를 사용하면 이미지 링크.
<a> 태그의 기본형은 href 속성을 이용해 연결할 파일이나 링크할 주소를 씀.

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

텍스트 링크
- <a>, </a> 태그 사이에 링크로 만들 텍스트를 입력하고 href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 됨.
  - 텍스트 링크의 색을 바꿀 때는 CSS 사용
  - 일반적으로 CSS를 사용해 글자색을 고정함.

<div>
  <p><a href="../05/order.html">주문서 작성하기</a></p>
</div>

이미지 링크
- <a>, </a> 태그 사이에 <img> 태그를 넣으면 이미지에도 링크를 만들 수 있음.

<a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a>

4-4-2. target 속성

링크를 새 탭으로 열어주는 속성.
- 이전 텍스트 링크, 이미지 링크에서는 하이퍼 링크를 클릭시 동일한 탭에서 다음 페이지로 넘어감.
- target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열림.

하쮸

Every cloud has a silver lining.

이전 포스트

HTML, CSS, JavaScript - 3. HTML 시작하기. (HTML)

다음 포스트

HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

HTML_CSS_JavaScript

1. 텍스트 입력하기.

1-1. `<hn>` 태그

1-2. `<p>, <br>` 태그

1-3. `<blockquote>` 태그

1-4. `<strong>, <b>` 태그

1-5. `<em>, <i>` 태그

1-6. 다양한 텍스트 관련 태그

2. 목록 만들기.

2-1. `<ol>, <li>` 태그

2-2. `<ul>, <li>` 태그

2-3. `<dl>, <dt>, <dd>` 태그

3. 표 만들기

3-1. 표의 구성 요소

3-2. `<table>, <caption>` 태그

3-3. `<tr>, <td>, <th>` 태그

3-4. `<thead>, <tbody>, <tfoot>` 태그

3-5. rowspan, colspan 속성

3-6. `<col>, <colgroup>` 태그

4. 삽입하기.

4-1. `<img>` 태그

4-2. `<object>, <embed>` 태그

4-3. `<audio>, <video>` 태그

4-4. 하이퍼 링크.

4-4-1. `<a>` 태그와 href 속성

4-4-2. target 속성

HTML, CSS, JavaScript - 3. HTML 시작하기. (HTML)

HTML, CSS, JavaScript - 5. 입력 양식 작성하기. (HTML)

0개의 댓글

HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

HTML_CSS_JavaScript

1. 텍스트 입력하기.

1-1. <hn> 태그

1-2. <p>, <br> 태그

1-3. <blockquote> 태그

1-4. <strong>, <b> 태그

1-5. <em>, <i> 태그

1-6. 다양한 텍스트 관련 태그

2. 목록 만들기.

2-1. <ol>, <li> 태그

2-2. <ul>, <li> 태그

2-3. <dl>, <dt>, <dd> 태그

3. 표 만들기

3-1. 표의 구성 요소

3-2. <table>, <caption> 태그

3-3. <tr>, <td>, <th> 태그

3-4. <thead>, <tbody>, <tfoot> 태그

3-5. rowspan, colspan 속성

3-6. <col>, <colgroup> 태그

4. 삽입하기.

4-1. <img> 태그

4-2. <object>, <embed> 태그

4-3. <audio>, <video> 태그

4-4. 하이퍼 링크.

4-4-1. <a> 태그와 href 속성

4-4-2. target 속성

HTML, CSS, JavaScript - 3. HTML 시작하기. (HTML)

HTML, CSS, JavaScript - 5. 입력 양식 작성하기. (HTML)

0개의 댓글

1-1. `<hn>` 태그

1-2. `<p>, <br>` 태그

1-3. `<blockquote>` 태그

1-4. `<strong>, <b>` 태그

1-5. `<em>, <i>` 태그

2-1. `<ol>, <li>` 태그

2-2. `<ul>, <li>` 태그

2-3. `<dl>, <dt>, <dd>` 태그

3-2. `<table>, <caption>` 태그

3-3. `<tr>, <td>, <th>` 태그

3-4. `<thead>, <tbody>, <tfoot>` 태그

3-6. `<col>, <colgroup>` 태그

4-1. `<img>` 태그

4-2. `<object>, <embed>` 태그

4-3. `<audio>, <video>` 태그

4-4-1. `<a>` 태그와 href 속성