HTML기초(2) - 테이블 / 멀티미디어

표만들기 - 테이블

 

#표만들기

 

표는 table 이라는 태그를 통해서 만들수 있다. 

행은 table row 인 <tr>  (가로를 의미한다)

열은 table  datasell 인 <td> (세로를 의미한다)

 

 *구분 쉽게 하기 

-맨위줄은 table-head 로 표현해서 굵은 글씨와 마크업을 표시한다

<tr> 대신 <thead> 로 감싸고

<td> 대신 <th> 로 감싼다  (th로 하면 자동 굵음이 적용된다)

본문은 <tbody> 

바닥글은 <tfoot> 으로 하는게 보편적이다 

 

 

---

#테이블 스타일링

 

테두리설정하기

   테두리는 테이블 전체 / tr / td 등등 각각 설정 가능하다 

 

 

간격설정하기
  -> 테이블은 기본 여백을 가지고 있습니다. 그렇기 때문에 여백을 설정하기 전에 기본 여백을 없애야지 설정이 잘 먹습니다.

 

기본여백을 없애고 나면, 이제 간격을 설정 해봅시다.

여백은 border-spacing으로 조절 가능합니다.

 

 

 

 

---

---

 

멀티미디어

 

#이미지

 <img>

 

이미지는  <img src= “파일경로”>  의 방법으로 작성한다

여기서 중요한게 alt 인데

만약에 파일을 잘 못 적거나, 불러오지 못할경우, 파일을 다운받지않고 알고 싶은경우 등등의 상황을 방지하고자 

alt = “이미지에 대한 설명을 적어“  -> 이런 방식으로 표현이 가능해진다.

 

예시를 보자

 

정상적인 방법이여서 poster.jpg를 불러오면, 제대로 이미지가 나온다.

하지만 지금은 이미지가 꺠져서 나와서 무슨 이미지인지 모르는 상태이다.

미리 alt 를 통해서 설명해 놓아서 문제 없이 무슨 이미지인지 짐작은 할 수 있다.

추가적으로 높이와 너비만 간단히 보고 넘어가자

img 는 특이하게 태그 안에서 바로 설정이 가능하다

<img 태그안에 이어서 작성 하면 된다)

-> 이 너비는 css로 얼마든지 수정이 가능한 것도 알고 있으면 좋다

---

 

#비디오 

  <video>

 

비디오도 이미지와 마찬가지로 src를 통해서 표현가능하다. 하지만 src만 넣을경우 비디오가 움직이지 않을거다.

왜냐면 몇가지를 추가적으로 해줘야 되기 때문이다.

 

●autoplay 

넣어주면 페이지 로딩 시 자동으로 재생시켜라 를 의미한다

●muted

하지만 자동재생은 소리문제 때문에 기본설정을 음소거로 해주는게 좋다. (크롬은 음소거 안하면 재생이 안되는게 기본 설정이다)

●controls

일시정지 재생바 같은 컨트롤 속성을 추가해준다 

크기

이미지와 마찬가지로 바로 조절 또는 css로 조절한다 

 

---

#오디오 

  <audio>

 

오디오의 경우, 동일하게 src로 추가한다. 하지만 오디오는 기본적으로 안 보이는 성질이 있다. 그렇기 떄문에 controls를 추가해야지만 보인다.

또한 autoplay 나   muted도 동일하게 작동한다.

---

# iframe

 -inline frame : HTML 문서 안에서 다른 HTML 문서를 보여주는 태그

 

유튜브에서 공유-퍼가기를 누르면 iframe을 확인 할 수있다. 

이걸 복사해 내 html 파일에 붙여넣고 실행하면 해당 페이지가 내 파일에 나오는 걸 볼수 있다.

 

이런 방식으로 모든 html을 불러오기가 가능하다.

이것도 width height 직접 조정이 가능하다

 

그러면 이거는 어디서 주로 사용할까?

 -지도를 직접 넣을때 (자주 본 모양이다)

-온라인 결제창도 이거다