HTML 기본 태그 정리
HTML은 Hyper Text Markup Language, 웹 페이지를 만들기위한 표준 마크 업 언어이다.
HTML 기본 태그를 정리 해 두었다.
1. HTML 기본
My First Heading
My first paragraph.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- 모든 HTML 문서는
<!DOCTYPE html>
으로 시작한다. - HTML 문서 자체는
<html>
로 시작하고</html>
로 끝난다. - HTML 문서에서 보이는 부분은
<body>
와</body>
사이에 들어있다.
2. HTML 제목
This is heading 1
This is heading 2
This is heading 3
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
- HTML 제목은
<h1>
to <h6>
태그 로 정의된다.
<h1>
가장 중요한 제목을, <h6>
가장 덜 중요한 제목을 정의한다.
3. HTML 단락, 링크, 이미지
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h1>
to <h6>
태그 로 정의된다. <h1>
가장 중요한 제목을, <h6>
가장 덜 중요한 제목을 정의한다.This is a paragraph.
This is a link<p>This is a paragraph.</p>
<a href="https://www.w3schools.com">This is a link</a>
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="Girl" width="104" height="142">
- HTML 단락은
<p>
태그 로 정의된다 . - HTML 링크는
<a>
태그 로 정의된다 .링크의 목적지는 href속성에 지정된다. - HTML 이미지는
<img>
태그 로 정의된다. 소스 파일 (src), 대체 텍스트 (alt) width, 및 height가 속성으로 제공된다.
4. HTML style
style
속성을 사용해서 HTML 요소에 스타일을 지정할 수 있다.
This is a heading
This is a paragraph.
<h1 style="color:blue; font-family:verdana; text-align:center;">This is a heading</h1>
<p style="background-color:powderblue;font-size:160%;">This is a paragraph.</p>
background-color
를 사용하여 배경 색상 지정color
를 사용하여 텍스트 색상 지정font-family
를 사용하여 텍스트 글꼴 지정font-size
를 사용하여 텍스트 크기 지정text-align
를 사용하여 텍스트 정렬
5. HTML 텍스트 서식
This text is bold
This text is italic
This is subscript and superscript
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<b>
- 굵은 텍스트<strong>
-중요한 텍스트<i>
-기울임 꼴 텍스트<em>
-강조된 텍스트<mark>
-표시된 텍스트<small>
-더 작은 텍스트<del>
-삭제 된 텍스트<ins>
-삽입 된 텍스트<sub>
-아래 첨자 텍스트<sup>
-위첨자 텍스트
6. HTML 테이블
Month | Savings |
---|---|
January | $100 |
February | $50 |
- HTML
<table>
요소를 사용하여 테이블 정의 - HTML
<tr>
요소를 사용하여 테이블 행 정의 - HTML
<td>
요소를 사용하여 테이블 데이터 정의 - HTML
<th>
요소를 사용하여 표 제목 정의 - HTML
<caption>
요소를 사용하여 테이블 캡션 정의 - CSS
border
속성을 사용하여 테두리 정의 - CSS
border-collapse
속성을 사용하여 셀 테두리 축소 - CSS
padding
속성을 사용하여 셀에 패딩 추가 - CSS
text-align
속성을 사용하여 셀 텍스트 정렬 - CSS
border-spacing
속성을 사용하여 셀 사이의 간격 설정 colspan
속성을 사용하여 셀 범위 넓히기rowspan
속성을 사용하여 열 범위 넓히기id
속성을 사용하여 하나의 테이블을 고유하게 정의
7. HTML 목록
An Unordered HTML List
- Coffee
- Tea
- Milk
An Ordered HTML List
- Coffee
- Tea
- Milk
<h4>An Unordered HTML List</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h4>An Ordered HTML List</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
- 정렬되지 않은 목록<ol>
- 정렬된 목록<li>
- 목록 항목<dl>
- 목록 설명<dt>
- 목록 설명에서 용어 정의<dd>
- 목록 설명에서 용어 설명
8. HTML Iframe
HTML iframe은 웹 페이지 내에 웹 페이지를 표시하는 데 사용된다.
<iframe src="https://velog.io/@sanna422/HTML-%EA%B8%B0%EB%B3%B8-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC" height="200" width="300" title="Iframe Example"></iframe>
- HTML
<iframe>
태그는 인라인 프레임을 지정합니다. src
속성은 삽입 할 페이지의 URL을 정의합니다.- 항상
title
속성 포함 (스크린 리더의 경우) height및 width
- 속성은 iframe의 크기를 지정합니다.border:none;
- iframe 주변의 테두리를 제거하는 데 사용 합니다.
그 외 HTML 태그를 보고 싶다면 아래 주소를 참조하면 좋을것 같다.
HTML 태그 목록
Author And Source
이 문제에 관하여(HTML 기본 태그 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sanna422/HTML-기본-태그-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)