[HTML&CSS] 1. HTML 태그들

Mar 07, 2025

Contents

1. <div></div>2. <span></span>3. <h1></h1>4. <img>5. <hr>6. <ul></ul> & <ol></ol> & <li></li>7. <a> & <input>8. 한칸 내리기 <br>9. 띄워쓰기 10. iframe 11. Table 태그들 총 정리

1. `<div></div>`

❗

빈 박스 : block속성

행의 끝까지 차지하고 있음(자동 줄 바꿈이 이루어짐) = inset영역 (건드릴 수 없는 영역)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>빈박스 : block (inset 영역)</div>
    <div>빈박스 : block (inset 영역)</div>
</body>
</html>

2. `<span></span>`

❗

랩핑 박스 : inline속성

본인의 공간만 차지하고 있음


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>랩핑박스 : inline</span>
    <span>랩핑박스 : inline</span>
</body>
</html>

3. `<h1></h1>`

❗

<h1></h1> 제목을 표시

h1 ~ h6 까지 있다.

block 속성


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>#</h1>
    <h2>##</h2>
    <h3>###</h3>
    <h4>####</h4>
    <h5>#####</h5>
    <h6>######</h6>
</body>
</html>

4. `<img>`

❗

<img src = “이미지 경로”>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="/ch01/img.png">
    <img src="/ch01/img.png">
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="/ch01/img.png" width="400" height="400">
    <img src="/ch01/img.png" width="100" height="100">
</body>
</html>

5. `<hr>`

❗

한 줄 긋기 = 수평라인


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>사진 갤러리</h1>
    <hr>
    <div>
        <img src="/ch01/img.png" height="300" width="300">
    </div>
    <div>
        <img src="/ch01/img.png" height="300" width="300">
    </div>
</body>
</html>

이제까지 한 것 복습. div안에 이미지를 넣었기 때문에 아래로 내려옴 (inset영역)

6. `<ul></ul> & <ol></ol> & <li></li>`

❗

ul : 정렬 되지 않은 목록 (맨 앞 동그라미) ol : 정렬 된 목록 (맨 앞 숫자) li : 목록 안의 하나의 항목


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>div</li>
        <li>span</li>
        <li>h1</li>
        <li>img</li>
        <li>hr</li>
    </ul>
    <hr>    
    <ol>
        <li>div</li>
        <li>span</li>
        <li>h1</li>
        <li>img</li>
        <li>hr</li>
    </ol>
</body>
</html>

항목 안에 항목 넣기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>항목 1</li>
        <li>
            항목 2
            <ul>
                <li>하위 항목 2-1</li>
                <li>하위 항목 2-2</li>
            </ul>
        </li>
        <li>항목 3</li>
    </ul>
</body>
</html>

7. `<a> & <input>`

❗

<a> 태그는 하이퍼링크를 걸 수 있는 태그이다. <input> 태그는 입력 가능한 박스를 하나 만들어주는 태그이다. 입력 가능한 값은 무수히 많다.

input 태그 타입들

text = 글자

date = 날짜

email = 이메일 형식을 담아야한다. (유효성 검사함)

password = 해당 글자들을 가려준다

checkbox = 선택이 하였을 때 체크가 나오는 박스

radio = 선택하면 그 안이 채워지는 박스

tel = 전화번호 형식을 담아야한다. (유효성 검사함)

`placeholder`

input 태그 박스에 미리 무언가를 표시하고 싶다면 placeholder=”내용” 을 입력하면 미리 내용이라는 글이 불투명하게 나오고, 클릭하면 미리 나온 내용이 사라진다.

`checked`

checkbox 또는 radio 타입에서 사용자가 누르기 전에 미리 눌려 있는 상태로 만드는 방법이다.

`textarea`

textarea는 텍스트를 여러 줄 입력 가능한 텍스트 박스이다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>input 과 a태그를 배워보자</h1>
    <hr>
    <ol>
        <li>a태그 배우기</li>
        <li>input태그 배우기</li>
    </ol>
    <hr>
    <div>
        <a href="https://gyul.inblog.ai/%EC%9E%90%EB%B0%94-java-53-jdbc-45913">JDBC가 궁금하다면?</a>
    </div>
    <hr>
    <div>
        <input type="text">
        <input type="date">
        <input type="email">
        <input type="password">
        <input type="checkbox">
        <input type="radio">
        <input type="tel">
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="example.php" method="post" name="contact-form">
        여기에 입력 양식을 넣습니다.
    </form>
    <hr>
    이름:<input type="text" placeholder="이름">
    <hr>
    <input type="radio" name="gender" value="남자">남자
    <input type="radio" name="gender" value="여자" checked>여자
    <input type="radio" name="gender" value="그 외">그 외
    <hr>
    <input type="image" src="/ch01/img.png" alt="전송">
    <hr>
    <select name="bloodtype">
        <option value="A">A형</option>
        <option value="B">B형</option>
        <option value="O">O형</option>
        <option value="AB">AB형</option>
        <option value="모름">모름</option>
    </select>
    <hr>
    <textarea name="message" placeholder="메시지 입력">메시지 입력</textarea>
</body>
</html>

8. 한칸 내리기 `<br>`

❗

HTML에서는 Enter가 적용이 되지 않기 때문에 한 줄을 내리기 위해서는 <br> 태그 또는 <div>로 묶어서 줄을 바꿀 수 있다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello<br>
    good<br>
    hi<br>
    <hr> 
    <div>
        hello
    </div>

    <div>
        good
    </div>

    <div>
        hi
    </div>

</body>
</html>

9. 띄워쓰기

❗

HTML에서는 Enter와 마찬가지로 Space도 적용되지 않기 때문에 문법을 사용해야한다. < 는 < 를 의미합니다. >는 > 를 의미합니다.   는 공백을 의미합니다. 자주 사용하지는 않지만 알아두면 좋다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Html entities</h1>
    <hr>
    &lt;hello&gt; <br> <!-- &lt; 는 < 를 의미합니다. &gt; 는 > 를 의미합니다. -->
    hello &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world <br> <!-- &nbsp; 는 공백을 의미합니다. -->
</body>
</html>

10. `iframe`

❗


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>아이프레임</title>
</head>
<body>
<h2>아이프레임</h2>
<hr />
<iframe src="http://www.youtube.com/embed/KTIAauR9zqA" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
<hr>
<iframe src = "http://meta-coding.com" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
<iframe src = "http://www.naver.com" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
</html>

11. `Table`

❗

표를 만들 수 있는 태그이다. 그리고 표의 행 또는 열도 병합 할 수 있다.

열을 병합 하는 태그는 colsapn=”합치고 싶은 열의 수” 행을 병합 하는 태그는 rowspan=”합치고 싶은 행의 수”


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>테이블 만들기3</h1>
    <table>
        <hr>
        <table border="1">
            <thead>
                <tr>
                    <th>번호</th> <!-- 테이블 헤더 -->
                    <th>이름</th>
                    <th>번호</th> <!-- 테이블 헤더 -->
                    <th>이름</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td> <!-- 테이블 데이터 -->
                    <td>홍길동</td>
                    <td colspan="2">1</td>
                </tr>
                <tr>
                    <td>1</td> <!-- 테이블 데이터 -->
                    <td>홍길동</td>
                    <td>2</td>
                    <td>장보고</td>
                </tr>
                <tr>
                    <td>1</td> <!-- 테이블 데이터 -->
                    <td rowspan="2">홍길동</td>
                    <td>2</td>
                    <td>장보고</td>
                </tr>
                <tr>
                    <td>1</td> <!-- 테이블 데이터 -->
                    <td>2</td>
                    <td>장보고</td>
                </tr>
            </tbody>
        </table>
</body>
</html>

예제 (시간표 만들기)

table을 사용하여 학교 시간표를 만들어보자


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>📚학교 시간표</h1>
    <hr>
    <h2>📝일주일 시간표 요약</h2>
    <ul>
        <li>수학 : 3시간</li>
        <li>영어 : 3시간</li>
        <li>국어 : 4시간</li>
        <li>과학 : 3시간</li>
        <li>사회 : 3시간</li>
        <li>체육 : 2시간</li>
        <li>미술 : 3시간</li>
        <li>음악 : 2시간</li>
        <li>프로젝트 수업 : 3시간</li>
    </ul>
    <table border="1">
        <tr>
            <th>시간</th>
            <th>월요일</th>
            <th>화요일</th>
            <th>수요일</th>
            <th>목요일</th>
            <th>금요일</th>
        </tr>
        <tr>
            <th>09:00-10:00</th>
            <td rowspan="2">수학</td>
            <td>영어</td>
            <td rowspan="2">과학</td>
            <td>체육</td>
            <td>미술</td>
        </tr>
        <tr>
            <th>10:00-11:00</th>
            <td rowspan="2">사회</td>
            <td>음악</td>
            <td rowspan="2">국어</td>
        </tr>
        <tr>
            <th>11:00-12:00</th>
            <td>영어</td>
            <td>미술</td>
            <td>수학</td>
        </tr>
        <tr>
            <th>12:00-13:00</th>
            <th colspan="6">점심시간</th>
        </tr>
        <tr>
            <th>13:00-14:00</th>
            <td>과학</td>
            <td>음악</td>
            <td>사회</td>
            <td>국어</td>
            <td>영어</td>
        </tr>
        <tr>
            <th>14:00-15:00</th>
            <th>미술</th>
            <th colspan="3">프로젝트 수업</th>
            <th>체육</th>
        </tr>
    </table>
</body>
</html>

태그들 총 정리


<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>제목입니다</h1> <!-- 제목태그-->
    <hr> <!-- 한줄, 수평라인 태그-->
    <h3>사이트 구조</h3> <!-- 크기가 작은 제목 태그-->
    <ul> <!-- 순서가 없는 목록 태그-->
        <li>자바</li> <!-- 목록 아이템 태그-->
        <li>데이터베이스</li>
        <li>HTML</li>
    </ul>
    <a href="https://www.naver.com">자바에 대해서 궁금하다면?</a> <!-- 링크 태그-->
    <div>더 자세한 설명이 필요한가요?</div> <!-- 블록 요소 태그-->
    <iframe src="http://www.youtube.com/embed/DNCBaeCoMug" width="800px" height="400px" frameborder="0"
        allowfullscreen=""></iframe> <!-- 아이프레임 요소 태그-->
    <hr> 
    <h3>궁금한 사항이 있다면 아래에 문의해주세요</h3> 
    <input type="text" placeholder="궁금증을 적어요!"> <!-- 입력 요소 태그-->
    <button>물어보기</button> <!-- 버튼 요소 태그-->
</body>

</html>