HTML 문서에서 텍스트 / 목록 / 표 / 이미지 / 오디오와 비디오 / 하이퍼링크 태그 사용하기

지나·2022년 3월 5일
html
0


🥎 텍스트 관련 HTML 태그



h1,h2,h3 ... hn

<h1> ~ </h1>

웹 문서에 삽입될 텍스트

h1, h2, h3 ... 순서대로 작아지며 h1 이 가장 큰 제목임

p

<p> ~ </p>

텍스트 단락을 만듬 (한줄)


br

<br> ~ </br>

텍스트 줄바꿈 (주소나 시조 등 줄의 구분이 중요할 때 사용)

단락 스타일 적용 시 p 에만 적용됨


hr

<hr> 닫힘태그x

문서 내용에서 주제 흐름이 바뀔 때 사용되며 수평 가로선 생김 (css에서 없앨 수 있음)

시각적 구분보다는 의미적 구분


blockquote

<blockquote> ~ </blockquote>

인용문 (약간 들여쓰기 됨)


strong

<strong> ~ </strong>

중요한 내용 강조 (의미적 관점)


b

<b> ~ </b>

글자 중요하다듯이 굵게 표시 (시각적 관점)


em

<em> ~ </em>

글자 기울게 (흐름상 강조)


i

<i> ~ </i>

글자 기울게 (관용구 등)


abbr

<abbr> ~ </abbr>
<abbr title="internet of things">TOT</abbr>

줄임말 (title 속성을 함께 사용)


cite

<cite> ~ </cite>
<p>어머니는 짜장면이 싫다고 하셨어<cite>GOD의 어머님께 中</cite></p>

참고 내용 표시


code

<code> ~ </code>

컴퓨터 인식을 위한 소스 코드


small

<small> ~ </small>

부가 정보 처럼 작게 표시


sub

<sub> ~ </sub>
<p>물의 화학식은 H<sub>2</sub>0 입니다.</p>

아래첨자


sup

<sup> ~ </sup>

위 첨자


s

<s> 닫힘태그x

취소선 표시


u

<u> 닫힘태그x

밑줄 표시


ins

<ins> 닫힘태그x

공동 작업에서 새로운 작업 삽입


del

<del> 닫힘태그x

공동 작업에서 기존 내용을 삭제


🥎 목록 관련 HTML 태그



ol li

<ol>
	<li> ~ </li>
</ol>

순서가 있는 목록을 만들 때 사용하는 태그


<ol type="a" start="3">   <!--알파벳 소문자 c 부터 시작한다-->
...
</ol>

type 과 start 를 지정하여 어떤 문자로 순서를 표기할 지, 몇번째 문자부터 시작할 지 정할 수 있다.
type="a" 는 알파벳 소문자
type="A" 는 알파벳 대문자
type="i" 는 로마 소문자
type="I" 는 로마 대문자


<ol reversed> ~ </ol>

순서를 역방향으로 바꾸고 싶을 때는 ol 뒤에 reversed 를 표기한다.



ul li

<ul>
	<li> ~ </li>
</ul>

순서가 없는 목록을 만들 때 사용하는 태그


<ul type="square"> ~ </ul>   <!--네모모양 불릿-->
<ul type="circle"> ~ </ul>   <!--원모양 불릿-->

ul 태그에 type 을 표기하여 불릿의 모양을 바꿀 수 있다.



dl dt dd

<dl>
	<dt>설명 제목</dt>
    	<dd>설명1</dd>
        <dd>설명2</dd>
    </dt>
    <dt>설명 제목</dt>
    	<dd>설명1</dd>
        <dd>설명2</dd>
    </dt>
</dl>

설명 목록을 만들 때 사용하는 태그


🥎 표 관련 HTML 태그


table caption

<table>
	<caption>표 제목</caption>
</table>

표를 만드는 태그와 표 제목 태그


colgroup col

<colgroup>
    <col> 닫힘태그x
</colgroup>

항목 구분을 위해 열을 묶어주는 태그

colgroup 태그는 반드시 caption 다음에 사용한다.


아래 예시처럼 사용할 수 있다. 
<table>
	<caption>열마다 다른 스타일 부여하기</caption>
    	<colgroup>
			<col style="background-color:#blue;>
    		<col>
    		<col span="2" style="width:150px;">
		</colgroup>
        ...
</table>
  • 첫번째 열의 배경색을 #blue 로 지정
  • 두번째 열은 스타일 부여하지 않음
  • 세번째 열과 네번째 열은 너비를 150px 로 한다.

tr th td

<tr> ~ </tr>
<th> ~ </th>
<td> ~ </td>

tr 행을 만드는 태그
th 글자를 굵게 만들어 제목처럼 만드는 태그
td 셀을 만드는 태그


아래 예시처럼 사용할 수 있다. 
<table>
	<caption>내가 지금 먹고 싶은 음식</caption>
    <tr>
    	<th>이름</th>
        <th>가격</th>
        <th>위치</th>
    </tr>
    <tr>
    	<td>텐동</td>
        <td>15000원</td>
        <td>서현</td>
    </tr>
    <tr>
    	<td>삼겹살</td>
        <td>12000원</td>
        <td>집 앞</td>
    </tr>
</table>

첫번째 행에 글씨가 굵게 표기된 세개의 셀이 만들어짐 (이름, 가격, 위치)
두번째 행에는 각 세개의 셀에 들어갈 세개의 항목
세번째 행에도 각 세개의 셀에 들어갈 세개의 항목


아래와 같은 표가 만들어진다.


내가 지금 먹고 싶은 음식
이름 가격 위치
텐동 15000원 서현
삼겹살 12000원 집 앞

thead tbody tfoot

<thead> ~ </thead>
<tbody> ~ </tbody>
<tfoot> ~ </tfoot>

표의 구조를 뜻하며 각 영역을 지정한다.

table 의 t 와 기존에 쓰던 시맨틱태그와 결합되어 비슷한 의미로 쓰인다.


rowspan

<rowspan> 닫힘태그x

행을 합칠 때 사용하는 태그


아래 예시처럼 사용할 수 있다.

<table>
	<tr>
    	<th>용도</th>
        <th>중량</th>
        <th>개수</th>
        <th>가격</th>
    </tr>
    <tr>
    	<td>선물용</td>
        <td>3kg</td>
        <td>15개</td>
        <td>35000원</td>
    </tr>
    <tr>
    	<td>선물용</td>
        <td>5kg</td>
        <td>25개</td>
        <td>60000원</td>
    </tr>
    <tr>
    	<td>가정용</td>
        <td>3kg</td>
        <td>15개</td>
        <td>30000원</td>
    </tr>
    <tr>
    	<td>가정용</td>
        <td>5kg</td>
        <td>25개</td>
        <td>55000원</td>
</table>

용도 중량 개수 가격
선물용 3kg 15개 35000원
선물용 5kg 25개 60000원
가정용 3kg 15개 30000원
가정용 5kg 25개 55000원

rowspan 속성을 사용하지 않았을 때


<table>
	<tr>
    	<th>용도</th>
        <th>중량</th>
        <th>개수</th>
        <th>가격</th>
    </tr>
    <tr>
    	<td rowspan="2">선물용</td>   <!--합칠 행의 개수는 2개-->
        <td>3kg</td>
        <td>15개</td>
        <td>35000원</td>
    </tr>
    <tr>   <!--위에서 합쳐진 행에 대해 표기하지 않아도됨-->
        <td>5kg</td>
        <td>25개</td>
        <td>60000원</td>
    </tr>
    <tr>
    	<td rowspan="2">가정용</td> <!--합칠 행의 개수는 2개-->
        <td>3kg</td>
        <td>15개</td>
        <td>30000원</td>
    </tr>
    <tr>   <!--위에서 합쳐진 행에 대해 표기하지 않아도됨-->
        <td>5kg</td>
        <td>25개</td>
        <td>55000원</td>
    </tr>
</table>

용도 중량 개수 가격
선물용 3kg 15개 35000원
5kg 25개 60000원
가정용 3kg 15개 30000원
5kg 25개 55000원

rowspan 속성을 사용하였을 때


아니 이거 왜이러냐 아무튼 저거 선물용이랑 가정용 위아래 합쳐짐 ..^^;;
나중에 오류 수정 할게요 ~;;^^


colspan

<colspan> 닫힘태그x

열을 합칠 때 사용하는 태그

<td colspan="2">겹치는 내용</td>

rowspan 속성 응용방식과 같이 똑같은 방식으로 사용


🥎 이미지 관련 HTML 태그


img

<img src="이미지 파일의 경로" alt="대체 텍스트>

이미지를 삽입할 때 사용하는 태그

해당 html 문서와 삽입할 이미지가 같은 폴더에 있다면 src="이미지.형식" 으로 표기한다.
html 문서와 삽입할 이미지가 다른 폴더에 있다면 src="폴더이름/이미지.형식" 으로 표기
대체 텍스트 필요 없는 이미지 삽입 시에는 alt=""

  • <img height=150>

  • <img width=50%>

  • 이미지의 너비만 지정 시 높이는 너비에 맞게 바뀜


🥎 오디오와 비디오 관련 HTML 태그


object

<object> ~ </object>

다양한 멀티미디어를 삽입할 때 사용

<object data="폴더/파일이름.형식"></object> <!--파일 경로 표시-->
<object width="너비" height="높이" data="파일.형식"></object> <!--파일의 너비와 높이를 지정하고 불러오는 방식-->

data 로 파일을 불러옴
해당 웹브라우저에서 호환하는 플레이어의 너비와 높이를 지정 할 수 있음


embed

<embed> 닫힘태그x
<embed src="파일.형식" width="너비" height="높이">

audio video object 태그를 지원하지 않는 웹 브라우저에서 사용


audio video

<audio> ~ </audio>
<video> ~ </video>

오디오와 비디오파일을 삽입할 때 사용

<video src="파일.mp4" width="300px" height="200px"></video>
<audio src="파일.mp3" controls autoplay loop></audio>

controls : 플레이어에 컨트롤 바 표시

autoplay : 자동 재생

loop : 반복 재생

muted : 소리 제거

preload : 로딩 방식 지정 (=auto``=metadata``=none)

poster="이미지.형식" : 재생되기 전까지 표시할 이미지 지정 - video 전용

코드 상 표기된 속성만이 적용된다.


🥎 하이퍼링크 관련 HTML 태그


a href

<a href="링크 주소">링크를 걸 텍스트 또는 이미지</a>
<a href="링크 주소" target="_blank">텍스트</a> <!--새 탭으로 링크 열기-->

하이퍼 링크를 삽입할 때 사용


profile
지나
이전 포스트

HTML 의 기본 구조와 태그들

다음 포스트

HTML 문서에서 입력양식 (form) 태그 사용하기

0개의 댓글