STS 121::HTML 프로그래밍 기초

3. 이미지와 테이블


이번 강좌에서는 대표적인 웹 콘텐츠 리소스인 이미지를 보여주기 위한 방법과 데이터 표현을 위한 테이블의 구조 및 활용법을 배웁니다.

이 강의를 통해 <img> 태그의 상세 사용법을 배워 웹 콘텐츠 제작에 이미지를 자유롭게 활용할 수 있으며, 테이블을 활용해 데이터 구조를 표현 할 수 있게 됩니다.


01: 이미지

웹 화면에 이미지를 넣기 위해서는 <img> 태그를 사용합니다. src속성으로 이미지 경로를 지정하고 widthheight로 이미지의 크기를 조정할 수 있습니다. 또한 alt속성은 이미지를 표시하지 못할 경우 표시되는 대체 텍스트를 지정 합니다. 이미지의 경로는 절대경로 및 상대경로로 설정 할 수 있습니다.

<img src="이미지 경로" alt="대체텍스트" width="너비" height="높이">

이미지 파일 종류

이미지 파일에는 여러 종류가 있어 사용 목적에 따라 적합한 이미지 형식을 사용하는 것이 좋습니다.

참고 동영상 강좌

참고 자료

퀴즈

1) 다음 이미지를 보고 sub.html에서 banner.gif 파일을 불러오는 경로를 절대경로와 상태경로로 표현하시오.

html_3-3

해답보기

  • 절대 경로 : /images/banner.gif
  • 상대 경로 : ../images/banner.gif

2) 이미지 태그의 필수속성은 무엇입니까?

해답보기

이미지의 경로를 설정하는 src는 필수 속성입니다.



02: 테이블 태그

표를 만들기 위해서는 <tabel>태그를 사용합니다. 로우(행,row)와 컬럼(열,Cloumn)을 표현하기 위해 <tr>, <td>, <th>같은 태그와 함께 작성합니다. <tr>을 사용해 행을 정의하고 <td>를 사용해 각 행에서 칸(열)을 나누는 기능을 합니다. 제목에 해당하는 열을 정의할 때는 <th> 태그를 사용합니다.

샘플이미지

테이블 태그에는 테두리 선 두께를 지정하는 border 등 다양한 속성이 있으나 가급적이면 기본 태그로 컬럼과 로우 구조를 만드는 정도만 사용하고 css 를 사용해 디자인요소를 지정하는 것이 올바른 방법 입니다.

참고 동영상 강좌

참고 자료

퀴즈

1) 테이블에서 하나의 요소를 나타내기 위해 사용하는 태그는 무엇입니까?

해답보기

<td></td>

2) 3행 5열로 이루어진 테이블을 생성하시오.

해답보기

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
<table>

3) 2개의 행을 합치는 방법을 서술하시오

해답보기

<td rowspan="2">

03: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.


04: 참고 자료