[HTML/CSS]1.HTML 기초

Mar 10, 2025

Contents

1. HTML의 기본 구조 2. 블록 요소와 인라인 요소 3. 제목 태그(h1~h6)4. 이미지 삽입하기 5. 갤러리 구성하기 6. 목록 만들기 7. 링크와 입력 요소 8. HTML 엔티티와 줄바꿈 요소 9. 테이블 만들기 10. iframe 사용하기 11. 미디어 삽입하기 12. 이모지와 복잡한 테이블 활용

커서 왼쪽위에 파일탭에서 오픈 폴더 클릭후

1. HTML의 기본 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가집니다:


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

<html> 태그는 문서의 시작과 끝을 나타내며, <head> 태그는 메타데이터를, <body> 태그는 실제로 화면에 표시될 내용을 포함합니다.

2. 블록 요소와 인라인 요소

HTML 요소는 크게 블록(block) 요소와 인라인(inline) 요소로 나눌 수 있습니다:


<div>빈박스: block(inset 영역포함)</div>
<div>빈박스: block(inset 영역포함)</div>
<span>랩핑박스: inline</span>
<span>랩핑박스: inline</span>

블록 요소(<div>): 한 줄을 모두 차지하며, 다음 요소는 새로운 줄에 표시됩니다. inset 영역을 포함합니다.

인라인 요소(<span>): 콘텐츠의 크기만큼만 공간을 차지하며, 같은 줄에 여러 요소가 표시될 수 있습니다.

참고: inset 영역은 그림을 그릴 수 없는 영역입니다.

3. 제목 태그(h1~h6)

HTML에서는 제목을 표시하기 위한 다양한 크기의 태그를 제공합니다:


<h1>#</h1>
<h2>##</h2>
<h3>###</h3>
<h4>####</h4>
<h5>#####</h5>
<h6>######</h6>

<h1>이 가장 큰 제목이며, <h6>으로 갈수록 크기가 작아집니다. 이 태그들은 웹 페이지의 구조와 계층을 나타내는 데 중요합니다.

4. 이미지 삽입하기

<img> 태그를 사용하여 웹 페이지에 이미지를 삽입할 수 있습니다:


<img src="/ch01/Screenshot_1.png" width="400" height="400">
<img src="/ch01/Screenshot_1.png" width="100" height="100">

src 속성: 이미지 파일의 경로를 지정합니다.

width, height 속성: 이미지의 너비와 높이를 픽셀 단위로 지정합니다.

5. 갤러리 구성하기

<div> 태그와 <img> 태그를 조합하여 간단한 이미지 갤러리를 만들 수 있습니다:


Copy<h1>사진 갤러리</h1>
<hr>
<div>
    <img src="/ch01/Screenshot_1.png" width="300" height="300">
</div>
<div>
    <img src="/ch01/Screenshot_1.png" width="300" height="300">
</div>

<hr> 태그는 수평선을 그어 콘텐츠를 구분하는 데 사용됩니다.

6. 목록 만들기

HTML에서는 순서가 있는 목록(<ol>)과 순서가 없는 목록(<ul>)을 제공합니다:


Copy<ul>
    <li>div</li>
    <li>span</li>
    <li>h1</li>
    <li>img</li>
    <li>hr</li>
</ul>

<ol>
    <li>div</li>
    <li>span</li>
    <li>h1</li>
    <li>img</li>
    <li>hr</li>
</ol>

<ul>: 불릿 기호로 항목을 나열합니다.

<ol>: 숫자로 항목을 나열합니다.

<li>: 목록의 각 항목을 나타냅니다.

또한, 목록 안에 목록을 중첩하여 계층 구조의 목록을 만들 수도 있습니다:


<ul>
    <li>항목 1</li>
    <li>
        항목 2
        <ul>
            <li>하위 항목 2-1</li>
            <li>하위 항목 2-2</li>
        </ul>
    </li>
    <li>항목 3</li>
</ul>

7. 링크와 입력 요소

웹 페이지에서 가장 중요한 요소 중 하나는 링크(<a>)와 사용자 입력을 받는 요소(<input>)입니다:


<div>
    <a href="https://gyul.inblog.ai/%EC%9E%90%EB%B0%94-java-53-jdbc-45913">JDBC가 궁금하다면?</a>
</div>

<input type="text">
<input type="date">
<input type="email">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="tel">

<a> 태그: 하이퍼링크를 생성합니다. href 속성에 연결할 URL을 지정합니다.

<input> 태그: 다양한 유형의 사용자 입력을 받을 수 있습니다. type 속성에 따라 텍스트 필드, 날짜 선택기, 이메일 입력, 비밀번호 필드, 체크박스, 라디오 버튼, 전화번호 입력 등 다양한 형태로 표시됩니다.

8. HTML 엔티티와 줄바꿈 요소

HTML에서는 특수 문자를 표시하기 위해 엔티티(entities)를 사용합니다:


<div>
<br> 
<p>


html
Copy
<h1>html entities</h1>
<hr>
&lt;hello&gt; <br>
hello&nbsp;&nbsp;&nbsp;world <br>

<, >: 각각 '<', '>' 기호를 표시합니다.

 : 공백(non-breaking space)을 표시합니다.

<br>: 줄바꿈을 생성합니다.

<p>: 단락을 나타내며, 위아래로 여백을 가집니다.

9. 테이블 만들기

<table> 태그를 사용하여 데이터를 행과 열로 표시할 수 있습니다. 테이블은 <thead>와 <tbody> 요소로 구분할 수 있으며, 셀을 병합하는 기능도 제공합니다:


html
Copy
<body>
  <h1>테이블 만들기 2</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>장보고</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>

<table>: 테이블의 시작과 끝을 정의합니다. border 속성으로 테이블 경계선의 두께를 지정할 수 있습니다.

<thead>: 테이블의 헤더 부분을 정의합니다.

<tbody>: 테이블의 본문 부분을 정의합니다.

<tr>: 테이블의 행(row)을 나타냅니다.

<th>: 테이블의 헤더 셀을 나타냅니다.

<td>: 테이블의 데이터 셀을 나타냅니다.

colspan 속성: 셀을 가로 방향으로 여러 열로 확장합니다. 예를 들어 colspan="2"는 셀이 두 개의 열을 차지하도록 합니다.

rowspan 속성: 셀을 세로 방향으로 여러 행으로 확장합니다. 예를 들어 rowspan="2"는 셀이 두 개의 행을 차지하도록 합니다.

이 예제에서는 다음과 같은 셀 병합이 이루어집니다:

첫 번째 행의 세 번째 셀은 colspan="2"로 가로로 두 칸을 차지합니다.

세 번째 행의 두 번째 셀은 rowspan="2"로 세로로 두 칸을 차지합니다.

이러한 셀 병합을 사용하면 보다 복잡한 구조의 테이블을 만들 수 있습니다.

10. iframe 사용하기

<iframe> 태그를 사용하여 현재 HTML 문서 내에 다른 웹 페이지를 삽입할 수 있습니다:


html
Copy
<h2>아이프레임</h2>
<hr />
<iframe src="http://www.youtube.com/embed/nracun2QRHo" width="800px" height="400px" frameborder="0" allowfullscreen=""></iframe>
<hr>
<iframe src="https://meta-coding.com/" width="800px" height="400px"></iframe>
<iframe src="https://naver.com/" width="800px" height="400px"></iframe>

iframe은 유튜브 영상이나 다른 웹사이트 등을 현재 페이지에 포함시킬 때 유용합니다.

11. 미디어 삽입하기

<video>와 <audio> 태그를 사용하여 비디오와 오디오를 삽입할 수 있습니다:


html
Copy
<video width="300" height="300" controls autoplay loop muted>
    <source src="/ch02/hello.mp4">
</video>

<audio controls autoplay loop muted>
    <source src="/ch02/hello.mp3">
</audio>

controls: 재생, 일시 중지, 볼륨 조절 등의 컨트롤을 표시합니다.

autoplay: 페이지 로드 시 자동으로 재생합니다.

loop: 미디어가 끝나면 다시 시작합니다.

muted: 음소거 상태로 시작합니다.

12. 이모지와 복잡한 테이블 활용

HTML에서는 이모지를 포함한 다양한 특수 문자를 사용할 수 있으며, 복잡한 테이블 구조도 만들 수 있습니다:


html
Copy
<h1>&#128218; 학교 시간표<h1>
<hr>
<h3>&#128218; 일주일 시간표 요약</h3>

<ul>
    <li>수학: 3시간</li>
    <li>국어: 3시간</li>
    <!-- 다른 과목 목록 생략 -->
</ul>
<table>
    <!-- 테이블 내용 생략 -->
</table>

📚와 같은 코드를 사용하여 이모지를 표시할 수 있습니다. 위 예제에서는 책 이모지를 사용했습니다.

See more posts