웹 프로그래밍(Web Programing)/HTML & CSS

[HTML] HTML 요소 : 텍스트

송기동 2025. 3. 20. 18:28
728x90

# br

- 줄을 바꾸는 요소(태그)

- 엔터키와 같은 기능

- 종료태그 </br> 없이 사용

<body>
안녕하세요

이렇게 작성하면


줄 바꿈이 되나요?
</body>
안녕하세요 이렇게 작성하면 줄 바꿈이 되나요?

 

<body>
아니요 </br>
</br>
이렇게 작성해야</br>
</br>
</br>
줄 바꿈이 돼요</br>
</body>
아니요

이렇게 작성해야


줄 바꿈이 돼요

# p

- 문단을 나누어 독립된 단락을 생성

- 단락 구분을 위해 단락 전후에 빈 줄이 자동으로 추가

<body>
위 코드로 작성된 실제 HTML 문서입니다.
단락을 생성해볼까요?
<p>p 요소를 사용했습니다.</p>
p요소를 여러번 사용해도 의미는 없습니다.
</body>
위 코드로 작성된 실제 HTML 문서입니다. 단락을 생성해볼까요?

p 요소를 사용했습니다.

p요소를 여러번 사용해도 의미는 없습니다.

# hr

- 텍스트 사이에 수평선을 그림

- 주제가 변경되는 콘텐츠를 구분하는 용도

- 자동 줄바꿈, 종료태그 없이 사용

<body>
<hr/>
hr 요소는 수평선을 그릴 때 사용합니다.
<hr/>
자동 줄바꿈이 되고 닫는 태그가 필요없습니다.
<hr/>
</body>
hr 요소는 수평선을 그릴 때 사용합니다.
자동 줄바꿈이 되고 닫는 태그가 필요없습니다.

# h(n)

- 단락의 제목을 지정하는 요소(태그)

- 제목 크기 : h1 > h2 > h3 > h4 > h5 > h6

- 굵은 글자(볼드체), 자동 줄바꿈

<body>
<h1>h1 입니다</h1>
<h2>h2 입니다</h2>
<h3>h3 입니다</h3>
<h4>h4 입니다</h4>
<h5>h5 입니다</h5>
<h6>h6 입니다</h6>
</body>

h1 입니다

h2 입니다

h3 입니다

h4 입니다

h5 입니다
h6 입니다

# pre

- 텍스트를 자유롭게 표시하는 요소(태그)

- 편집기에서 문자가 입력된 형태를 그대로 유지

<body>
<pre>
<b>pre 는 preformatted text 의 약자</b>
pre 요소는 메모장같이 
pre 안 공간에서 자유롭게   공백 줄바꿈
다 가능!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !
---  #
@!@!@
특수문자 많은 텍스트를 표시할 때 좋다.......
텍스트는 고정 폭, 행의 길이가 브라우저 폭보다 길어져도 자동 줄바꿈이 안됑ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ
</pre>
</body>
pre 는 preformatted text 의 약자
pre 요소는 메모장같이 
pre 안 공간에서 자유롭게   공백 줄바꿈
다 가능!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !
---  #
@!@!@
특수문자 많은 텍스트를 표시할 때 좋다.......
텍스트는 고정 폭, 행의 길이가 브라우저 폭보다 길어져도 자동 줄바꿈이 안됑ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ

# blockquote

- 인용문을 작성하는 요소(태그)

- 상하 빈 줄로 구분되는 인용문 단락의 생성 및 들여쓰기

- cite 속성 : 인용된 부분의 URL 지정

<body>
blockquote 요소는
<blockquote cite="인용한 URL">
인용한 글 내용이 담김
이렇게 쓰는거 같다.
</blockquote>
</body/>
blockquote 요소는
인용한 글 내용이 담김 이렇게 쓰는거 같다.

# 공백 및 특수문자 사용 시

- 두 칸 이상의 연속된 공백, 예약어로 사용하는 문자(<,#,% ), 키보드로 직접 입력할 수 없는 문자를 입력하는 방법

- 유니코드를 사용한다.

- 각 문자마다 정해진 방식이 있다. 밑에 그림을 보자

<body>
<>을 쓰고싶으면 어떻게 하지? &lt;br&gt;</br>
&nbsp;&nbsp;공백문자 &amp;nbsp;</br>
특수문자는? &rarr; &#x2661; &copy;
</body>
<>을 쓰고싶으면 어떻게 하지? <br>
  공백문자 &nbsp;
특수문자는? → ♡ ©

# 글자 스타일 지정 요소 2가지

<body>
    <h1>HTML 물리적 스타일 태그</h1>

    <p><b>굵은 글씨입니다.</b> (b 태그)</p>
    <p><i>기울어진 글씨입니다.</i> (i 태그)</p>
    <p><u>밑줄 그어진 글씨입니다.</u> (u 태그)</p>
    <p><small>작은 글씨입니다.</small> (small 태그)</p>
    <p><s>취소선이 그어진 글씨입니다.</s> (s 태그)</p>
    <p><sub>아래 첨자입니다.</sub> (sub 태그)</p>
    <p><sup>위 첨자입니다.</sup> (sup 태그)</p>
</body>

HTML 물리적 스타일 태그

굵은 글씨입니다. (b 태그)

기울어진 글씨입니다. (i 태그)

밑줄 그어진 글씨입니다. (u 태그)

작은 글씨입니다.

(small 태그)

취소선이 그어진 글씨입니다. (s 태그)

아래 첨자입니다. (sub 태그)

위 첨자입니다. (sup 태그)

 

 

<body>
<h1>HTML 논리적 스타일 태그</h1>

<strong>중요한 내용입니다.</strong> (strong 태그)<br/>
<em>강조하는 내용입니다.</em> (em 태그)<br/>
<mark>시각적/의미적으로 특정 문구/단어 강조</mark>(mark 태그)<br/>
<cite>책 제목이나 작품 이름</cite>을 나타냅니다. (cite 태그)<br/>
<dfn>정의되는 용어</dfn>를 나타냅니다. (dfn 태그)<br/>
<abbr title="HyperText Markup Language">HTML</abbr>축약형을 표시 (abbr 태그)<br/>
<code>컴퓨터 코드</code>을 나타냅니다. (code 태그)<br/>
<kbd>사용자가 입력하는 키</kbd>입니다. (kbd 태그)<br/>
<samp>프로그램의 출력</samp>을 나타냅니다. (samp 태그)<br/>
<var>수학/프로그래밍 변수</var>입니다. (var 태그)<br/>
<q>짧은 인용구입니다.</q> (q 태그)<br/>
<address>
        주소를 표시<br>
        부산시 연제구<br>
        email@example.com
</address> (address 태그)
</body>

HTML 논리적 스타일 태그

중요한 내용입니다. (strong 태그)
강조하는 내용입니다. (em 태그)
시각적/의미적으로 특정 문구/단어 강조(mark 태그)
책 제목이나 작품 이름을 나타냅니다. (cite 태그)
정의되는 용어를 나타냅니다. (dfn 태그)
HTML축약형을 표시 (abbr 태그)
컴퓨터 코드을 나타냅니다. (code 태그)
사용자가 입력하는 키입니다. (kbd 태그)
프로그램의 출력을 나타냅니다. (samp 태그)
수학/프로그래밍 변수입니다. (var 태그)
짧은 인용구입니다. (q 태그)
주소를 표시
부산시 연제구
email@example.com
(address 태그)

# 블록 요소 

- 한 줄 전체를 차지하며, 자동으로 줄 바꿈이 발생함

- 주로 섹션을 구분하거나 구조적인 역할을 함

- 내부에 다른 블록 요소나 인라인 요소를 포함할 수 있음

- ex) <div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer> 등

# 인라인 요소 

- 콘텐츠의 크기만큼만 차지하며 줄 바꿈이 발생하지 않음

- 텍스트의 일부를 꾸미거나 링크 등을 삽입하는 역할을 함

- 내부에 다른 인라인 요소만 포함할 수 있고, 블록 요소는 포함할 수 없음

- ex) <span>, <a>, <strong>, <em>, <b>, <i>, <img>, <code>, <mark> 등

<html>
    <style>
        /* 블록 요소 css */
        .block {
            background-color: lightblue;
        }

        /* 인라인 요소 css */
        .inline {
            color: red;
            font-weight: bold;
        }
    </style>
<body>

    <!-- div (블록 요소) -->
    <div class="block">이것은 div 요소입니다. (블록 요소)</div>
    <div class="block">div는 한 줄 전체를 차지하며, 줄 바꿈이 자동으로 발생합니다.</div>

    <!-- span (인라인 요소) -->
    <p>이 문장에서 <span class="inline">이 부분</span>은 span 요소입니다.</p>
    <p><span class="inline">span은 줄 바꿈 없이</span> 같은 줄에서 유지됩니다.</p>

</body>
</html>
이것은 div 요소입니다. (블록 요소)
div는 한 줄 전체를 차지하며, 줄 바꿈이 자동으로 발생합니다.

이 문장에서 이 부분은 span 요소입니다.

span은 줄 바꿈 없이 같은 줄에서 유지됩니다.

728x90
댓글수0