01-1⠀텍스트 / 목록 / 표 / 이미지 / 오디오와 비디오 / 하이퍼링크 태그

 

 

 

<텍스트 관련 태그>

 

<hn>

웹 문서 안의 제목을 뜻함

*<h1> 이 가장 큰 제목, <h2> <h3> ... 순서대로 작아짐

 

<p> ~ </p>

텍스트 단락을 만듬 (vsc에서 줄을 바꾸더라도 브라우저엔 한줄로 표시)

 

<br> 닫x

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

*단락 스타일 적용 시 <br> 은 적용 안됨

 

<hr> 닫x

문서 내용에서 주제 흐름이 바뀔 때 사용 (시각적 표현 x 의미적 관점으로 사용)

*수평 가로선 표시는 css 사용하여 없앨 수 있음

 

<blockquote> ~ </blockquote>

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

 

<strong> ~ </strong>

중요한 내용을 강조할 때 사용 (의미적 관점)

 

<b> ~ </b>

단순히 글자만 굵게 표시할때 사용 (시각적 관점)

 

<em> ~ </em>

글자 기울게 (흐름 상 특정 부분을 특별히 강조할 때)

 

<i> ~ </i>

글자 기울게 (마음속의 생각이나 용어, 관용구 쓸 때 사용)

 

<abbr> ~ </abbr>

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

*<abbr title="Internet of things">TOT</abbr>

 

<cite> ~ </cite>

참고 내용 표시

*<p> 명언 <cite>영화</cite> 중</p>

 

<code> ~ </code>

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

 

<small> ~ </small>

부가 정보처럼 작게 표시

 

_~

아래 첨자

*<p>물의 화학식은 H₂0 입니다.</p>

 

^~

위 첨자

 

<s>

취소선 표시

 

<u>

밑줄 표시

 

<ins>

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

 

<del>

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

 

 

 

 

<목록 태그>

 

<ol> ~ </ol>

<il> ~ </il>

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

*type과 start 를 지정해서 사용 가능

*<ol type="a" start="3"> 알파벳으로 순서 표시, c부터 시작

*type ="1" 숫자

"a" 소문자

"A" 대문자

"i" 로마 소문자

"I" 로마 대문자

 

<ol reversed> ~ </ol>

순서를 역방향으로 표시할 때 사용

 

<ul> ~ </ul>

<li> ~ </li>

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

*항목 앞 불릿 변경 가능

*<ul type="square"> ~ </ul>

*<ul type="circle"> ~ </ul>

 

<dl> ~ </dl>

<dt> ~ </dt>

<dd> ~ </dd>

설명 목록을 만들 때 사용

*<dl> 안에 <dt> 이름 <dd> 설명 을 넣음

* <dt> 하나에 <dd> 여러개 가능

 

 

 

 

<표 태그>

 

<table> ~ </table>

<caption> ~ </caption>

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

*<table>^<caption>먹고 싶은 음식</caption>^</table>

 

<colgroup> ~ </colgroup>

<col> 닫x

열을 묶어주는 태그

*반드시 <caption> 태그 다음에 사용

*<colgroup>^<col style="background-color:#eee;">^<col>^<col span="2" style="width:150px;">^</colgroup>

 

<col span>

속성이 같은 <col> 태그를 묶어주는 태그

 

<tr> ~ </tr>

행을 만드는 태그

 

<td> ~ </td>

셀을 만드는 태그

 

<th> ~ </th>

글자가 진하게 표시, 셀 중앙에 배열

*<table>^<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>

 

<thead> ~ </thead>

<tbody> ~ </tbody>

<tfoot> ~ </tfoot>

표의 구조를 지정하는 태그

*화면에선 보이지 않지만 js에선 읽을 수 있음

 

<rowspan>

행을 합칠 때 사용 하는 태그

*<td rowspan ="2(합칠 셀의 개수)">합치길 원하는 겹치는 내용</td>

 

<colspan>

열을 합칠 때 사용 하는 태그

*<td colspan="2(합칠 셀의 개수)">합치길 원하는 겹치는 내용</td>

 

 

 

 

<이미지 태그>

 

<img>

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

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

*<src> 사용 시 문서 파일과 같은 파일에 있다면 "이미지.jpg" 

문서 파일의 하위 파일에 있다면 "폴더 이름/이미지.jpg"

*내용 전달이 필요 없는 이미지에는 <alt="">

 

<img height="150">

<img width="50%">

이미지의 너비와 높이를 설정할 때 쓰는 태그

*px은 생략, %는 표시

 

 

 

 

<오디오와 비디오 태그>

 

<object> ~ </object>

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

*<data> 태그로 파일의 경로 표시

<object data="파일.pdf"> ~ </object>

*<object width="너비 height="높이" data="파일.pdf">^</object>

 

<embed>

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

*<embed src="" width="" height="">

 

<audio> ~ </audio>

<video> ~ </video>

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

*<src=""> <width="" height=""> 함께 사용

*<controls> 플레이어에 컨트롤 바를 표시

<autoplay> 자동 재생

<loop> 반복 재생

<muted> 소리 제거

<preload> 로딩방식 지정 (="auto", ="metadata", ="none")

<poster="파일 이름"> 재생되기 전까지 표시할 이미지 지정 (비디오 전용)

 

 

 

 

<하이퍼링크 태그>

 

 

<a href="링크 할 주소">텍스트 또는 이미지</a>

하이퍼 링크를 삽입 (기본형)

*<a href="링크 할 주소" target="_blank">텍스트 또는 이미지</a>

새 탭으로 링크 열기