HTML Basics - PART 4 HTML 요소 총정리

2024. 4. 6. 18:00컴퓨터 전공 공부/웹 소프트웨어

반응형

PART 4 

HTML ELEMENTS

 

❖ HTML을 사용하여 간단한 웹 페이지를 구축하는 기본 요소는 다음과 같습니다

 

제목 만들기, 그림 삽입, 목록 만들기, 표 만들기, 텍스트 삽입, 하이퍼링크 만들기

 

❖<h1> to <h6> tags
 ▪ 제목에만 HTML 제목 사용
 • 제목을 사용하여 텍스트를 크게 또는 굵게 만들지 않음

 

❖<p> 태그
 ▪ 단락을 정의합니다
 ▪ 문단 앞과 뒤에 빈 줄이 추가됩니다

▪  end 태그를 잊지 마세요.

▪ HTML 코드에서 Enter 키를 눌러 줄을 변경해도 웹 브라우저에서 줄이 변경되지 않습니다.

 

❖ <br> 태그
 ▪ 줄 바꿈을 정의합니다
• 새 단락을 시작하지 않고 줄 바꿈을 원하는 경우 사용합니다:

 

<body>
 <h1>Heading 1</h1>
 <p>
 My Bonnie lies over the ocean. <br>
 My Bonnie lies over the sea. <br>
 My Bonnie lies over the ocean. <br>
 Oh, bring back my Bonnie to me. <br>
 </p>
 </body>

 

<hr> 태그
 ▪ 수평선을 정의합니다
 • HTML 페이지에서 내용을 구분(또는 변경을 정의)하는 데 사용됩니다

 

<!DOCTYPE html>
 <html>
 <head>
 <title>My paragraph</title>
 </head>
 <body>
 <h1>Heading 1</h1>
 <hr>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
 </body>
 </html>

 

❖ Text formatting elements

 

<!DOCTYPE html>
 <html>
 <head>
 <title>My paragraph</title>
 </head>
 <body>
 <p><sub>subscript</sub> and <sup>superscript</sup></p>
 <p><b>This text is bold</b></p>
 <p><strong>This text is strong</strong></p>
 <p><i>This text is italic</i></p>
 <p><em>This text is emphasized</em></p>
 <p><code>This text is code</code></p>
 </body>
 </html>

 

❖HTML Quotations

 

태그 설명
 <abbr> 약어 또는 약어를 정의합니다
 <address> 문서의 작성자/소유자 연락처를 정의합니다
 <bdo> 텍스트 방향을 정의합니다
 <block quote> 다른 출처에서 인용된 섹션을 정의합니다
 <cite> 작품의 제목을 정의합니다
 <q> 짧은 인라인 따옴표를 정의합니다

 

<!DOCTYPE html>
 <html>
 <head>
 <title>My paragraph</title>
 </head>

<body>
 <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
 <p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>
 <p>HTML's goal is to: <q>Build a structure of the website.</q>Study hard.</p>
 </body>
 </html>

❖ Special characters

 

❖HTML comments are not displayed in the browser

❖Syntax 

<!--<p> 아무 내용!!!~~~</p> -->

 

❖Used to list iteams

▪ Unordered list <ul>

- ordered list <ol>

 

❖ <a> tag

▪ Example of hyperlink

 <!DOCTYPE html>
 <html>
 <head>
 <title>My paragraph</title>
 </head>
 <body>
 <h1>Heading 1</h1>
 <p>This is a paragraph.</p>
 <a href="http://www.google.com">Google</a>
 </body>
 </html>

반응형