HTML／CSS／JS

[HTML5] 01.글자태그 (h1,a href)

DEV장화 2022. 10. 13. 10:57

728x90

ㄱ. 제목

</head>
    <title>
        HTML5 + CSS3 Text
    </title>
<body>
    <h1>제목글자태그1</h1>
    <h2>제목글자태그2</h2>
    <h3>제목글자태그3</h3>
    <h4>제목글자태그4</h4>
    <h5>제목글자태그5</h5>
    <h6>제목글자태그6</h6>
</body>
</html>

HTML5 + CSS3 Text

제목글자태그1

제목글자태그2

제목글자태그3

제목글자태그4

제목글자태그5

제목글자태그6

ㄴ. 본문단락

</head>
    <title>
        HTML TEXT Basic Page
    </title>
<body>
    <h1>제목 글자</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati temporibus, minus maiores, consequatur dolores accusantium rem fugiat delectus magni eos, doloremque consectetur tempora minima laboriosam est nobis laudantium repellendus aliquam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati temporibus, minus maiores, consequatur dolores accusantium rem fugiat delectus magni eos, doloremque consectetur tempora minima laboriosam est nobis laudantium repellendus aliquam?</p>
</body>
</html>

HTML TEXT Basic Page

제목 글자

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati temporibus, minus maiores, consequatur dolores accusantium rem fugiat delectus magni eos, doloremque consectetur tempora minima laboriosam est nobis laudantium repellendus aliquam?

ㄷ.다양한 글자 모양

</head>
<title>
    HTML TEXT Basic Page
</title>
<body>
    <h1><b>Lorem ipsum dolor sit amet</b></h1>
    <h1><i>Lorem ipsum dolor sit amet</i></h1>
    <h1><small>Lorem ipsum dolor sit amet</small></h1>
    <h1>Lorem ipsum dolor sit amet</sub></h1>
    <h1>Lorem ipsum dolor sit amet</sup></h1>
    <h1><ins>Lorem ipsum dolor sit amet</ins></h1>
    <h1><del>Lorem ipsum dolor sit amet</del></h1>
</body>
</html>

HTML TEXT Basic Page

Lorem ipsum dolor sit amet

Lorem ipsum dolor _{sit amet}

Lorem ipsum dolor ^{sit amet}

Lorem ipsum dolor sit amet

ㄹ.특수문자 (공백,<,>,&)

특수문자	출력문자
	공백
&It;	<
>	>
&	&

ㅁ.앵커태그

- 다른 웹페이지 or 웹페이지 내부로 이동할 때 사용

- a 누르면 자동완성

ex) 다른 웹페이지로 이동

<a href="https://devjanghwa.tistory.com/">Dev 장화의 블로그</a>

Dev 장화의 블로그

ex) 웹 페이지 내부로 이동

: 내부로 이동할때는 앞에 #을 붙임

</head>
    <title>
        HTML TEXT Basic Page
    </title>
<body>
    <a href="#alpha">Alpha로 이동</a>
    <a href="#beta">Beta로 이동</a>
    <a href="gamma">Gamma로 이동</a>
    <hr>
    <h1 id="alpha">Alpha</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus ad obcaecati soluta maiores, repudiandae quidem accusamus itaque incidunt perspiciatis, distinctio quaerat eos ipsa doloremque expedita culpa dignissimos sint magni totam.</p>
    <h1 id="beta">Beta</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus ad obcaecati soluta maiores, repudiandae quidem accusamus itaque incidunt perspiciatis, distinctio quaerat eos ipsa doloremque expedita culpa dignissimos sint magni totam.</p>
    <h1 id="gamma">Gamma</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus ad obcaecati soluta maiores, repudiandae quidem accusamus itaque incidunt perspiciatis, distinctio quaerat eos ipsa doloremque expedita culpa dignissimos sint magni totam.</p>
    
</body>
</html>

HTML TEXT Basic Page Alpha로 이동 Beta로 이동 Gamma로 이동

Alpha

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus ad obcaecati soluta maiores, repudiandae quidem accusamus itaque incidunt perspiciatis, distinctio quaerat eos ipsa doloremque expedita culpa dignissimos sint magni totam.

Beta

Gamma

728x90