[HTML/CSS] 1. HTML 기본

Mar 06, 2025

Contents

1. 웹 서버 열기

Live Server 활용 →
8. Cursor 설치


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

2. Body Tag

<div></div> : 빈 박스 (Block)

문서의 끝까지 공간을 차지

inset : 다른 개체가 관여할 수 없음

<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>
    <div>빈박스 : block (inset 영역 포함)</div>
    <div>빈박스 : block (inset 영역 포함)</div>
    <span>랩핑박스 : inline</span>
    <span>랩핑박스 : inline</span>
</body>
</html>

브라우저 개발자 도구 (F12 or 텍스트 우클릭 후 ‘검사’)

html 속성 확인 가능

<h1></h1> : 제목 (Block)

h1 ~ h6까지 존재하며, 폰트 크기가 다름 (1이 제일 큼)


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

<hr> : 수평선 (Block)

수평선을 그어서 구역 구분

<img> : 이미지 (Inline)

닫는 태그가 없음

대신 img 옆에 경로와 별칭 등의 속성을 추가
<img src=”url” alt=”별칭” width=”” height=””…>


<!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/woman-2594934_1280.jpg" width="400" height="400">
    <img src="/ch01/woman-2594934_1280.jpg" width="100" height="100">
</body>
</html>

이미지 개체는 Inline이나, <div> 안에 담아서 구별하면 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>
    <hr>
    <div>
        <img src="/ch01/woman-2594934_1280.jpg" width="300" height="300">
    </div>
    <div>
        <img src="/ch01/woman-2594934_1280.jpg" width="300" height="300">
    </div>
</body>
</html>

<ul></ul> : 글머리 기호 (Border)

← 이 기호를 사용하여서 ul (Unordered Line)

글머리를 담는 경계

Block의 속성을 가짐

<ol></ol> : 번호 글머리 기호 (Border)

← 이 기호를 사용하여서 ol (Ordered Line)

텍스트를 적으면 순서가 숫자로 표시

<ul></ul>과 같은 속성을 가짐

<li></li> : 글머리 내용 (Block)

<ul></ul> 혹은 <ol></ol> 안에 포함시켜서, 글머리 지정 가능

글머리 기호는 padding

<li></li> 안에 <li></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>
    <hr>
    <ul>
        <li>항목 1</li>
        <li>
            항목 2
            <ul>
                <li>하위 항목 2-1</li>
                <li>하위 항목 2-2</li>
            </ul>
        </li>
        <li>항목 3</li>
    </ul>
</body>
</html>

<a></a> : a 태그 (Inline)

텍스트에 링크 지정 가능 ( 하이퍼링크 )

<a href=”” alt=””>하이퍼링크</a>

<input> : 입력 양식 추가 (Inline)

사용자에게 입력받을 수 있는 양식을 추가

input 양식 종류

text : 문자
date : 날짜 ( 달력에서 날짜 선택 )
email : 이메일 양식 ( 이메일 양식이 아닐 경우 오류 반환 )
password : 텍스트가 가려짐 ( 암호화 )
checkbox : 체크/해제할 수 있는 박스
radio : 라디오 버튼 ( 여러 개 존재 시 하나만 선택 가능 )
tel : 전화번호 ( 전화번호 양식이 아닐 경우 오류 반환 )


<!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://sxias.inblog.ai/java-72-jdbc-45838">JDBC가 궁금하다면?</a>
    </div>
    <hr>
    <input type="text">
    <input type="date">
    <input type="email">
    <input type="password">
    <input type="checkbox">
    <input type="radio">
    <input type="tel">
</body>
</html>

하이퍼링크 클릭 시, 지정한 페이지로 이동

특수 기호 삽입

< : &lt

> : &gt

&nbsp : 공백 ( 스페이스 바 )

<br> : 한 줄 내리기 ( 엔터 )


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

iframe : 미디어 삽입 (Inline)

음악, 동영상, 홈페이지 등 멀티미디어 요소들을 틀 안에 삽입할 수 있는 구조

음악의 경우 mp3, 영상은 mp4, 페이지는 해당 홈페이지 링크 삽입

유튜브 영상의 경우 해당 영상의 키가 필요

자동재생, 반복재생, 음소거, 영상 메뉴 ( 재생/일시정지, 최대화, 재생 속도 설정 등 )

보안의 위험이 있어 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/tiKFuzpX-NA" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
<hr>
<iframe src="https://meta-coding.com" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
<hr>
<iframe src="https://naver.com" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
</body>
</html>

<table></table> : 테이블 작성 (Inline)

열과 행이 구분되어 있고, 속성(thead)과 내용(tbody)로 나누어짐

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

행과 열을 병합할 수 있음 : colspan, 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>테이블 만들기 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>

✏️

총 정리

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

</html>

Contents

1. 웹 서버 열기 2. Body Tag 총 정리

<!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> <span>랩핑박스 : inline</span> <span>랩핑박스 : inline</span> </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> <h1>#</h1> <h2>##</h2> <h3>###</h3> <h4>####</h4> <h5>#####</h5> <h6>######</h6> </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/woman-2594934_1280.jpg" width="400" height="400"> <img src="/ch01/woman-2594934_1280.jpg" width="100" height="100"> </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> <h1>사진 갤러리</h1> <hr> <div> <img src="/ch01/woman-2594934_1280.jpg" width="300" height="300"> </div> <div> <img src="/ch01/woman-2594934_1280.jpg" width="300" height="300"> </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> <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> <hr> <ul> <li>항목 1</li> <li> 항목 2 <ul> <li>하위 항목 2-1</li> <li>하위 항목 2-2</li> </ul> </li> <li>항목 3</li> </ul> </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> <h1>input과 a태그를 배우자</h1> <hr> <ol> <li>a 태그 배우기</li> <li>input 태그 배우기</li> </ol> <hr> <div> <a href="https://sxias.inblog.ai/java-72-jdbc-45838">JDBC가 궁금하다면?</a> </div> <hr> <input type="text"> <input type="date"> <input type="email"> <input type="password"> <input type="checkbox"> <input type="radio"> <input type="tel"> </body> </html>

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

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