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 단락, 링크, 이미지
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 태그 목록
