Web

2. Html 태그종류 (문단, 제목, 서식, 목록, 이미지)

muru_ 2024. 4. 3. 16:27

1. 첫 사이트 만들기

<html>
	<head>
		<title> 최초의 내 사이트 </title>
	</head>
	<body>
	최초의 내 사이트에 오신 걸 환영합니다!
	</body>
</html>

 

(결과)

2. 문단태그

! + Enter 로 기본 형식 만들고 시작 (이후로도 쭉)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문단태그</title>
</head>
<body>
    <p>문단을 만드는 태그</p>
    여기 수정 신기하네요 &nbsp;&nbsp;&nbsp;&nbsp; 아무리 띄워도 먹히지 않음 nbsp 써야함
    <p>문단을 만드는 태그</p>
    &lt;p&gt;<br>
    개행<br>개행<br>개행<br>
    <!-- 주석 -->
</body>
</html>

 

(결과)

3. 제목태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

 

(결과)

 

4. 서식태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>  <!-- emphasis -->
        <p>ins 태그는 <ins>중요한 글자</ins>를 표현</p>  <!-- insertion, u도 가능 underline --> 
        <p>del 태그는 <del>글자를 지운 것</del>처럼 표현</p>
        <p>sup 태그는 수식을 표현 : x<sup>2</sup>+y <sup>3</sup>=z</p> <!--superscript-->
        <p>sub 태그로 화학식을 표현 : H<sub>2</sub>O</p> <!--subscript-->
</body>
</html>

 

(결과)

 

5. 목록태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록태그</title>
</head>
<body>
    <h2>목록태그</h2>
    <!-- ul>li*3 -->
    <ul> <!-- 순서가 없음 unordered list -->
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ul>
    <hr> <!-- 수평선 -->
    
    <ol> <!-- 순서가 있음 ordered list -->
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ol>
    <hr>

    <!-- dl>dt+dd*3 -->
    <dl>
        <dt>류정원 선생님</dt>
        <dd>김사과</dd>
        <dd>오렌지</dd>
        <dd>반하나</dd> 
    </dl>


</body>
</html>

 

(결과)

 

6. 이미지태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 태그</title>
</head>
<body>
    <h2>이미지 태그</h2>
    <img src="https://www.iconfinder.com/static/img/logo/black_small.svg?eb4fe0853e" alt="로고">
    <img src="/Users/muru/Documents/web/day1" alt="고양이">
    <!-- 사용하지 않음 -->
    <hr>
    <img src="./cat.png" alt="고양이">              <!-- 현재폴더 -->
    <img src="./img/dog1.png" alt="강아지">         <!-- 하위폴더(img폴더) -->
    <img src="./../dog2.png" alt="강아지2">         <!-- 상위폴더 -->
    <img src="./../images/dog3.png" alt="강아지3">  <!-- 상위폴더의 images폴더 -->
</body>
</html>

 

(결과)