[HTML] 태그 모음

2022. 5. 19. 00:01

HTML 구조

- <html> 최상위 태그

- <head>, <body> 상위 태그

- <!DOCTYPE html> 은 해당 문서가 HTML 이라는 알려주는 주석 (관용적)

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
  </head>
  
  <body>
    
  </body>
  
</html>

열고(open) 쓴다(write contents). 그리고 닫는다(close).

<tag> contents </tag>

<strong> :: 굵게(Bold) 강조

<strong> for creating web pages </strong>

<u> :: 밑줄 긋기(underline)

<u> for creating web pages </u>

<h1> ~ <h6> :: 제목(header)

<h1> header </h1> header
<h2> header </h2> header
<h3> header </h3> header
<h4> header </h4> header
<h5> header </h5> header
<h6> header </h6> header

<br> :: 줄바꿈, 개행(enter)

- 열고 닫지 않음.

test<br>test1<br><br>test2

<p> :: 줄바꿈, 개행(enter)

- 열고 닫음.

<p>test test1 test 2</p><p>12345 abcdefg</p>

<img> :: 이미지 출력

- 출력하고자 하는 이미지의 경로와 파일 이름 입력. ("C:\Users\man\Pictures\fire.jpg")

- 이미지 크기 조절 (20%)

<img src="C:\Users\man\Pictures\fire.jpg" width="20%">

<li> :: 목차 또는 목록

- 말머리 같이 개조식으로 나타남.

<li>List 1</li>
<li>test 3</li>
<li>test 6</li>

<ul> :: 부모 태그

- Unordered List

- ul 에 속한 문장들을 부모 그룹으로 만듦

- ul 에 속한 문장들은 앞에 띄어쓰기가 쓰여짐.

<ul>
  <li>List 1</li>
  <li>test 3</li>
  <li>test 6</li>
</ul>
<li>List 1</li>
<li>test 3</li>

<ol> :: 부모 태그

- Ordered List

- ul 에 속한 문장들을 부모 그룹으로 만듦

- ul 에 속한 문장들을 자동으로 앞 문장에 숫자를 부여함.

<ol>
  <li>List 1</li>
  <li>test 3</li>
  <li>test 6</li>
</ol>
<li>List 1</li>
<li>test 3</li>

<title> :: 페이지 제목

<title>Input title</title>

<meta charset> :: 문자 인코딩 설정

- 글자가 깨지는 현상을 방지하고자 문자 인코딩을 설정함.

<meta charset="utf-8">

<a> :: 링크

- title 옵션은 "google homepage"에 마우스 커서를 올릴 경우 나타나는 툴팁. (add 표시)

<a href="http://www.google.com" title="add"> google homepage</a>

<iframe> :: HTML 웹 페이지 불러오기

- 다른 웹페이지를 불러 현재 작성된 웹페이지로 불러옴.

- 아래의 그림은 동영상 소스 코드를 가져와 다른 웹페이지 링크를 불러옴.

<iframe width="640" height="480" src="https://www.youtube.com/embed/Pk0tYY_qCYY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

감사합니다.

잘못된 정보나 오타 및 수정사항이 있을 경우 댓글로 달아주시면 감사하겠습니다.

'GUI > HTML & CSS' 카테고리의 다른 글

[HTML] 웹페이지 방문자 분석 기능 추가하기 (10step) (0)	2022.05.29
[HTML] 채팅 기능 추가하기 (10step) (0)	2022.05.29
[HTML] 댓글 기능 추가하기 (11step) (0)	2022.05.29
[HTML] 동영상 삽입하기 (0)	2022.05.29
[Atom] Atom Editor 사용방법 및 조작키 (updating) (0)	2022.05.27

Manbedded