본문 바로가기

HTML

[WBE2]DAY3_단락태그, 서식태그, 리스트태그

정의 태그(Definition tag)

용어와 그에 대한 정의를 모아놓은 리스트
<dl>태그 안에 <dt>태그와 <dd>태그에는 해당 용어에 대한
정의가 들어간다.

  • dl : Definition-List
  • dt : Defnition-Term
  • dd : Defnition-Description

<dl>
<dt>제목</dt>
<dd>내용 항목</dd>
<dd>내용 항목</dd>
<dd>내용 항목</dd>
...
</dl>

 

빈 요소, Void요소(Empty elements)

주로 문서에 무언가를 첨부하기 위해 사용되며 단일 태그라고 한다.

<img src = "경로">

 

이미지 태그

1. 웹 페이지에서 주로 사용되는 이미지 종류
    1) JPEG 이미지 : .jpg, .jpeg 휴대폰, 카메라 사진
    2) GIF 이미지 : .gif 움직이는 이미지
    3) PNG 이미지 : .png 배경 투명 사용
    2. html 문서에 이미지를 삽입할 때에는 <img>태그를 사용한다.

<img src = "이미지 경로" alt= "대체 문자열">


2. 이미지 경로를 사용하는 방법
    1) 절대 경로 : 현재 어디에 위치해 있어도 찾아갈 수 있는 경로
    2) 상대 경로 : 현재 작성하는 파일 기준으로 찾아가는 경로

3. 무료 icon 사이트
www.iconfinder.com

링크 태그

HTML 링크(Link)
현재 페이지에서 다른 페이지로 이동하고자 할 때 하이퍼링크를 사용한다.
보통 링크라고 부르며, <a>태그를 사용한다.

<a href = "페이지의 경로 혹은 사이트의 주소" taget = "보여줄 창">
문자열 또는 이미지
</a>

 


테이블

테이블(table)
여러 종류의 데이터가 행과 열로 정리된 표.
<table>태그 사용
<table border = "테두리 굵기(1부터)">

<tr>태그 : 행 (table row)
<th>태그 : 컬럼명 (table header)
<td>태그 : 열 (table data)

병합
열 병합
colspan="합칠 열 개수" : 좌에서 우로 합쳐지고 해당 행에 적용
행 병합
rowspan="합칠 행 개수" : 현재 행과 아래 행과 합쳐짐
        아래 행이 없다면 적옹 안됨


캡션(Caption)

<caption>태그를 사용하면 테이블의 상단에 제목이나 짧은 설명을
붙일 수 있다. <table>하나 당 하나의 <caption>태그만 사용 가능.