HTML 리스트,테이블,링크,이미지

민겸·2023년 2월 26일

리스트 링크 이미지 테이블

html

목록 보기

3/5

HTML 리스트

리스트(list)

여러 목록들을 나열한 목록이나 명단. 중요도가 비슷한 것(리스트 요소)들끼리 모아놓을 때 사용하며 HTML에서는 다음과 같은 세개의 리스트들을 지원한다.

1.순서가 없는 리스트(Unordered list)

<ul>태그로 시작, 각각의 리스트 요소는 <li>태그 안에 존재한다.

-입력

  <ul>
     <li>list item1</li>
     <li>list item2</li>
     <li>list item3</li>
  </ul>

-출력
왼쪽의 점을 bullet(목록 표시)라 하며, 후에 css로 바꿀 수 있다.

list item1

list item2

list item3

2.순서가 있는 리스트(ordered list)

<ol>태그로 시작, 각각의 리스트 요소는 <li>태그 안에 존재한다.
-입력

  <ol>
     <li>list item1</li>
     <li>list item2</li>
     <li>list item3</li>
  </ol>

-출력
기본적으로 목록 표시는 아라비아 숫자고 후에 css로 바꿀 수 있다.

1.list item1
2.list item2
3.list item3

3.정의 리스트(definition list))

용어와 그에 대한 정의를 모아놓은 리스트.<dl>태그로 시작, <dt>태그 내에는 용어의 이름,<dd>태그 내에는 용어의 정의를 기술한다.

용어의 이름과 정의가 번갈아 나오거나 이름 하나에 정의가 여러개인 것은 상관없지만 이름이 여러개인데 정의가 그보다 적은 것은 불가능하다.

-입력

  <dl>
	<dt>definition term</dt>
	<dd>difinition description1</dd>
	<dd>difinition description2</dd>
	<dd>difinition description3</dd>
  </dl>

-출력

definition term
    difinition description1
    difinition description2
    difinition description3

리스트 추가 내용

리스트 안에 제목을 넣을 때 <h>태그를 사용하여 넣을 수 없다 (웹페이지에 표시는 되지만 웹표준 검사시 오류발생).
사용하려면 <li>태그 안에 넣어야함.

VScode에서 여러개의 리스트를 추가하는 단축키
ul>li*3(추가할 숫자){list-item(리스트 내용)}

HTML 테이블

테이블(table)

여러 목록들을 일렬로 나열하는 리스트와 달리 보기 좋게 정리해준 표.
HTML에선 <table>태그를 사용해서 작성할수 있으며 <table>태그는 다음 세가지 태그들로 구성된다.

<tr>태그 : 테이블에서 열을 구분한다.
<th>태그 : 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.
<th>태그 안에는 제목의 방향과 범위를 나타낼 수 있는 scope="row(열) / col(행)"를 사용할 수 있다.
<td>태그 : 테이블의 열을 각각의 셀(cell)로 나눠준다.

+<caption>태그를 활용해 테이블 상단에 테이블의 제목과 설명을 쓸 수 있다.

테이블의 열, 행 병합

워드에서 표의 셀을 병합하는것처럼 테이블의 열과 행을 각각 column과 rowspan 을 활용하여 합칠 수 있다.
<td rawspan="2(합칠 숫자)">

테이블의 구분

<table border="1">을 사용해서 표에 선을 추가할 수 있으나 후에 css를 활용하면 사용할 필요 없어진다.
시멘틱 코드의 상단(header), 본문(main), 하단(footer)처럼 테이블도 <thead> , <tbody> , <tfoot> 세 부분으로 나눠서 작성할 수 있다.

사용법

-입력

<table border="1">
        <caption>
            <h2>테이블 제목</h2>
            <p>테이블 설명 기술합니다.</p>
        </caption>
        <thead>
            <tr><!--table row-->
                <th scope="col">구분</th><!--table heading-->
                <th scope="col">제목1</th>
                <th scope="col">제목2</th>
                <th scope="col">제목3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>data11</td><!--table data-->
                <td colspan="2">data12</td>
                <!-- <td>data13</td> -->
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>data21</td>
                <td rowspan="3">data22</td>
                <td>data23</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>data31</td>
                <!-- <td>data32</td> -->
                <td>data33</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>data41</td>
                <!-- <td>data42</td> -->
                <td>data43</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">합계</th>
                <td>total1</td>
                <td>total2</td>
                <td>total3</td>
            </tr>
        </tfoot>
       </table>

-출력

HTML 링크

링크(link)

<a>태그 (Anchor Tag)를 사용한다.
<a>태그의 herf(hypertext reference)속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다.
링크의 연결 방법에 따라 절대경로와 상대경로로 나뉜다.

사용법

<a herf="(링크를 걸 주소)">

절대경로

주로 http:// 혹은 https://로 시작하는 https://www.naver.com/ 같은 어느곳에서 접속을 해도 같은 곳으로 연결되는 링크.

상대경로

현재 사용중인 html문서 기준으로 링크가 어디에 존재하는지 적는다.
같은 파일에 있는 문서는 이름만 적어서 링크를 걸 수 있다.
상위 폴더에 있을 경우 주소란에 ../(문서의 이름),
하위 폴더에 있을 경우 (폴더의 이름)/(문서의 이름)을 써서 연결시킬 수 있다.

추가로 같은 문서 내에서 특정 위치로 이동하고 싶을 땐 특정 위치(문단, 글 등)에 id 지정 후 주소란에 #(id)를 적는것으로 활용 가능하다.

target 속성

기본적으로 링크가 열릴 때 현재 웹페이지에서 연결시키는데, <a>태그의 target 속성을 이용해서 연결된 문서를 어디서 열지 정할 수 있다.

기본 속성은 _self이고 새 창에서 열기 위해선 _blank을 사용해 새 탭, 혹은 새 창에서 열 수 있다.
<a href="" target="_blank">

HTML 이미지

이미지(image)

이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다.
현재 웹페이지에서 주로 사용되고 있는 이미지의 종류는 JPEG, GIF, PEG등이 있다.
html문서에는 <img>태그를 활용하여 삽입할 수 있으며, 이 태그는 닫는 태그가 없는 빈 태그(empty tag)다.

사용법

<img src="이미지주소" alt="대체문자열">

src 속성

저장된 주소의 URL주소를 명시한다.

alt 속성

이미지가 로딩될 수 없는 상황에서 대신 나타날 문자열 설정 가능.

alt 를 사용하면 검색 키워드 추가, screen reader라는 앱 사용시 alt 의 내용을 읽어주는 등, 웹접근성을 높일 수 있다.

이미지의 추가 설정

크기조절

html에는 <style>속성을 사용하여 이미지의 크기를 설정할 수 있다.
또 <img> 태그 안에 width, height 속성을 활용해서 이미지의 높이와 너비를 픽셀 단위로 설정할 수도 있다.
하지만 나중에 css를 이용하는 내/외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 <style> 속성을 사용하는것이 더 좋다.

테두리 설정

<img src="이미지주소" alt="대체문자열" style="width:320px; height:214px; border: 3px solid black">

border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.

링크

<a>태그 내용에 <img> 태그를 넣어서 링크를 설정할 수 있다.

더미 이미지

어떤 이미지를 넣을지 결정이 안됬지만 문서 안에서의 배치를 봐야 할 때 크기를 맞춘 더미 이미지를 넣을 수 있다.

<img src="http://place-hold.it/300x300" alt="dummy image">

이미지 맵

이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미하는데 <map> 태그를 활용해서 만들 수 있다.
<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다.
<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 버튼과 같은 역할을 한다.

<h1>이미지 맵 만들기</h1>
	<img src="/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending" style="width:320px; height:240px" />
	<map name="vending"> 
		<area  shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
		<area  shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
	</map>
	<p>표지판을 눌러보세요!</p>

민겸

이전 포스트

HTML의 태그와 문단요소

다음 포스트