이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌4 - HTML - 일 년 전 등록

링크, 이미지, 테이블, 리스트 태그

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 링크, 이미지, 테이블, 리스트에 관한 태그에 대해 알아보겠습니다.

링크

a 태그는 클릭 시 다른 페이지로 이동시켜주는 태그입니다. 속성은 href와 target이 있는데 href는 주소를 나타내고, target은 새 창을 어디에 띄울건지를 나타냅니다.

<a href="https://www.zerocho.com">링크</a>

이미지

이미지는 이미지를 불러오는 태그입니다. 이미지는 안의 내용이 없기 때문에 닫는 태그가 없습니다. 속성은 이미지의 경로를 불러오는 src와 이미지의 경로가 잘못되었거나 파일이 깨졌을 때 나오는 메세지를 입력하는 alt가 있습니다. 그리고 width나 height 처럼 너비와 높이를 정해주어도 됩니다. 단위는 픽셀입니다.

<img src="http://www.gravatar.com/avatar/edc1de56da658ae0b919a2d2ee28e26c?s=32&d=retro" alt="정상 이미지" width="32" height="32" />
<img src="htp://www.naver.com/favicon.ico" alt="손상된 이미지" />

테이블

테이블은 표를 표시하는 태그입니다. 테이블은 셀 하나 하나가 다 태그이기 때문에 간단한 테이블도 양이 좀 많습니다. 테이블의 제목은 caption 태그로 표시합니다. 표에는 여러 줄이 있죠? 첫 줄은 thead, 마지막 줄은 tfoot, 그 이외의 줄은 tbody로 묶어줍니다.

<table>
  <caption>시간표</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

그 후 가로 한 줄은 tr 태그로 표시합니다. 칸 하나는 td 태그로 표시합니다. 제목 칸은 th 태그를 사용합니다. 시간표를 완성해보겠습니다. 결과는 아래에서 확인하세요. 참고로 td나 th는 colspan과 rowspan이라는 속성을 사용할 수 있습니다. colspan은 가로로 얼마만큼의 칸을 차지할 지를 나타내고, rowspan은 세로로 얼마만큼의 칸을 차지할 지를 나타냅니다. 셀 합치기 기능과 비슷합니다.

<table>
  <caption>시간표</caption>
  <thead>
    <tr><td></td><th>월</th><th>화</th><th>수</th><th>목</th></tr>
  </thead>
  <tbody>
    <tr><th>1</th><td>중급회계</td><td></td><td>중급회계</td><td></td></tr>
    <tr><th>2</th><td>기업경제학</td><td>자료구조</td><td>기업경제학</td><td>자료구조</td></tr>
    <tr><th>3</th><td></td><td rowspan="2">알고리즘</td><td></td><td rowspan="2">알고리즘
</td></tr>
    <tr><th>4</th></tr>
    <tr><th>5</th></tr>
    <tr><th>6</th><td></td><td>재무관리</td><td></td><td>재무관리</td></tr>
    <tr><th>7</th><td rowspan="2">마케팅원론</td><td></td><td rowspan="2">마케팅원론</td></tr>
    <tr><th>8</th></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="4">제 시간표입니다</td></tr>
  </tfoot>
</table>

리스트

리스트는 목록을 표시하는 태그입니다. 종류는 두 가지가 있는데 ul과 ol입니다. ul은 순서가 없는 리스트고, ol은 순서가 있는 리스트입니다. 그리고 리스트의 항목은 li 태그로 표시합니다.

<ul>
  <li>Zero</li>
  <li>Hero<li>
  <li>Nero<li>
</ul>
<ol>
  <li>Zero<li>
  <li>Hero<li>
  <li>Nero<li>
</ol>

위의 태그들을 한 번에 보여드리겠습니다.

다음 시간에는 공간을 담당하는 태그들을 알아보겠습니다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

2개의 댓글이 있습니다.
일 년 전
옛날에 해봐서 tr td 정도만 알고있었는데.. 테이블 이해가 조금 어려웠네요. 어려운만큼 더 재밌었습니다. 감사합니다.
일 년 전
html 전부 읽어봤습니다. 연습장이랑 클롬가지고 바로바로 테스트 할수있어서 예제들도 다 한번씩 해봤네요. 쉽고 재미있게 해서 즐거웠습니다.
일 년 전
감사합니다. 꾸준히 업데이트할 예정이니 자주 들러주세요~