티스토리 뷰

Programming/HTML

HTML #3 : <p> 태그, <h#>태그, 기본 태그

copotter 2019. 4. 26. 20:14

190423


HTML의 태그 중, <p>태그, <h#>태그, 

기본 태그( <br>, <hr>, <blockquote> )에 대해서 알아보겠습니다.


<h#>태그


: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그.

: 헤드역할을 하는 글자를 크기별로(h1~h6) 나눠주는 태그이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="kor">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
        <h1> ~ <h6>
        문서의 제목을 포함하는 태그
    -->
    <h1>HTML의 이해</h1>
    <h2>HTML 기본</h2>
    <h3>HTML 태그</h3>
    
    <h4>HTML 텍스트 관련 태그</h4>
    <h5>제목 태그</h5>
    <h5>본문 태그</h5>
    
    <h4>HTML 폼 관련 태그</h4>
</body>
</html>
cs

>>>>>>     실행결과    >>>>>>>>>


<p>태그, <br>태그, <hr>태그, <blockquote>태그



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>html 태그 연습</h1>
    <h2>단락 만들기</h2>
    
    <!--
        p태그는 텍스트의 내용을 담는 태그이다.
    -->
    <p>
        지난 18일 출시된 '트라하'는 첫 주말에 순위를 급상승시켜 22일 현재 구글 플레이 최고 매출 4위까지 올랐으며, 
무료 앱 인기순위에서도 1위를 기록 중이다. 이와 함께 애플 앱스토어에서는 게임 부문 최고 매출 3위를 기록하고 있다.
    </p>
    <p>
        '트라하'는 넥슨이 상반기 최고 기대작으로 밀어붙이고 있는 모바일 MMORPG 대작으로, 
출시 전 420만 명 이상 사전예약자를 모집하고 사전 캐릭터 생성 서버 50개가 모두 마감되는 등 시장 기대감을 입증했다.
    </p>
    <!--
        br태그는 줄바꿈태그이다.
    -->
    <p>
        '트라하'는 넥슨이 상반기 최고 기대작으로 밀어붙이고 있는 모바일 MMORPG 대작으로,<br /> 
출시 전 420만 명 이상 사전예약자를 모집하고 사전 캐릭터 생성 서버 50개가 모두 마감되는 등 시장 기대감을 입증했다.
    </p>
    <!--
        hr 태그는 단락의 주제가 바뀔 때 사용한다.
    -->
    <hr />
    
    <p>
        '트라하'는 넥슨이 상반기 최고 기대작으로 밀어붙이고 있는 모바일 MMORPG 대작으로, 
출시 전 420만 명 이상 사전예약자를 모집하고 사전 캐릭터 생성 서버 50개가 모두 마감되는 등 시장 기대감을 입증했다.
    </p>
    <!--
        blockquote태그는 인용문을 만든다.
    -->
    <blockquote>
        '트라하'는 넥슨이 상반기 최고 기대작으로 밀어붙이고 있는 모바일 MMORPG 대작으로, 
출시 전 420만 명 이상 사전예약자를 모집하고 사전 캐릭터 생성 서버 50개가 모두 마감되는 등 시장 기대감을 입증했다.
    </blockquote>
</body>
</html>

cs

>>    <p>, <hr>, <br>, <blockquote> 태그의 설명과 사용 예제







<<< 위 소스의 실행결과 화면



1. 실행 결과와 소스를 비교하면 알 수 있듯이,

단락을 사용할때 쓰는 <p>태그,



2. 줄을 바꿀때 쓰는 <br>태그,

(소스내에서 글의 줄을 아무리 바꿔도 줄바뀜 되지않고, <br>태그를 사용해야 웹에서 줄이 바뀌게 된다.)



3. 주제가 바뀔때 쓰는 (줄을 넣어주는 ) <hr>태그,



4. 맨 밑에 가운데에 넣어서 인용문구처럼 보여주는

<blockquote>태그가 있다.






저작자표시 (새창열림)

'Programming > HTML' 카테고리의 다른 글

HTML #6 : <link> 태그  (0) 2019.05.01
HTML #5 : <img>태그  (0) 2019.04.26
HTML #4 : <li>태그, <ul>태그, <ol>태그, <table>태그  (0) 2019.04.26
HTML #2 : HTML의 기초  (1) 2019.04.25
HTML #1 : Brackets(브라켓) 설치 및 emmet 설정  (0) 2019.04.25
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함