[코딩 자율 학습 HTML + CSS + 자바스크립트] Ch.3 - 3

표 만들기

• 2차원 격자 형태로 구성된 테이블을 의미한다.
• 행, 열, 그리고 행과 열이 만나는 셀로 구성된다.

 

table 태그

• 표 관련 태그는 모두 table 태그를 사용한다.
• tr 태그는 표에서 행을 생성한다.
• th와 td 태그는 표에서 열을 생성한다. th는 표의 제목, td는 일반적인 데이터를 나타낸다.

<table>
  <tr>
    <th>제목</th>
    <td>내용</td>
  </tr>
</table>

 

---

 

rowspan과 colspan

• 행과 열이 만나 셀이 생성되는데 이렇게 생성된 셀은 병합할 수 있다.
• 행과 행을 병합할 때는 rowspan, 행과 열을 병합할 때는 colspan

 

---

 

col과 colgroup

• 표에서 열을 그룹화한다.
• col 태그는 하나의 열을 그룹화 하고, colgroup 태그는 span 속성과 함께 2개 이상의 열을 그룹화 한다.

<col>
<colgroup span="그룹화할 열의 개수">

 

 

---

 

scope

• 제목을 나타내는 셀의 범위를 지정한다.

 

---

멀티미디어 설정하기

autio 태그

• 오디오 파일을 삽입한다.

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

 

웹 브라우저 마다 지원하는 오디오 파일 포맷이 다르다.

 

---

 

video 태그

• video 파일을 삽입한다.

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

 

지원 파일 포맷과 미디어 타입

 

---

 

source 태그

• audio, video 태그에서 리소스의 경로와 미디어 타입을 명시하는데 사용한다.

<audio controls>
  <source src="파일 경로" type="미디어 타입">
</audio>
<video controls>
  <source src="파일 경로" type="미디어 타입">
</video>

 

 

<audio controls>
  <source src="sample.wav" type="audio/wav">
  <source src="sample.mp3" type="audio/mp3">
  지원하지 않는 웹 브라우저입니다.
</audio>

• 웹 브라우저 별로 지원하는 포맷과 미디어 타입이 다른 경우, ex) 오디오에서 MP3를 지원하지만 WAV나 OGG 포맷은 지원하지 않은 경우 source 태그를 사용하여 해당 파일 포맷이 지원하는지 살펴볼 수 있다.

 

---

 

웹 페이지 구조를 설계하는 시맨틱 태그

• 시맨틱은 사전적으로 '의미론적'이라는 뜻으로 시맨틱 웹은 '의미론적인 웹'으로 직역할 수 있다.
• 시맨틱 웹은 웹이 점차 발전하여 웹을 더 의미 있게 설계하는 트렌드이다.
• HTML5에서 웹 페이지 구조를 설계하기 위한 목적으로 새로운 시맨틱 태그가 추가되었다.

 

header 태그

• 헤더 영역을 구분하는데 사용한다.
• 웹 사이트의 최상단이나 좌측에 위치한다.

<header>
  헤더 구성 요소
</header>

 

---

 

 

nav 태그

• 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데 사용한다.

<nav></nav>

 

---

 

section 태그

• 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용한다.

<section></section>

 

---

 

article 태그

• 웹 페이지에서 독립적인 영역을 구분할 때 사용한다.

<article></article>

 

---

 

aside 태그

• 웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서 article 태그나 section 태그로 영역을 구분할 수 없을 때 사용한다.

<aside></aside>

 

---

 

footer 태그

• 웹 페이지 최하단에 있다.

 

---

 

main 태그

• 주요 내용을 지정할 때 사용하는 태그이다.
• 반복해서 등장하는 요소를 포함하면 안된다.
• article, aside, footer, header, nav 태그의 하위에 포함할 수 없다.