[HTML] HTML 이미지 / 표 태그 #4

시작하며...

이번엔 HTML 태그 중에서 이미지와 표 태그에 대해 알아볼 것이다.

 

HTML 이미지 태그

img 태그

웹 상에 이미지를 넣기 위해 <img> 태그를 사용한다.

 

img 태그 속성 - src, alt, title, width, height

<img> 태그의 속성 중에 많은 속성이 있는데 그 중 자주 사용되고 중요한 속성은 다음과 같다.

 

src

필수 속성이며, 이미지의 경로를 넣는다.

alt

대체 텍스트, 이미지가 보이지 않을 경우 대체 텍스트를 보여준다.

title

이미지를 가져다 댔을 때 보임, alt의 대체제나 중복이 되어서는 안 됨

width, height

각각 넓이와 높이, px(픽셀) 단위로 길이 조절

    <h2>img 이미지 태그</h2>
    <img
      src="이미지 링크"
      alt="고양이 캐릭터"
      title="하치와레"
      width="300"
    />

결과를 보면 왼쪽처럼 이미지가 나타나고 사진에다가 마우스를 가져다 댔을 때 title 속성 값이 보인다.

반면 이미지가 없거나 경로가 잘못되었을 때, alt 속성 값이 보인다.

결과

<img> 태그에 대한 자세한 설명과 다른 속성에 대한 내용은 아래 링크에서 확인할 수 있다.

<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN

 

HTML 표 태그

table, caption, tr, td 태그

표를 만들기 위해서 <table> 태그를 사용해야 한다.

그리고 그 표의 설명 또는 제목을 <caption> 태그를 사용한다.

 

표를 만들었으면, 표의 내용을 채워 넣기 위해 <tr>, <td> 태그를 사용한다.

<tr> 태그는 표의 행을 표현하고

해당 행에 있는 데이터 셀 값을 <td> 태그로 표현한다.

    <h2>table 표 태그</h2>
    <table>
      <caption>
        1부터 9까지 숫자
      </caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>

1부터 9까지 숫자가 들어있는 표가 생성된다.

표 모양을 그려주기 위해서 나중에 css 로 설정하면 된다.

 

결과

해당 태그에 대한 자세한 설명은 아래 링크에서 확인가능하다.

<table>: The Table element - HTML: HyperText Markup Language | MDN

<caption>: 표 설명 요소 - HTML: Hypertext Markup Language | MDN

<tr>: The Table Row element - HTML: HyperText Markup Language | MDN

<td>: The Table Data Cell element - HTML: HyperText Markup Language | MDN

 

thead, tbody, tfoot, th 태그

만약 표에 헤더 부분과, 본문 부분, 푸터 부분을 나누고 싶으면

각각 <thead>, <tbody>, <tfoot> 태그를 사용한다.

 

그 안에서 열 또는 행의 헤더를 만들고 싶으면 <th> 태그를 사용하고

scope 속성으로 col, row 중에 선택해서 열의 헤더인지 행의 헤더인지 선택해야 한다.

<h3>테이블 헤더</h3>
    <table>
      <caption>
        웹개발 공부 기록
      </caption>
      <thead>
        <tr>
          <th scope="col">과목</th>
          <th scope="col">월</th>
          <th scope="col">화</th>
          <th scope="col">수</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">HTML</th>
          <td>60분</td>
          <td>60분</td>
          <td>0분</td>
        </tr>
        <tr>
          <th scope="row">CSS</th>
          <td>0분</td>
          <td>30분</td>
          <td>60분</td>
        </tr>
        <tr>
          <th scope="row">JS</th>
          <td>0분</td>
          <td>0분</td>
          <td>60분</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">총 시간</th>
          <td>60분</td>
          <td>90분</td>
          <td>120분</td>
        </tr>
      </tfoot>
    </table>

과목은 HTML, CSS, JS의 헤더가 되어야 하기 때문에, 열의 헤더인 col 을 scope의 속성으로 준다.

그리고 HTML은 60분, 60분, 0분의 헤더가 되어야 하기 때문에, 행의 헤더인 row 을 scope의 속성으로 준다.

 

이러한 부분은 육안으로 차이를 못 느끼지만,

기술적인 측면에서 컴퓨터가 해당 표에 대해 조금 더 쉽게 식별하고 표의 구조를 이해하기 위해 이렇게 구분해야 한다.

결과

해당 태그에 대한 자세한 설명은 아래 링크에서 확인가능하다.

<thead>: 표 머릿글 요소 - HTML: Hypertext Markup Language | MDN

<tbody>: The Table Body element - HTML: HyperText Markup Language | MDN

<tfoot>: 표 바닥글 요소 - HTML: Hypertext Markup Language | MDN

<th>: The Table Header element - HTML: HyperText Markup Language | MDN

 

---

 

마무리 하며...

해당 게시물에서 이미지와 표 태그에 대해 알아보았다.

지금까지 이미지 태그를 사용했을 때, 속성으로 url만 사용하고 alt, title 이런 속성을 사용하지 않았는데

앞으로 특히 alt 속성을 사용해야겠다.

그리고 표 태그도 대충 무슨 태그가 있는지 정도만 알고 있었고 자세한 건 잘 몰랐는데 이렇게 다시 공부하면서 알게 되어서 좋았다.

 

(해당 게시물은 아래 영상을 참고하여 작성한 글입니다.)