화면 낭독기에서 웹 문서를 읽을 때도 다른 텍스트와 구분하여 읽고, 문서 상에서 안으로 들여 쓴 상태가 됨
눈으로 볼 때 별로 차이가 느껴지지 않지만 그래도 구분하는 이유는 화면 낭독기의 기능 때문
경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 <strong> 태그를 키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용
<em>태그에서 em은 강조를 뜻하는 emphasis의 줄임말이고,
<i> 태그에서 i는 이탤릭체(기울기체)를 뜻하는 italic의 줄임말
<em> 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용,
<i> 태그는 마음속 생각이나 용어, 관용구 등에 사용\
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. ~~~: 세번째 소문자 알파벳부터 시작
- ex)
ul은 unordered list의 줄임말
순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이렇게 붙인 그림을 불릿(bullet)이라 함
설명 목록(description list)이란? 이름(name)과 값(value) 형태로 된 목록
이름(단어명)부분을 지정하는 <dt> 태그와 값(설명)부분을 지정하는 <dd> 태그로 구성
<dl>과 </dl> 태그 사이에는 한 쌍의 <dt>와 <dd> 태그를 넣음
이때 <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수 있음
<dl>
<dt>이름</dt>
<dd>값1</dd>
<dd>값2</dd>
</dl>- 행 (row) : 가로줄
- 열 (column) : 세로줄
표의 시작과 끝을 알려주는 <table>, </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣음
표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption> 태그를 사용 (생략 가능)
<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> 태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열됨
- 표의 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있음
- CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수도 있음
- 표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해
<thead>와<tfoot>태그는 표 위아래에 고정하고<tbody>태그만 스크롤하도록 만들 수 있음
<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 하고,
이 때 사용하는 태그가 <col>, <colgroup> 태그
<col>: 열을 1개만 지정할 때 사용- 닫는 태그가 없음
<colgroup>:<col>태그를 2개 이상 묶어서 사용- 닫는 태그가 있음
- 같은 스타일 속성을 사용하는
<col>태그가 있다면 span 속성을 사용해서 묶어줄 수 있음- 두 번 반복하지 않고 묶어서 작성
- ex)
<col span="2" style="width:150px;">: 스타일 속성이 같은 두 열을 묶어 너비 지정\
<img src="이미지 파일 경로" alt="대체용 텍스트">
- src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 함
- alt 속성에는 화면 낭독기 등에서 이미지 대신 읽어줄 텍스트를 입력
- 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우 대체 텍스트로 나타남.
- 불릿이나 아이콘 이미지처럼 내용 전달이 아니라 화면을 꾸밀 때 사용한 이미지는 텍스트를 따로 넣지 않아도 됨 ->
alt=""만 입력
- 이미지 크기를 조절하는 width, height 속성
- width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타냄
- 퍼센트(%)와 픽셀(px) 단위 사용 가능.
- 픽셀을 사용할 때는 px 단위를 쓰지 않고 숫자만 입력\
<object width="너비" height="높이" data="파일"></object>- 오디오, 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용
- 웹 문서 안에 다른 문서를 삽입할 때도 사용
- data 속성에 보여줄 파일을 지정하고, width, height 속성으로 플레이어의 크기 지정
- PDF 파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여준다
<embed src="파일 경로" width="너비" height="높이">- HTML의
<audio>,<video>,<object>태그를 지원하지 않는 웹 브라우저를 고려해야 하면<embed>태그를 사용해서 멀티미디어 파일을 삽입
- HTML의
- 비디오 파일의 webm 형식은 무료이고 화질도 좋지만 webm 형식을 지원하지 않는 경우에는 mp4 형식을 사용
- 오디오 파일은 mp3 형식을 주로 사용, 그 외 mp4, m4a
- 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는
<audio>태그 사용 - 비디오 파일을 삽입할 때는
<video>태그 사용 - 오디오나 비디오 파일을 시작하거나 종료할 수 있는 컨트롤 바 속성을 함께 표시할 수 있음
<audio src="오디오 파일 경로" controls></audio>
방문자가 음악을 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성 사용
<video src="비디오 파일 경로" controls></video>
- controls : 컨트롤 바 표시
- autoplay : 자동 재생
- loop : 반복 재생
- muted : 소리 제거
- preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정 (auto, metadata, none), 기본값
preload="auto" - width, height : 너비와 높이 지정
- poster="파일 이름" :
<video>태그용 속성, 비디오 재생되기 전까지 화면에 표시될 포스터 이미지 지정\
<a href="링크할 주소">텍스트 또는 이미지</a>
<a>태그의 기본형은 다음과 같이 href 속성을 이용해 연결할 파일이나 링크할 주소를 씀
링크를 새 탭에서 열어주는 target 속성
target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열림
<a href="../05/order.html" target="_blank">주문서</a>