HTML 기본 태그 정리

17097 단어 htmlhtml

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 테이블

Monthly savings
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

  1. Coffee
  2. Tea
  3. 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은 웹 페이지 내에 웹 페이지를 표시하는 데 사용된다.