YJWANG

1.HTML 자주 쓰는 태그 본문

99.Study/99-1.HTML

1.HTML 자주 쓰는 태그

왕영주 2021. 10. 21. 12:10

이전 포스팅에서는 HTML을 시작하기 위한 기본적인 내용 전체를 알아보았고. 이제 규약인 Tag 중 자주 쓰이는 Tag를 중심으로 알아보려합니다.

어쨌든 많이 써보고 찾아보고 활용해 보는 것이 익숙해지기 가장 빠른듯합니다.

제목 태그

word나 대부분의 text editor에 있는 제목을 표기합니다.

        <!-- 1번 제목 -->
        <h1> 1번 제목 </h1>
        <!-- 2번 제목 -->
        <h2> 2번 제목 </h2>
        <!-- 3번 제목 -->
        <h3> 3번 제목 </h3>
        <!-- 4번 제목 -->
        <h4> 4번 제목 </h4>
        <!-- 5번 제목 -->
        <h5> 5번 제목 </h5>
        <!-- 6번 제목 -->
        <h6> 6번 제목 </h6>

단락 및 줄 바꾸기 태그

단락 태그를 이용하면 단락 안에 있는 text 앞 뒤로 공백이 생겨 phrase를 구분할 수 있게됩니다.

또한 text를 editor 상에서 enter로 줄을 구분하여도 html에서는 줄이 구분되지 않습니다. <br> 태그를 이용하여 줄을 바꿔줍니다.

        <p>첫 번째 단락의 내용</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            <br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdddddddddddddd
            <br>dddddddddfasfasfsafas
        </p>
        <p>끝끝</p>

텍스트 강조, 기울이기, 밑줄, 취소

            <b>강조된 글자</b>
            <i>기울어진 글자</i>
            <u>밑줄이 있는 글자</u>
            <strike>취소된 글자</strike>

이미지첨부, 링크

        <img src="https://github.com/YoungjuWang/virt-go/blob/v2/img/virt-go2.png?raw=true">
        <br>
        <a href="https://github.com/YoungjuWang/virt-go">virt-go 바로가기</a>

전체 파일

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>1번 실습 페이지</title>
    </head>
    <body>
        <!-- 1번 제목 -->
        <h1> 1번 제목 </h1>
        <!-- 2번 제목 -->
        <h2> 2번 제목 </h2>
        <!-- 3번 제목 -->
        <h3> 3번 제목 </h3>
        <!-- 4번 제목 -->
        <h4> 4번 제목 </h4>
        <!-- 5번 제목 -->
        <h5> 5번 제목 </h5>
        <!-- 6번 제목 -->
        <h6> 6번 제목 </h6>

        <p>첫 번째 단락의 내용</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            <br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdddddddddddddd
            <br>dddddddddfasfasfsafas
        </p>
        <p>끝끝</p>

        <p>
            <b>강조된 글자</b>
            <i>기울어진 글자</i>
            <u>밑줄이 있는 글자</u>
            <strike>취소된 글자</strike>
        </p>

        <img src="https://github.com/YoungjuWang/virt-go/blob/v2/img/virt-go2.png?raw=true">
        <br>
        <a href="https://github.com/YoungjuWang/virt-go">virt-go 바로가기</a>
    </body>
</html>
반응형
저작자표시
'99.Study/99-1.HTML' Related Articles more