inblog logo
|
An's Blog
    HTML

    [HTML&CSS] 1. HTML 태그들

    윤설안's avatar
    윤설안
    Mar 07, 2025
    [HTML&CSS] 1. HTML 태그들
    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. iframe11. 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>
    notion image

    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>
    block속성이 아니라 옆으로 나열
    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>
    <img src="/ch01/img.png" width="400" height="400">
    <img src="/ch01/img.png" width="100" height="100">
</body>
</html>
    width = 가로 / height = 세로
    width = 가로 / height = 세로

    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영역)
    이제까지 한 것 복습. 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>
    notion image

    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>
    notion image
    <!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>
    notion image

    9. 띄워쓰기

    ❗
    HTML에서는 Enter와 마찬가지로 Space도 적용되지 않기 때문에 문법을 사용해야한다. &lt; 는 < 를 의미합니다. &gt;는 > 를 의미합니다. &nbsp; 는 공백을 의미합니다. 자주 사용하지는 않지만 알아두면 좋다.
    <!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

    ❗
    iframe은 영상의 링크를 넣으면 영상을, 홈페이지 링크를 넣으면 홈페이지를 그대로 가져오는 태그이다. 하지만 해당 태그는 가져오는 곳에서 iframe거부를 하게 되면 거부 당할 수도 있다(저작권 문제). 또는 특정한 약속을 지켜야지만 가져 올 수 있다. 예로는 유튜브가 있다. 아래의 사진의 네모에 해당하는 영상의 키를 첨부해야한다.
    notion image
    <!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>
    naver.com은 연결이 거부가 된 모습
    naver.com은 연결이 거부가 된 모습
     

    11. Table

    ❗
    표를 만들 수 있는 태그이다. 그리고 표의 행 또는 열도 병합 할 수 있다.
    열을 병합 하는 태그는 colsapn=”합치고 싶은 열의 수” 행을 병합 하는 태그는 rowspan=”합치고 싶은 행의 수”
    notion image
    <!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>
    notion image

    태그들 총 정리

    <!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>
    notion image
    Share article
    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. iframe11. Table태그들 총 정리

    An's Blog

    RSS·Powered by Inblog