week 2

04 웹 문서에 다양한 내용 입력하기

04-1 텍스트 입력하기

제목을 나타내는 <hn> 태그

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

인용할 때 쓰는 <blockquote> 태그

화면 낭독기에서 웹 문서를 읽을 때도 다른 텍스트와 구분하여 읽고, 문서 상에서 안으로 들여 쓴 상태가 됨

텍스트를 굵게 표시하려면 <strong>, <b> 태그

눈으로 볼 때 별로 차이가 느껴지지 않지만 그래도 구분하는 이유는 화면 낭독기의 기능 때문 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 <strong> 태그를 키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용

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

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

04-2 목록 만들기

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

ol은 ordered list의 줄임말이고, li는 list의 줄임말입니다. 목록을 표시할 내용 앞뒤에 각각 <ol>과 </ol> 태그를 두고, 그 사이에 <li>와 </li>태그를 삽입

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

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

    • 순서 있는 목록의 기본값은 숫자 1, 2, 3, ...

    • type 속성을 사용해 영문자나 로마 숫자 등으로 순서를 나타낼 수 있음

      • type = "1" : 숫자(기본값)

      • type = "a" : 영문 소문자

      • type = "A" : 영문 대문자

      • type = "i" : 로마 숫자 소문자

      • type = "I" : 로마 숫자 대문자

    • 순서 목록은 기본적으로 '1'부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수도 있음

      • ex) <ol type="a" start="3"> -> c. ~~~ : 세번째 소문자 알파벳부터 시작

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

ul은 unordered list의 줄임말 순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이렇게 붙인 그림을 불릿(bullet)이라 함

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

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

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

04-3 표 만들기

표의 구성 요소 알아보기

  • 행 (row) : 가로줄

  • 열 (column) : 세로줄

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

표의 시작과 끝을 알려주는 <table>, </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣음 표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption> 태그를 사용 (생략 가능)

행을 만드는 <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>

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

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

  • 표의 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있음

  • CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수도 있음

  • 표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 <thead>와 <tfoot> 태그는 표 위아래에 고정하고 <tbody> 태그만 스크롤하도록 만들 수 있음

행이나 열을 합치는 rowspan, colspan 속성 알아보기

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

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

특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 하고, 이 때 사용하는 태그가 <col>, <colgroup> 태그

  • <col> : 열을 1개만 지정할 때 사용

    • 닫는 태그가 없음

  • <colgroup> : <col> 태그를 2개 이상 묶어서 사용

    • 닫는 태그가 있음

  • 같은 스타일 속성을 사용하는 <col> 태그가 있다면 span 속성을 사용해서 묶어줄 수 있음

    • 두 번 반복하지 않고 묶어서 작성

    • ex) <col span="2" style="width:150px;"> : 스타일 속성이 같은 두 열을 묶어 너비 지정\

04-4 이미지 삽입하기

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

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

  • src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 함

  • alt 속성에는 화면 낭독기 등에서 이미지 대신 읽어줄 텍스트를 입력

    • 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우 대체 텍스트로 나타남.

    • 불릿이나 아이콘 이미지처럼 내용 전달이 아니라 화면을 꾸밀 때 사용한 이미지는 텍스트를 따로 넣지 않아도 됨 -> alt=""만 입력

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

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

    • 퍼센트(%)와 픽셀(px) 단위 사용 가능.

    • 픽셀을 사용할 때는 px 단위를 쓰지 않고 숫자만 입력\

04-5 오디오와 비디오 삽입하기

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

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

    • 오디오, 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용

    • 웹 문서 안에 다른 문서를 삽입할 때도 사용

    • data 속성에 보여줄 파일을 지정하고, width, height 속성으로 플레이어의 크기 지정

    • PDF 파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여준다

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

    • HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입

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

  • 비디오 파일의 webm 형식은 무료이고 화질도 좋지만 webm 형식을 지원하지 않는 경우에는 mp4 형식을 사용

  • 오디오 파일은 mp3 형식을 주로 사용, 그 외 mp4, m4a

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

  • 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는 <audio> 태그 사용

  • 비디오 파일을 삽입할 때는 <video> 태그 사용

  • 오디오나 비디오 파일을 시작하거나 종료할 수 있는 컨트롤 바 속성을 함께 표시할 수 있음 <audio src="오디오 파일 경로" controls></audio> 방문자가 음악을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성 사용 <video src="비디오 파일 경로" controls></video>

<audio>, <video> 태그의 속성 알아보기

  • controls : 컨트롤 바 표시

  • autoplay : 자동 재생

  • loop : 반복 재생

  • muted : 소리 제거

  • preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정 (auto, metadata, none), 기본값 preload="auto"

  • width, height : 너비와 높이 지정

  • poster="파일 이름" : <video> 태그용 속성, 비디오 재생되기 전까지 화면에 표시될 포스터 이미지 지정\

04-6 하이퍼링크 삽입하기

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

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

  • <a> 태그의 기본형은 다음과 같이 href 속성을 이용해 연결할 파일이나 링크할 주소를 씀

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

target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열림 <a href="../05/order.html" target="_blank">주문서</a>

Previousweek 1Nextweek 3

Last updated