HTML-3

haechi·2021년 4월 1일

poiemaweb

목록 보기

4/13

210401

text tags

1.제목 (Headings)태그
제목을 나타낼 때 사용 크기순으로 h1~h6까지 있다.

   <h1>heading 1</h1>
   <h2>heading 2</h2>
   <h3>heading 3</h3>
   <h4>heading 4</h4>
   <h5>heading 5</h5>
   <h6>heading 6</h6>

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

2.글자 형태(Text Formatting)태그

2.1 b
bold체를 지정. Semantic(의미론적) 중요성의 의미는 없음
```
This text is normal.
This text is bold.
This text is bold.
```
This text is normal.
This text is bold.
This text is bold.
2.2 strong
b tag와 동일하게 bold체 지정. Semantic 중요성의 의미를 가진다.
웹표준을 준수하고자 하면 strong을 사용하는 것이 바람직
```
This text is strong.
```
This text is strong.
2.3 i
Italic체를 지정. Semantic 중요성의 의미는 없음
```
This text is italic.
This text is italic.
```
This text is italic.

This text is italic.
2.4 em
emphasized(강조, 중요)text를 지정. i tag와 동일하게 Italic체롤 표현. Semantic 중요성의 의미를 가진다.
```
This text is emphasized.
```
This text is emphasized.

2.5 small
small text 지정

<h2>HTML <small>Small</small> Formatting</h2>

HTML Small Formatting

2.6 mark
highlighted text 지정
```
<h2>HTML Marked Formatting</h2>
```
HTML Marked Formatting
2.7 del
deleted(removed) text 지정
```
My favorite color is <del>blue</del> red.
```
My favorite color is ~~blue~~ red.
2.8 ins
inserted(added) text 지정
```
My favorite <ins>color</ins> is red.
```
My favorite color is red.
2.9 sub/sup
sub - subscripted / sup - superscripted text 지정
```
This is subscripted text.
This is superscripted text.
```
This is subscripted text.

This is superscripted text.

3.본문 태그

3.1 p
단락(paragraphs) 지정

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3.2 br
br tag는 (강제)개행 (line break)을 지정. 빈 요소로 종료태그가 없다.

<p>This is<br>a para<br>graph with line breaks</p>

This is
a para
graph with line breaks

연속적 공백을 삽입하는 방법

<p>This is&nbsp; a para&nbsp; &nbsp; graph</p>

This is a para graph

3.3 pre
형식화된(preformatted) text를 지정한다. pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.

<pre>
var myArray = [];
console.log(myArray.length); // 0

myArray[1000] = true;  // [ , , ... , , true ]

console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined
    </pre>

var myArray = [];
console.log(myArray.length); // 0

myArray[1000] = true;  // [ , , ... , , true ]

console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined

3.4 hr
수평줄을 삽입한다.

<p>HTML is a language for describing web pages.</p>
    <hr>
    <h1>CSS</h1>
    <p>CSS defines how to display HTML elements.</p>

HTML is a language for describing web pages.

CSS

CSS defines how to display HTML elements.

- 3.5 q 짧은 인용문(quotation)을 지정. 브라우저는 인용부호(큰따옴표)로 q 요소를 감싼다. ```

WWF's goal is to: Build a future where people live in harmony with nature.

```

WWF's goal is to: Build a future where people live in harmony with nature.

3.6 blockquote
긴 인용문 블록 지정. 브라우저는 blockquote 요소를 들여쓰기한다.

<p>Browsers usually indent blockquote elements.</p>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </blockquote>

Browsers usually indent blockquote elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

이 내용을 바탕으로 연습해본 코드이다.

<!DOCTYPE html><!--!+tab을 하면 자동 양식이 생성된다.-->
<html lang="ko">
  <head><!--주석은 이렇게 사용-->
    <meta charset="utf-8">
    <title>practicing HTML</title>
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            background-color: black;
            color: white;
        }
    </style>
    <script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>
  </head>
  <body><!--&nbsp는 공백 한 칸-->
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <hr>
    <b>This text is bold.</b>
    <p>This text is normal.</p>
    <p style='font-weight: bold;'>This text is bold.(using style)</p>
    <strong>This text is strong.(semantic)</strong>
    <i>This text is italic.</i>
    <p style='font-style: italic;'>This text is italic.(using style)</p>
    <em>This text is emphasized.(semantic)</em>
    <hr>
    <h2>HTML <small>Small</small> Formatting</h2>
    <h2>HTML <mark>Marked</mark> Formatting</h2>
    <h2>HTML <mark style='background-color: brown;'>Marked</mark> Formatting(change background-color)</h2>
    <p>My favorite <del>color</del> is red</p>
    <p>My favorite color is <ins>red</ins></p>  
    <p>This is <sub>subscripted</sub> text.</p>
    <p>This is <sup>superscripted</sup> text.</p>
    <p>This is<br>a para<br>graph with line breaks</p>
    <p>This is&nbsp; a para&nbsp; &nbsp; graph<q>using &nbsp</q></p>
    <pre>
      #include<stdio.h>

      int main(){
        printf("Hello World!");

        return 0;
      }
      
    </pre>
    <p>Browsers usually indent blockquote elements.</p>
    <blockquote>this is blockquote. can you see this?</blockquote>
  </body>
</html>