[HTML/CSS] 1. HTML 기본

Mar 07, 2025

Contents

<!DOCTYPE html><html>~</html><head>~</head>, <title>~</title>, <body>~</body><Div><Span><h1>~</h1><img><li>~</li> 와 <ol>~</ol><ol> <li>~<li> <ol>input과 a태그 내려쓰기와 단락 나누기 <>와 space iframe video와 audio <table>~</table>colspan과 rowspan

‼️

HTML (Hypertext Markup Language)

웹페이지를 만들 때 사용하는 언어

웹페이지에 출력할 문장 등을 “<” 와 “>” 로 감싼 태그라고 부르는 특수한 문자열로 감싸서 만든다

<!DOCTYPE html>

‼️

Doctype 선언

해당 페이지가 어떤 버전의 HTML에 맞게 작성됐는지 나타냄


<!DOCTYPE html>

<html>~</html>

‼️

HTML 문서라는 것을 나타내는 태그

lang = “en” → 영어로 작성된 HTML 문서


<html lang="en">

</html>

<head>~</head>, <title>~</title>, <body>~</body>

‼️

<head>~</head>

페이지의 제목과 설명, 사용할 외부 파일 링크 등과 같은 페이지의 정보를 작성하는 부분

<title>~</title>

페이지의 제목을 작성

여기에 작성한 이름이 브라우저 탭에 출력됨

사용자가 웹 사이트를 북마크 했을 때 페이지의 제목으로도 출력됨

<body>~</body>

HTML 문서의 본체 부분

콘텐츠를 입력하면 실제로 브라우저에 출력된다


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

<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>
    <div>빈 박스: block</div>
    <div>빈 박스: block</div>
</body>
</html>

속성: block

<Span>

‼️

Text의 길이만큼 공간을 차지함


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

속성: inline

<h1>~</h1>

‼️

최대 6개까지 가능


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

속성: block

<img>

‼️


<!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/sky.png">
</body>
</html>

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

Text와 구분선 밑에 사진 넣기

‼️

div 안에 img를 넣을 수 있다 → 속성이 inline 에서 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/sky.png" height="300" width="300" >
    </div>
    <div>
        <img src="/ch01/sky.png" height="300" width="300" >
    </div>
</body>
</html>

속성: block

<li>~</li> 와 <ol>~</ol>

‼️


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

속성: block

<ol> <li>~<li> <ol>

‼️

목차 안에 하위 항목 만들기


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

속성: block

input과 a태그

‼️

input

<input type = “”>

입력 양식 내부의 각 부품을 만들기 위한 태그

type 속성으로 용도를 지정하는 형태로 사용

주요 한줄 텍스트의 입력란

속성값	용도
text	기본적인 text (초기값)
date	날짜
email	메일 주소
password	비밀번호
checkbox	체크박스 (여러 개 선택 가능)
radio	라디오 (1개를 선택해서 클릭하면 자동으로 다른 선택지는 선택할 수 없다)
tel	전화번호

a태그

<a href=”링크”></a>

링크를 만드는 태그


<!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>
    <input type="text">
    <input type="date">
    <input type="email">
    <input type="password">
    <input type="checkbox">
    <input type="radio">
    <input type="tel">
</body>
</html>

내려쓰기와 단락 나누기

‼️

<br>

내려쓰기


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

<>와 space

‼️

&lt

&gt

&nbsp

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>
    hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world<br>
    

</body>
</html>

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/HnJzFzAVIUc" 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>


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


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

video와 audio

‼️

controls: 재생

autoplay: 자동 재생

muted: 음소거

loop: 반복 재생


<!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="300" 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>

<table>~</table>

‼️

<thead>~</thead>

테이블의 컬럼 제목
<th>~</th> → 테이블의 열(타이틀-제목)을 만드는 태그

<tbody>~</tbody>

컬럼 내용
<tr><td>~</td></tr>
<tr>~</tr> → 테이블의 행을 만드는 태그
<td>~</td> → 테이블의 열을 만드는 태그


<tr>
<td>1행 1열</td>
</tr>
<tr>
<td>1행 2열</td> -> 테이블의 열을 만드는 태그
</tr>
<tr>
<td>1행 3열</td>
</tr>

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>테이블 만들기</h1>
    <hr />
    <table border="2">
      <thead>
        <tr>
          <th>번호</th>
          <th>이름</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>홍길동</td>
        </tr>
        <tr>
          <td>2</td>
          <td>장보고</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

colspan과 rowspan

‼️

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