본문 바로가기
개발/HTML,CSS

23.03.23 HTML 태그(특수, 문단, 제목, 서식, 목록)

by 상달군 2023. 3. 23.
728x90

목차

1. HTML의 태그 

  • 특수 태그 
  • 문단 태그
  • 제목 태그
  • 서식 태그
    • 웹의 표준 
    • 웹의 접근성
  • 목록 태그 

 

1. HTML의 태그 

특수 태그

  • '<' :  &lt;         '>' :  &gt;
  • 띄어쓰기 : &nbsp;
  • 줄바꿈 : <br> </br>
  • 주석 : <!--    --> 한줄 또는 여러줄 모두 가능 
     

 

1-1.문단 태그

    <p>  ..... </p>

  • 문단을 나타내는 태그 
  • 블록 태그 (한줄을 전체 다 사용하는것 한블록!)
<html>
    <head>
            <title>문단 태그</title>

    </head>
    <body>
        <p>1. 문단 태그 </p>
        <p>문단을 만드는 태그</p>
    </body>
</html>

 

1-2.제목 태그

 

    <h1>   .....  <h1>

  • h1 ~ h6 까지 크기를 가지고 있음
  • 블록 태그
  • 검색엔진에서 제목으로 표현된다. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목 태그</title>
</head>
<body>

    <h1>안녕하세요. 제목태그 h1</h1>
    <h2>안녕하세요. 제목태그 h2</h2>
    <h3>안녕하세요. 제목태그 h3</h3>
    <h4>안녕하세요. 제목태그 h4</h4>
    <h5>안녕하세요. 제목태그 h5</h5>
    <h6>안녕하세요. 제목태그 h6</h6>

</body>
</html>

1-3.서식 태그

  • 글자를 꾸며주는 태그
    • <b> : 텍스트를 굵게 표현
    • <strong> : 텍스트를 굵게 표현, 리더기(오디오)에서 거쎈 발음으로 읽어준다
    • <i> : 텍스트를 이탤릭체로 표현
    • <em> : 텍스트를 이탤릭체 표현, 리더기(오디오)에서 거쎈 발음으로 읽어준다
    • <ins> : 태그를 사용하면 중요한 글자에 밑줄을 그려 표현합니다.
    • <sup> : 태그를 사용해서 수식을 표현 (윗첨자)
    • <sub> : 태그를 사용해서 화학식을 표현 (아래첨자)
  • 웹 표준
    • 웹에서 표준적으로 사용되는 기술이나 규칙
    • W3C가 권고한 표준안에 따라 웹사이트를 작성할때 이용하는 HTML, CSS, JavaScript등에 대한 규정 
  • 웹 접근성
    • 장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장 하는것을 말한다. 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>서식 태그</title>
    </head>
    <body>

        <h2>서식 태그</h2>
        <p>b 태그는 단순히 글자가 <b>굵게</b> 표현 됩니다. </p>
        <p>strong 태그는 중요한 글자를 <strong>굵게</strong> 표현 합니다.</p>
        <p>i 태그는 단순히 글자를 <i>이탤릭체</i>로 표현합니다. </p>
        <p>em 태그는 중요한 글자를 <em>이탤릭체</em>로 표현합니다. </p>
        <p>del 태그는 글자를 <del>지운</del> 것처럼 표현합니다. </p>
        <p>ins 태그를 사용하면 중요한 글자에 <ins>밑줄</ins>을 그려 표현합니다. </p>
        <p>sup 태그를 사용해서 수식을 표현: X<sup>2</sup> + Y<sup>3</sup> = z </p>
        <p>sub 태그를 사용해서 화학시을 표현: H<sub>2</sub>O </p>

    </body>
</html>

1-4.목록 태그

  • <ul> : 순서가 없는 목록 태그, 블록태그
  • <ol> : 순서가 있는 목록 태그, 블록태그
  • <hr> : 구분선
  • <dl> : 정의 목록 태그, 블록태그 [ <dt> : 왼쪽에 붙히기 <dd> : 들여쓰기 ]
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h2>목록 태그</h2>
        <ul>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ul>

        <hr>

        <ol>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ol>

        <hr>

        <dl>
            <dt>류정원 선생님</dt>
                <dd>김사과 학생</dd>
                <dd>오렌지 학생</dd>
                <dd>반하나 학생</dd>
        </dl>
    </body>
</html>

728x90

'개발 > HTML,CSS' 카테고리의 다른 글

2023.03.27 HTML 디스플레이  (0) 2023.03.27
23.03.24 HTML의 호스팅, 닷홈, FTP  (0) 2023.03.24
23.03.24 HTML하이퍼링크, 책갈피, 테이블,아이프레임,타겟,폼,인풋,라벨, 선택상자, 텍스트상자  (1) 2023.03.24
23.03.23 HTML 이미지태그  (3) 2023.03.23
23.03.23 HTML설명  (0) 2023.03.23

관련글

댓글

티스토리툴바