본문 바로가기
  • Coding & Book
학습단/HTML+CSS+Javascript 학습단

3장 실무에서 자주 사용하는 HTML 필수 태그 다루기

by 루이3 2023. 3. 8.

공부할내용(60~81쪽)

 

1. hn 태그(n은 숫자)

h는 heading을 나타내며 제목이나 주제를 나타낼때 많이 사용한다.

<!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>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>   
</body>
</html>

 

 

2. p 태그

태그는 본문의 문단을 작성할때 사용하며  본문에 많이 사용한다.

<!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>
    <p>paragraph는 문단의 약자입니다</p>
</body>
</html>

 

 

3. br 태그

줄바꿈 할때 사용한다.

<!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>
    <p>br은 <br> 줄바꿈에 사용합니다.</p>
</body>
</html>

4. blockquote 태그

출처에서 인용한 문단단위의 텍스트를 작성할때 사용한다.

<!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>
   <blockquote cite="https://cafe.naver.com/gilbutitbook">
    <p>인용 인용 인용~</p>
   </blockquote>
</body>
</html>

 

5. q태그

문단안에 텍스트 단위의 짧은 인용문을 작성할때 사용한다.

<!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>
   <q cite="https://cafe.naver.com/gilbutitbook">
    <p>짧은 인용 인용~</p>
   </q>
</body>
</html>

 

6. ins 태그와 del 태그

ins 태그는 추가된 텍스트를 나타낼때 del 태그는 삭제된 텍스트임을 나타낼때 사용한다.

<!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>
    <ins>추가</ins>
    <del>삭제</del>
</body>
</html>

 

7. sub태그와 sup태그

sub 태그는 아래첨자 sup태그는 위첨자를 나타낼때 사용한다.

<!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>
    <p>이산화탄소의 원소기호는 CO<sub>2</sub></p>
    <p>3<sup>2</sup>=9</p>
</body>
</html>

8. div 태그와 span 태그

div태그는 블록요소와 인라인요소를 그룹으로 묶을때

span태그는 인라인요소를 그룹으로 묶을때 사용한다.

<!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>
   <div>d</div>
   <div>i</div>
   <div>v</div>
   <div>태</div>
   <div>그</div>
   
   <span>s</span>
   <span>p</span>
   <span>a</span>
   <span>n</span>
   <span>태</span>
   <span>그</span>
</body>
</html>

9. 목록 태그(ul, ol, dl)

ul 태그는 순서가 없이 동그라미로 목록을 만들때 사용한다.

ol태그는 순서가 있는 숫자로 목록을 만들때 사용한다.

dl태그는 정의형 목록을 만들 때 사용한다.

<!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>
    <h1>코드</h1>
    <ul>
        <li>python</li>
        <li>c</li>
        <li>Java</li>
        <li>c++</li>
    </ul>

    <h1>일차</h1>
    <ol>
        <li>hello,html</li>
        <li>문서 작성 기본 내용</li>
        <li>실무에서 자주쓰는 html 태그</li>
    </ol>

    <h1>태그</h1>
    <dl>
        <dt>sub 태그</dt>
        <dd>아래첨자</dd>
        <dt>sup태그</dt>
        <dd>위첨자</dd>
    </dl>
</body>
</html>

10. a태그와 img태그

a태그는 HTML에서 내부나 외부링크를 생성할때 사용한다.(예시로 하이퍼링크가 있다.)

img태그는 이미지를 삽입할때 사용하고  설명추가는 alt로 한다.

<!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>
    <a href="외부링크">제목</a>
    <img src="./image.jpg" alt="이미지">
</body>
</html>

 

11. strong태그와 em태그

strong태그는 텍스트를 굵게 표시하여 의미를 강조할때 사용한다.

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>Document</title>
</head>
<body>
   <strong>오늘 3일차를 완료 했다!</strong> <br>
   <em>4일차를 향해 나아가자!</em>
</body>
</html>

'학습단 > HTML+CSS+Javascript 학습단' 카테고리의 다른 글

5장 css 필수 속성 다루기  (0) 2023.03.11
4장 CSS 선택자 다루기  (0) 2023.03.10
3-2장 실무에서 자주 사용하는 HTML 필수 태그 다루기  (0) 2023.03.09
2장 HTML 문서 작성을 위한 기본 내용 살펴보기  (0) 2023.03.07
1장 Hello, HTML + CSS + 자바스크립트 (~44p)  (0) 2023.03.06

관련글

티스토리툴바