2주차 04-1 ~ 04-6

텍스트 태그

제목 태그 <hn>

• 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다. 이렇게 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 제목 태그이다.

• <hn>태그에서 h는 제목을 뜻하는 heading을 줄인 말이다. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.

![[제목태그크기테스트.png]]

• <h1>이 가장 큰 제목이고 <h2> <h3> ... <h6>의 순서로 크기가 작아진다

단락을 만드는 <p>태그, 줄을 바꾸는 <br>태그

• <p>와 </p>태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다

  • ![[ptag.png]]

• 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다

  • ![[linetest.png]]

• 텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시할 수 없을 경우 자동으로 줄이 바뀐다

• 텍스트 단락을 만들 때 원하는 위치에서 줄을 바꾸려면 <br>태그를 사용하면 줄을 바꿀 수 있다. <br> 태그는 단독으로 사용하므로 닫는 태그가 필요 없다.

  • ![[brtest.png]]

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

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

인용할 때 쓰는 <blockquote>태그

• 다른 사람의 말이나 책의 내용을 인용할 때 흔히 큰따옴표(" ")를 사용해 표시한다 하지만 웹 브라우저에서는 이렇게 표시한 인용문을 인식할 방법이 없다. 브라우저가 인용문을 인식할 수 있게 하려면 다음과 같이 <blockquote>와 </blockqute>태그로 인용문을 감싸 주어야 한다.

  • ![[인용문적용전.png]]

  • ![[인용문 적용후.png]]

  • 웹 브라우저는 <blockquote> 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 쓴다.

텍스트를 굵게 표시해주는 <strong>, <b> 태그

![[강조텍스트.png]]

• <strong> 태그와 <b> 태그는 눈으로 볼 때 별로 차이가 느껴지지 않지만 그래도 구분하는 이유는 화면 낭독기의 기능 때문이다. 예를 들어 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 <strong> 태그를 키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용한다. 보이는 것이 아니라 의미가 중심이된다. 화면 낭독기는 <strong>태그를 사용한 부분을 강조하여 읽어준다

기울인 텍스트를 입력해 주는 <em>, <i> 태그

![[기울임.png]]

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

• <em>태그는 문장 중에서 특별히 강조하고 싶은 부분에 사용하고, 단순히 다른 텍스트와 구별하기 위해 기울여서 표시한다면 <i> 태그를 사용한다.

텍스트 관련 태그

제목	설명	예시
<abbr>	줄임말을 표시하고 title 속성을 함께 사용할 수 있다.	<abbr title="Internet of things">IoT</abbr>
<cite>	웹 문서나 포스트에서 참고 내용을 표시한다.	<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중</p>
<code>	컴퓨터 인식을 위한 소스 코드 이다	<code>int main()</code>
<small>	부가 정보처럼 작게 표시해도 되는 텍스트.	<p>가격 : 13,000 <small>(부가세 별도)</small></p>
<sub>	아래 첨자를 표시	<p>물의 화학식을 H<sub>2</sub>0입니다</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>

---

목록 만들기

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

순서 있는 목록을 만드는 <ol>, <li>태그

• 순서 있는 목록(ordered list)이란 말 그대로 각 항목을 순서대로 나열한 것이다. 순서 목록은 어떤 과정을 순서대로 설명할 때 <oi>과<li> 태그를 사용해서 만든다. ol은 ordered list의 줄임말이고, li는 list의 줄임말이다. 목록을 표시할 내용 앞뒤에 각각 <ol>과</ol>태그를 두고, 그 사이에 <li>와 </li>태그를 삽입한다.

  • ![[ol,li.png]]

• <ol> 태그의 type, start 속성

  • 앞의 예제처럼 순서 있는 목록은 기복적으로 숫자 1, 2, 3 , · · · 으로 번호를 붙인다. 이때 type속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.

type	설명
type = "1"	숫자(기본값)
tyep = "a"	영문 소문자
type = "A"	영문 대문자
type = "i"	로마 숫자 소문자
type = "I"	로마 숫자 대문자
![[oi타입별.png]]

• 순서 목록은 기본적으로 '1'로 시작하지만 start 속성을 사용해서 시작 번호를 바꿀수도 있다. 여러 개의 순서 있는 목록을 연결하여 번호를 붙여야 할 경우 start 속성을 사용하여 원하는 번호붜 시작하면 된다

  • ![[항목순서.png]]

순서 없는 목록은 만드는 <ul>, <li> 태그

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

• ![[ullist.png]]

설명 목록을 만드는 <dl>, <dt>, <dd> 태그

• 설명 목록(description list)이란 이름(name)과 값(value) 형태로 된 목록을 말한다. 사전에 단어명과 설명이 있는 모습을 떠올리면 쉽게 이해할 수 있다

• 설명 목록은 이름(단어명) 부분을 지정하는 <dt> 태그와 값(설명) 부분을 지정하는 <dd> 태그로 구성된다. <dl>과 </dl> 태그 사이에는 한쌍의 <dt> 태그와 <dd>태그를 넣는다. 이때 <dt>태그 하나에 여러개의 <dd> 태그를 사용할 수도 있다.

• ![[ullist 1.png]]

• 웹 문서에서 목록 형식의 콘텐츠를 넣는다면 다른 태그로 복잡하게 만드는 것보다 설명 목록을 이용하면 만들기도 쉽고 보기도 좋다.

표 만들기

표의 구성 요소

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

표를 만드는 <table>, <caption> 태그

• 표의 시작과 끝을 알려주는 <table>과 </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption> 태그를 사용한다. <caption> 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다.

• ![[테이블.png]]

• 표의 테두리는 CSS를 이용해서 만들어야됨

행을 만드는 <tr> 태그와 셀을 만드는 <td>, <th> 태그

• <table> 태그만 작성하면 표가 만들어지지 않는다. <table> 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇개인지 지정해야 한다. <tr>태그는 행을 만들고 <td>태그는 행 안에 있는 셀을 만들기 때문에 <table>태그 안에 <tr>, <td> 태그가 모두 모여야 하나의 셀을 만들 수 있다.

• 표의 제목 행에 셀을 만들 때는 <td> 태그 대신 <th> 태그를 사용한다. <th>태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열되므로 다른 내용에 비해 눈에 띈다.

표의 구조를 지정하는 <thead>, <tbody>, <tfoot> 태그

• 일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래쪽에 합계나 요약 내용을 표시하기도 한다. 이런 표는 제목과 본문 그리고 요약이 있는 부분으로 표의 구조를 나누어 놓는것이 좋다. 이때 <thead>와 <tbody>, <tfoot> 태그를 사용한다 태그 이름은 표를 뜻하는 table의 t와 제목(head), 본문(body), 요약(foot)을 각각 합친 말이다

• ![[SmartSelect_20220730-155828_Noteshelf.jpg]]

• 표의 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있다. 또한 CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수도 있다. 표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 <thead>와 <tfoot> 태그는 표의 위 아래에 고정하고 <tbody>태그만 스크롤 하도록 만들 수 있습니다.

행이나 열을 합치는 rowspan, colspan 속성

• 표는 <tr> 태그와 <th> 태그, <td> 태그를 이용해서 여러 셀로 구성한다. 이때 여러 셀을 합치거나 나누어서 다양한 형태로 바꿀 수 있다. 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td> 태그나 <th>태그에서 이루어진다. 행을 합치려면 rowspan 속성을 사용하고 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 지정하면 된다.

  • ![[병합.png]]

열을 묶어 주는 <col>, <colgroup> 태그

• 단순히 표를 만들기만 하는 것이 아니라 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 한다. 그럴때 사용하는 태그가 <col> 태그와 <colgroup>태그이다. <col>태그는 열을 1개만 지정할 때 사용하고, <colgroup> 태그는 <col>태그를 2개 이상 묶어서 사용한다. <col>태그는 반드시 <caption>태그 다음에 써야 한다. 표의 내용이 시작되기 전에 열의 상태를 알려주는 것이다. 그리고 <col>태그를 사용할 때는 <colgruop> 태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col> 태그를 넣어야 한다, 즉 스타일 속성을 지정하지 않은 열이 있을 경우에는 각각 <col>태그를 작성해야 한다.

  • ![[열서식지정.png]]

이미지 삽입하기

	웹 사이트에 적절한 이미지가 있으면 정보를 시각적으로 전해 줄 뿐 아니라 지루하지 않게 해준다. 따라서 웹 사이트에서 이미지의 역할은 텍스트 만큼 중요하다. 사이트 전체 디자인뿐만 아니라 메뉴나 중요한 요소를 이미지로 처리하여 내용을 강조할 수 있다.

이미지를 삽입하는 <img> 태그

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

• <img> 태그에서 알아야 할 속성은 src와 alt입니다. src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할을 하며 반드시 있어야 한다. alt 속성에는 화면 낭독기 등 에서 이미지를 대신해서 읽어 줄 텍스트를 입력한다.

  • ![[imagetest.png]]

• 웹에서 사용하는 대표적인 이미지 파일 형식 |종류|설명| |:---:|-----| |GIF (graphic interchange format)|표시할 수 있는 색상 수는 최대 256가지이다. 다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 불릿 등 작인 이미지에 주로 사용한다.| |JPG/JPEG (joint photographic experts gruop)|GIF보다 색상과 명암을 다양하게 표현할 수 있다. 이미지를 수정하고 저장하는 작업을 반복할 경우 화질이 떨어질 수도 있다.| |PNG (portable network graphics)|네트워크용으로 개발된 파일 형식이다. 색상을 다양하게 표현하면서 투명한 배경도 만들 수 있어 웹에서 가장 많이 사용한다.|

• 이미지 파일 경로를 나타내는 src 속성

  • 이미지나 음악, 동영상 파일 등을 웹 문서에 삽입할 때에는 경로를 주의해야 한다. 경로란 현재 HTML 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지를 알려준다. 이미지 파일의 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않는다. 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해진다. 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에는 간단히 이미지 파일의 이름만 적으면 된다

• 이미지를 텍스트로 대신 설명하는 alt 속성

  • 웹 문서에 이미지를 삽입할 때는 화면 낭독기와 같은 보조 기기에서 이미지를 대신해서 읽어줄 텍스트를 함께 넣을 수 있다. 또한 alt속성을 지정하면 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타난다

  • alt 속성에 들어 갈 텍스트는 이미지를 부연 설명하는 것이 아니라 이미지 안에 포함된 텍스트를 알려 주어야 한다.

• 이미지 크기를 조절하는 width, height속성

  • <img> 태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시된다. 만약에 이미지 파일은 수정하지 않고, 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶다면 width와 height 속성을 사용할 수 있다. width는 이미지 너비를, height는 이미지의 높이를 지정하며 2개 속성 모두 사용할 수 있고 1개만 사용할 수도 있다

  • width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산해서 나타낸다

  • wdith와 heigh속정에서 사용할 수 있는 단위는 퍼센트(%)와 픽셀(px)이 있다. 픽셀을 사용할 때는 px단위를 쓰지 않고 숫자만 입력한다. |종류|설명|예시| |:---:|-----|:---:| |%|이미지 크기의 값을 퍼센트(%)로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.|width="50%"| |px|이미지 크기의 값을 픽셀(px)로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다.|width="150"|

• ![[이미지크기조절.png]]

오디오와 비디오 삽입하기

	웹 사이트에서 많이 사용하는 멀티미디어 형태는 오디오와 비디오입니다. HTML에서는 <audio> 태그와 <video>태그가 새로 추가되어 멀티미디어 파일을 더 편리하게 삽입할 수 있습니다.

다양한 멀티미디어 파일을 삽입할 때 쓰는 <object>, <embed> 태그

<object>

• <object> 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, PDF등 다양한 멀티미디어 파일을 삽입할 때 사용한다. 웹 문서 안에 다른 문서를 삽입할 때도 사용할 수 있다.

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

• data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정한다.

  • ![[objectpdf.png]]

  • 다음과 같이 <object>태그를 사용하여 웹 문서에 PDF파일을 삽입하면 PDF리더가 자동으로 포함되어 보여준다.

<embed>

• <embed> 태그는 HTML초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있다. <embed>태그에서는 src속성을 사용해 삽입할 멀티미디어 파일을 지정한다. 필요한 경우 width, height 속성으로 플레이어의 너비와 높이를 지정할수 있다.

  기본형 <embed src="파일 경로" width="너비" height="높이"

• <embed> 태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있다. 따라서 HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티 미디어 파일을 삽입한다.

웹 브라우저에서 지원하는 멀티미디어 파일의 종류

	웹 브라우저에서 지원하는 오디오, 비디오 파일의 형식은 여러 가지가 있습니다. 이미지 파일과 마찬가지로 오디오, 비디오 파일도 두세 가지 형식 중에서 골라서 사용합니다. 비디오 파일의 webm 형식은 무료이고 화질도 좋지만 webm 형식을 지원하지 않는 경우에는 mp4형식을 사용합니다. 오디오 파일은 mp3 형식을 주로 사용합니다.

종류	확장자	설명
비디오	mp4	많이 사용하는 비디오 형식으로, 라이선스가 있지만 웹에서는 무료로 사용할 수 있다.
webm	화질이 우수하고 무료라서 mp4와 함께 많이 사용한다.
오디오	mp3	대부분의 음원에서 사용하는 형식, 2017년 이후 라이선스가 종료되면서 무료로 사용 할 수 있다.
mp4, m4a	mp3의 문제점을 개선한 AAC 코덱을 사용한 파일 형식, 확장자는 mp4뿐만 아니라 m4a를 사용하기도 함

오디오와 비디오 파일을 삽입하는 <audio>, <video> 태그

• 멀티미디어 파일 관련 태그는 HTML5 웹 표준이 정해지면서 가장 많이 변한 부분입니다. HTML4는 웹 브라우저에 멀티미디어 파일을 삽입한 후에 재생하려면 플러그인 프로그램이 따로 필요했지만 HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있다.

• 웹 브라우저에서 바로 멀티미디어 파일을 재생하기 때문에 브라우저마다 플레이어가 다르다

• 같은 웹 브라우저라도 버전에 따라 지원 상황이 달라질수 있다.

오디오와 비디오 파일 삽입하기

• <audio>, <video> 태그는 사용법부터 속성까지 거의 비슷하다

• HTML에서 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는 <audio> 태그를 사용하고, 비오 파일을 삽입할 때는 <video> 태그를 사용한다.

• 오디오나 비디오 파일을 시작하거나 종료할 수 있는 컨트롤 바 속성을 함께 표시한다.

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

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

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

• 오디오 파일을 배경 음악처럼 사용하려면 <audio> 태그에서 autoplay 속성과 loop 속성을 지정 하면 된다. 이때 플레이어가 보이지 않도록 하려면 controls속성을 빼면 된다

하이퍼 링크 삽입하기

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

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

• 웹 사이트에서 링크의 기능은 가장 많이 사용되며, 그만큼 중요합니다. 링크는 <a> 태그로 만드는데, 이때 텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 된다. <a> 태그의 기본형은 다음과 같이 href속성을 이용해 연결할 파일이나 링크할 주소를 쓴다.

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

텍스트 링크 만들기

• 텍스트 링크는 <a>와 </a>태그 사이에 링크로 만들 텍스트를 입력하고, href 속성에서 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 된다.

  • ![[화면 캡처 2022-07-30 193435.png]]

• 텍스트에 링크를 추가하면 링크가 추가된 텍스트와 그렇지 않은 텍스트를 구별하기 위해 텍스트에 밑줄이 생기면서 글자색이 파란색으로 바뀐다

이미지 링크 만들기

• 텍스트 링크를 만드는 것과 같은 방법으로 <a>태그를 사용해 이미지에 링크를 추가할 수 있다.

  • ![[네이버고양이.png]]

  • <a>태그에 <img>를 넣어서 사진을 클릭하면 네이버로 이동한다.

링크를 새 탭에서 열어 주는 target 속성

• 앞에서 만든 예제의 텍스트나 이미지의 링크를 클릭하면 현재 열려 있는 웹 브라우저 창에서 새로운 문서가 나타난다. 그래서 링크를 클릭하기 전 문서로 돌아가려면 브라우저 창에서 매번 [이전페이지]를 눌러야 하는데 이러한 번거로운을 줄이기 위해 target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.