본문 바로가기
Web/HTML

[HTML] HTML의 태그 종류에 대해 알아보자🧐

by coding-choonsik 2023. 3. 24.
728x90
반응형
SMALL

1. HTML의 특수 태그

  • < : &lt;
  • > : &gt;
  • 띄어쓰기 : &nbsp;

 

2. 줄바꿈 태그

  • <br> </br>  두 개가 같음
<br> 라이브 서버 확인해보기 🍀<br>

3. 주석

  • <!-- --> : 한줄 또는 여러줄 주석
  • 페이지 소스보기에는 출력되므로 중요한 정보는 적지 않는 것이 좋음!

페이지 소스보기에서 주석글이 보임

4.문단 태그 

  •  <p> ~ </p>
  • 문단을 나타내는 태그
  • 블록 태그
  • 한 줄을 모두 차지함

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

 

한 줄을 모두 차지

5. 제목 태그 

  • <h> ~ </h>
  •  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>

 

 

6. 서식 태그 

  • 글자를 꾸며주는 태그 
  • <b> : 텍스트를 굵게 표현
  • <strong> : 텍스트를 굵게 표현, 리더기에서 거쎈 발음
  • <i> : 텍스트를 이탈릭체로 표현
  • <em> : 텍스트를 이탈릭체로 표현, 리더기에서 거쎈 발음

     
<!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>sub 태그를 사용해서 수식을 표현: x<sup>2</sup> + y<sup>3</sup> = z</p>
    <p>sub 태그를 사용해서 화학식을 표현: H<sub>2</sub>O</p>
</body>
</html>

 

7. 목록 태그

  •  <ul> : 순서가 없는 목록 태그, 블록태그

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


emmet: ul>li*3

 

  • <ol> : 순서가 있는 목록 태그, 블록 태그

    1. 김사과
    2. 오렌지
    3. 반하나

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


emmet: ol>li*3

 

  • <dl> : 정의 목록 태그, 블록 태그

류정원 선생님
    김사과 학생
    오렌지 학생
    반하나 학생
체에리 선생님
    베애리 학생
    이메론 학생

   

<dl>
    <dt>류정원 선생님</dt>
    <dd>김사과 학생</dd>
    <dd>오렌지 학생</dd>
    <dd>반하나 학생</dd>
    <dt>체에리 선생님</dt>
    <dd>베애리 학생</dd>
    <dd>이메론 학생</dd>
</dl>


emmet: dl>dt+dd*3

8. 이미지 태그

  • 이미지를 브라우저에 출력
  •  인라인 태그(컨텐츠 크기 만큼만 영역을 사용)  - 띄어쓰기 태그 없으면 옆으로 붙음
  • 이미지 형식 알아보기⬇⬇⬇

 

 

<!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>
    <img src="./images/cat1.png" alt="고양이1 이미지">
    <img src="./../cat2.png" alt="고양이2 이미지">
    <img src="../cat/cat3.png" alt="고양이3 이미지">
    <img src="cat4.png" alt="고양이4 이미지">
    <img src="cat5.png" alt="고양이5 이미지">

    <img src = 'https://pbs.twimg.com/media/FDrbcNMaQAELMWe?format=jpg&name=large', alt="동글이 이미지">
    <img src="C:\yesung\HTML\Day1\cat1.png" alt="고양이5 이미지">
</body>
</html>

(트위터 동글이계정의 동글이사진을 넣어봤다.)

 

이미지 경로 설정 알아보기 ⬇⬇⬇

 

 

 

728x90
반응형
LIST

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

[HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기  (0) 2023.03.27
[HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기!  (0) 2023.03.24
[HTML] 파일 경로 작성하는법(절대경로와 상대경로)  (0) 2023.03.24
[HTML] 이미지 형식의 종류를 알아보자🧐  (0) 2023.03.24
[HTML] HTML이란? & HTML 문서 만들기, HTML 스켈레톤  (0) 2023.03.23

관련글

티스토리툴바