[HTML] 1. HTML 기본

김주희

Mar 10, 2025

❗

노션 정리만 하기! 복습X

책 : 39p~ / 62~69p

1. CH01

0. html 기본구조 자동완성

CH01

1. <head> & <Body>

1. <head></head>

html 문서의 메타데이터를 정의하는 태그

head 태그 안의 내용 = html 문서의 정보를 담고 있는 데이터 → 브라우저 창에 표시 X,

<title> : 문서의 제목 정의

2. <body></body>

실제로 브라우저 화면에 나타나는 내용을 담는 태그


<html>
    <head>
        <title>첫번째 페이지</title>
    </head>
    <body>
        반가워
    </body>
</html>

2. <div> & <span>

1. <div></div>

block 요소

2. <span></span>

inline 요소


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div>빈박스 : block (inset 영역 포함) </div>
    <div>빈박스 : block (inset 영역 포함) </div>
    <span>랩핑박스 : inline</span>
    <span>랩핑박스 : inline</span>
</body>
</html>

3. Block

한 행 전체를 차지하는 요소

inset : 그림을 그릴 수 없는 영역

세로로 쓰고 싶을 때

4. Inline

자신이 필요한 만큼만 공간을 차지하는 요소

가로로 쓰고 싶을 때

3. <h></h>

제목 태그

크기에 따라 가장 크기가 크고 중요한 제목인 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 : 이미지 파일의 url

width : 이미지의 너비

height : 이미지의 높이

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>
    <img src="/ch01/computer.png" width="400" height="400"> 
    <img src="/ch01/computer.png" width="100" height="100"> 
</body>
</html>

5. <hr>

horizontal rule(수평 라인)의 약자

닫는 태그 </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/computer.png" width="300" height="300">
    </div>
    <div>
        <img src="/ch01/computer.png" width="300" height="300">
    </div>
</body>
</html>

2. CH02

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

1. <ul></ul>

unordered list의 약자로 순서(숫자)가 없는 리스트를 나타낸다

bullet point를 만든다.

Block 요소

2. <ol></ol>

ordered list의 약자로 순서가 있는 리스트를 나타낸다.

Block 요소

3. <li></li>

list item의 약자로 리스트의 각각의 항목을 의미한다.

<ul>이나 <ol>과 같이 쓰인다.

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>
    <ul>
        <li>div</li>
        <li>span</li>
        <li>img</li>
        <li>hi</li>
        <li>img</li>
        <li>hr</li>
    </ul>
    <hr>
    <ol>
        <li>div</li>
        <li>span</li>
        <li>img</li>
        <li>hi</li>
        <li>img</li>
        <ol>
            <li>a</li>
            <li>b</li>
        </ol>
    </ol>
    <hr>
    <ul>
        <li>항목 1</li>
        <li>
            항목 2
            <ul>
                <li>하위 항목 2-1</li>
                <li>하위 항목 2-2</li>
            </ul>
        </li>
        <li>항목 3</li>
    </ul>
</body>
</html>

1.1. <ul> block 요소 확인

2.1. <ol> block 요소 확인

3.1. <li> block 요소 확인

7. <a></a>

anchor의 약자로 하이퍼링크를 생성한다.

href : 여는 태그 안에 하이퍼링크로 연결할 url을 지정하는 속성

태그 내부에는 하이퍼링크를 연결하기 위한 텍스트 등이 들어간다.

Inline 요소

8. <input>

1. <input>

client로부터 값을 입력받기 위한 입력 필드를 나타낸다.

type 여러개

type에 맞지 않는 값 입력에 대한 체크를 할 수 있는 유효성 검사 기능이 내장되어있다.

Inline 요소

2. type

text

date

password

checkbox

radio

3. 속성

placeholder : 사용자가 적절한 입력을 하도록 유도하기 위한 도움말


<!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/category/%EC%9E%90%EB%B0%94-java">JDBC가 궁금하다면?</a>
    </div>
    <hr>
    <input type="test">
    <input type="date">
    <input type="email">
    <input type="password">
    <input type="checkbox">
    <input type="radio">
    <input type="tel">
</body>
</html>

<a>

<input>

3. CH03

1.

1. <br>

enter

내려쓰기

2. <p></p>

단락을 나눔

→ 그냥 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>
    <p>
    hello
    good
    hi
    </p>
</body>
</html>

2. 특수기호

< : &lt (less than)

> : &gt (greater than)

공백 :


<!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>
    hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world<br>
    
</body>
</html>

3. <iframe></iframe>

액자를 넣는

다른사람의 영상 주소를 넣으면

유튜브 url 규칙 embed/까지

내 사이트 아이프레임에서 안열리도록 거부 (예 naver.com)


5

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


5-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>메타코딩</title>
</head>
<body>
<iframe src="https://meta-coding.com" width="100%" height="1000" frameborder="0" allowfullscreen=""></iframe>
</body>
</html>


5-2

<!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>
    <video width="500" height="300" controls autoplay muted loop>
        <source src = "/ch02/hello.mp4">     
    </video>
    <audio controls autoplay muted loop>
        <source src = "/ch02/hello.mp3">     
    </audio>
</body>
</html>

4. <table></table>

행/열 구분

속성(thead) / 내용(tbody)

데이터는 행 방향(가로)로 작성

colspan, rowspan : 행과 열의 병합 → 뒤에 숫자를 붙여 몇 개를 병합할지 설정할 수 있음

1. 태그

<thead></thead> : 속성

<tbody> </tbody>: 내용

<tr> </tr>: 테이블의 행을 만든다. (table row)

<th></th>: 테이블의 열 - 제목을 만든다. <table

<td></td> : 테이블의 열을 만든다. (table data)

2. 속성

clospan : 열을 합친다. 뒤에 숫자를 붙여 합칠 열의 개수를 지정할 수 있다.

rowspan : 행들을 합친다. 뒤에 숫자를 붙여 합칠 행의 개수를 지정할 수 있다.

border : 테이블 경계선의 굵기를 지정한다.


<!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>테이블 만들기 4</h1>
    <hr>
    <table border = "2">
        <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>2</td>
                <td>장보고</td>
                <td>2</td>
                <td>장보고</td>
            </tr>
            <tr>
                <td>2</td>
                <td rowspan="2">장보고</td>
                <td>2</td>
                <td>장보고</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>장보고</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

border 설정 전

border 설정 후

총 정리

❗

지금까지 배운 HTML 코드를 토대로 페이지를 제작해보자

1. 요구 사항

제목

수직선 ( 제목과 본문 구분 용 )

소제목

글머리 기호

하이퍼링크

아이프레임

텍스트 박스

<button></button> : 버튼

2. 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>
    <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 = "https://www.youtube.com/embed/hpMMC3JgiHE" width = "800" height = "400" frameborder = "0" allowfullsreen = "" ></iframe>
    <hr>
    <h3>궁금한 사항이 있다면 아래에 문의해주세요</h3>
    <input type = "text" placeholder = "궁금증을 적어요">
    <button>물어보기</button>
</body>
</html>