제발 제 코드에 훈수하세요

바둑,오목,빙고,땅따먹기 등등 

우리는 수없이 많은 네모사각 표들을 접해왔다.

표절, 뇌절 심지어 게시판도 표이다.

오늘은 HTML에서 사용하는 표 태그에 대해 배워보려고 한다.

표 태그

표 태그는 <table>로 쓰고 그 안에 <tr>,<td>,<th>등을 사용하여 형태를 나타낸다.

<thead>,<tbody>,<tfoot>의 구조안에 각각의 내용들을 넣어 줄 수 있다.

html모드로 이를 확인해보면

<table>
<thead>
<tr>
<th>제목이</th>
<th>되는</th>
<th>행이다</th>
<th>.</th>
</tr>
</thead>
<tbody>
<tr>
<td>이렇게</td>
<td>블로그</td>
<td>내에서</td>
<td>표를</td>
</tr>
<tr>
<td>만들</td>
<td>수</td>
<td>있다</td>
<td>.</td>
</tr>
</tbody>
<tfoot>
<!-- 보통 합계나 비고 등으로 쓰인다 안쓸 수 있음-->  
</tfoot>
</table>

여기서 행과 열을 구분할 수 있다. 

행은 <tr>을 쓰고 열은 <td>를 쓴다.

( 행이 가로,row 열이 세로,col )

위의 코드와 같이 <thead>에는<tr>안에 제목셀이되는 <th>를 쓰고 이는 굵은 글씨로 표시된다.

<th>는 scope라는 속성을 갖는데 방향을 표시할 때 쓰는 속성이다.

scope="row"이면 행쪽, scope="col"이면 열쪽이다. 

<tbody>에는 <tr>안에 <td>를 쓰고 본문이 되는 내용을 써준다.

하늘색 줄은 아무의미 없다 그냥 한 것이다.

정리하면 <table>안에 <tr>로 행을 만들고 <th>로 제목을 만들고 <td>로 본문을 적어주면 된다.

그것의 구조는 <thead>에 <tr><th>, <tbody>에 <tr><td>이다.

※<table>바로 밑에 <caption>을 사용해 표에 캡션을 달 수 있다. 

잠깐 말했던 행(row)과 열(col)을 통해 셀 병합을 할 수 있다.

셀병합

셀 병합은 셀을 합친다는 뜻이고 thead와 tfoot 구간에서는 사용할 수 없다.

위의 표를 이렇게 행쪽으로 합치는 법과 열쪽으로 합치는 법을 배워보겠다.

바로 <rowspan>과 <colspan>을 사용하는 것인데 각각 행확장, 열확장이라는 뜻을 가진다.

span은 확장이라는 뜻이 있는데 여기서 중요한 점은 방향으로 확장이라는 것이다.

rowspan을 쓰면 행을 확장한다 가로로 확장인줄 알겠지만 세로로 확장한다

어? 세로는 열인데? 하지만 행을 확장하는 것이기 때문에 가로가 확장되면 세로와 합쳐지는(이게 뭔소리..?)

여하튼 rowspan은 행 확장, colspan은 열 확장으로 각각 세로병합, 가로병합이다.(헷갈리지 않게 주의하자!)

<td style="width: 25%;" colspan="2">이렇게<br />블로그</td>
<td style="width: 25%;" rowspan="2">내에서<br />있다</td>

"이렇게" 와 "블로그"는 가로병합이므로 열 확장 => colspan

"내에서" 와 "있다"는 세로병합이므로 행 확장 => rowspan

이꼴(=)뒤에 숫자는 칸이나 줄의 수이다.

headers속성

저번 페이지에 말했던 접근성을 위해 필요한 속성이다.

시각장애우들은 소리로 표를 알기위해 어떤 행과 어떤 열에 있는 지를 알아야한다.

이것을 위해서 headers에는 id값을 받아 그것을 표시해 줄 수 있다.

"되는"에 id값 "doinun"을 주게 되고 "만들"에 id값 "mandle"을 준다면 "수"는 headers값으로 "doinun mandle"을 가지면 된다.

<td id = "doinun">되는</td>
<td id = "mandle">만들</td>
<td headers = "doinun mandle">수</td>

이렇게하면 시각장애우도 수가 어떤 행과 어떤 열의 칸인지 알 수 있을 것이다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바

멀티미디어란 영상·음성·문자 등과 같은 다양한 정보 매체를 복합시킨 장치라고 한다.

대부분의 사람들이 멀티미디어를 행하고 있을 것이다.

스마트폰이나 데스크톱 등 다양한 매체에서 멀티미디어적 요소들을 많이 본다.

이렇게 다양한 매체에 꼭 있는 것이 바로 인터넷이다.

우리는 인터넷에서 멀티미디어 정보를 주고받는다. 

요새는 웹이 아닌 어플을 통해 그러한 정보를 많이들 주고받는다.

하지만 모바일폰을 통해서도 웹사이트에 들어오기 때문에 우리는 멀티미디어적 요소를 다룰 수 있어야 한다.

멀티미디어 요소

멀티미디어 요소에는 이미지, 사운드, 미디어 이렇게 세 가지가 있다.

이미지(image) 

이미지 태그는 <img>로 쓰고 단일 태그이다.

<img>에 꼭 넣어줘야 하는 속성 값 두 가지는 바로 src(source, 자료), alt(alternative, 대체)이다

src에는 경로와 파일명을 적어 주어야 한다.

<img src = "images/file.png" />

슬래시( / )로 폴더를 구분해주고 이렇게 확장자 명까지 넣어주면 페이지에 이미지가 나올 것이다.

또한 ../로 상위 폴더를 표시해주기도한다. ../../는 두 번 상위 폴더이다. 

alt는 접근성을 위해서 필요한 요소이기도하고 이미지를 설명해주는 속성이다.

<img src = "images/file.png" alt = "파이리미지입니다." />

사운드(sound)

사운드 태그는 <audio>로 쓰고 종료가 있는 태그이다.

<audio>에 꼭 들어가야 하는 태그는 src태그이다.

로컬 환경에서는 그렇지 않지만 서버에서는 대소문자를 구분한다.

<audio src = "Sound.mp3">
</audio>

미디어(media)

미디어 태그는 <video>로 쓰고 종료가 있다.

<video>도 마찬가지로 src가 꼭 들어간다.

추가적인 속성으로 controls와 autoplay가 있다.

controls는 재생 일시정지와 같은 바를 영상 하단에 만들어준다.

autoplay는 자동재생을 해주는 속성이다.

<video src = "video.mp4" controls autoplay>
</video>

※<audio>와 <video>가 <img>처럼 단일 태그가 아닌 이유

원래 확장자가 여러 개로 나뉘어 있었다

그리고 그것들을 브라우저가 허용할 수 없었기 때문에 

src속성을 여러 개 적어주어야 했다.

HTML5인 현재는 그렇지 않지만 종료가 있는 채로 쓴다.

figure태그, figcaption태그

figure태그는 <figure>로 쓰고 종료가 있는 태그이다.

위와 같은 요소들을 컨테이너처럼 담을 수 있는 태그이다.

figcaption태그는 <figcaption>로 쓰고 종료가 있는 태그이다.

요소에 설명을 넣는 태그로 <figure> 내에 한 번 쓸 수 있다.(안 쓸 수도 있다.)

<figure>와 <figcaption>을 활용해 이미지와 설명을 넣어보자

<figure>
  <img src="images/bird.jpg" alt="멋진 노을 구름 사이로 햇빛이 촤하고 들어오는 중간에 새가 훨훨 날아감">
  <img src="images/bird2.jpg" alt="노란 부리를 가진 새">
  <figcaption>멋진 노을 위를 나는 새와 그 새의 정체 </figcaption>
</figure>

이렇게 두 개의 이미지에 동시에 설명을 넣을 수 있다.

기본의 <img>와 다르게 들여 쓰기가 된 상태에서 이미지가 나타난다.

alt값과 <figcaption>이 갔다면 alt를 생략할 수 있다.

블락, 인라인 요소

이제까지 태그들은 두 가지 요소로 구분할 수 있다. 

바로 블락,인라인 요소이다.

블락 요소는 <br/>(줄 바꿈 태그)를 쓰지 않아도 자동으로 줄 바꿈 되는 요소들을 말한다.

인라인 요소는 <br/>을 써야 하는 요소들을 말한다.

인라인 요소는 블락 요소보다 작다. 때문에 인라인 요소가 블락 요소를 감쌀 수 없다.

하지만 HTML5에서 <a>는 편의상 블락요소를 감쌀 수 있다.

이 두 요소는 나중에 CSS(StyleSheet)를 위해서 알 필요가 있다.

※접근성

페이지의 접근성은 인터넷 사용자라면 모두를 위한 것이다.

장애우들에게도 마찬가지이다. 

아까 배웠던 alt속성은 시각장애우에게 필수적이다.(파일이 깨졌을 때 설명을 보기 위한 것도 포함)

alt속성은 이미지를 설명해 주는데 시각장애우들은 소리로만 그것을 볼 수 있다. 

따라서 눈 감고 그 이미지를 느낄 수 있도록 상세한 설명을 적어주는 것이 필요하다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바