[HTML/CSS] 1. HTML 기본

Mar 07, 2025

Contents

1. 웹 서버 열기 2. 태그 1. div 2. span 3. h1 4. hr 4. img 5. ul 6. ol 7. a 8. input 9. 특수 기호 삽입(엔티티)10. iframe 11. video & audio 12. table 3. 총정리

1. 웹 서버 열기


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

2. 태그

1. div


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

빈 박스

block 영역

inset을 포함함

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

2. span


<span>랩핑박스 : inline</span>

랩핑 박스

inline 영역

내부 아이템의 크기만큼 크기를 가짐

3. h1


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

제목 태그

block 속성

4. hr


<hr />

4. img


<img src="/ch01/hello.png" width="100" height="100" alt="사진이름">
<img src="/ch01/hello.png">

src = 이미지 파일이 있는 경로

width = 이미지의 폭

height = 이미지의 높이

alt = 사진이름

이미지

inline 속성

5. ul


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

ul = un order list

li = list item

동그라미 표시

block 속성

6. ol


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

ol = order list

li = list item

순서를 표시함

block 속성

7. a


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

href = url을 넣으면 됨

하이퍼링크, 다른 페이지로 이동

텍스트에 링크를 지정

inline 속성

8. input


<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="color">
<input type="range">
<input type="file">
<input type="submit">
<input type="reset">
<input type="button">
<input type="checkbox">
<input type="radio">
<input type="image">
<input type="search">
<input type="tel">
<input type="url">

9. 특수 기호 삽입(엔티티)


&lt;html&gt;
hello&nbsp;world
<br />

< : &lt

> : &gt

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

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

10. iframe


<h2>아이프레임</h2>
<hr>
<iframe
  src="https://jjack1.inblog.ai/db-mysql-%EB%AC%B8%EC%A0%9C-%ED%92%80%EC%9D%B4-46009"
  width="100%"
  height="300px"
  frameborder="0"
  allowfullscreen=""
></iframe>
<iframe
  src="https://naver.com"
  width="100%"
  height="300px"
  frameborder="0"
  allowfullscreen=""
></iframe>
<iframe
  src="https://youtube.com/embed/DNCBaeCoMug"
  width="100%"
  height="300px"
  frameborder="0"
  allowfullscreen=""
></iframe>

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

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

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

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

보안의 위험이 있어 iframe을 제한하는 홈페이지도 많음 ( 네이버 등 )

11. video & audio


<video src="/ch02/hello.mp4" width="100%" height="100%" controls autoplay muted loop>
    <source src="/ch02/hello.mp4" type="video/mp4">
</video>

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

비디오 파일을 재생 시켜주는 video태그

controls = 조종 영역 활성화

autoplay = 자동 실행

muted = 음소거 활성화

loop = 무한 반복 활성화

오디오 파일을 재생 시켜주는 audio태그

autoplay = 자동 실행

controls = 조종 영역 활성화

muted = 음소거 활성화

loop = 무한 반복 활성화

12. table


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

table = 메인 테이블 태그

thead = 테이블의 헤드 영역 지정

tbody = 테이블의 바디 영역 지정

tr = 테이블의 행을 생성

th = 테이블의 하나의 데이터 블럭 생성, 컬럼의 헤더값을 지정

td = 테이블의 하나의 데이터 블럭 생성

rowspan = 행의 높이를 지정
colspan = 컬럼의 높이를 지정

3. 총정리

💡

지금까지 배운 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/DNCBaeCoMug"
      width="500"
      height="300"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
    <hr />
    <h3>궁금한 사항이 있다면 아래에 문의해주세요</h3>
    <input type="text" placeholder="궁금한 사항을 적어주세요." />
    <button>물어보기</button>
  </body>
</html>

Contents

1. 웹 서버 열기 2. 태그 1. div 2. span 3. h1 4. hr 4. img 5. ul 6. ol 7. a 8. input 9. 특수 기호 삽입(엔티티)10. iframe 11. video & audio 12. table 3. 총정리

HTML/CSS

[HTML/CSS] 1. HTML 기본

최재원

Mar 07, 2025

Contents

1. 웹 서버 열기 2. 태그 1. div 2. span 3. h1 4. hr 4. img 5. ul 6. ol 7. a 8. input 9. 특수 기호 삽입(엔티티)10. iframe 11. video & audio 12. table 3. 총정리

1. 웹 서버 열기


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

2. 태그

1. div


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

빈 박스

block 영역

inset을 포함함

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

2. span


<span>랩핑박스 : inline</span>

랩핑 박스

inline 영역

내부 아이템의 크기만큼 크기를 가짐

3. h1


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

제목 태그

block 속성

4. hr


<hr />

4. img


<img src="/ch01/hello.png" width="100" height="100" alt="사진이름">
<img src="/ch01/hello.png">

src = 이미지 파일이 있는 경로

width = 이미지의 폭

height = 이미지의 높이

alt = 사진이름

이미지

inline 속성

5. ul


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

ul = un order list

li = list item

동그라미 표시

block 속성

6. ol


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

ol = order list

li = list item

순서를 표시함

block 속성

7. a


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

href = url을 넣으면 됨

하이퍼링크, 다른 페이지로 이동

텍스트에 링크를 지정

inline 속성

8. input


<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="color">
<input type="range">
<input type="file">
<input type="submit">
<input type="reset">
<input type="button">
<input type="checkbox">
<input type="radio">
<input type="image">
<input type="search">
<input type="tel">
<input type="url">

9. 특수 기호 삽입(엔티티)


&lt;html&gt;
hello&nbsp;world
<br />

< : &lt

> : &gt

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

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

10. iframe


<h2>아이프레임</h2>
<hr>
<iframe
  src="https://jjack1.inblog.ai/db-mysql-%EB%AC%B8%EC%A0%9C-%ED%92%80%EC%9D%B4-46009"
  width="100%"
  height="300px"
  frameborder="0"
  allowfullscreen=""
></iframe>
<iframe
  src="https://naver.com"
  width="100%"
  height="300px"
  frameborder="0"
  allowfullscreen=""
></iframe>
<iframe
  src="https://youtube.com/embed/DNCBaeCoMug"
  width="100%"
  height="300px"
  frameborder="0"
  allowfullscreen=""
></iframe>

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

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

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

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

보안의 위험이 있어 iframe을 제한하는 홈페이지도 많음 ( 네이버 등 )

11. video & audio


<video src="/ch02/hello.mp4" width="100%" height="100%" controls autoplay muted loop>
    <source src="/ch02/hello.mp4" type="video/mp4">
</video>

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

비디오 파일을 재생 시켜주는 video태그

controls = 조종 영역 활성화

autoplay = 자동 실행

muted = 음소거 활성화

loop = 무한 반복 활성화

오디오 파일을 재생 시켜주는 audio태그

autoplay = 자동 실행

controls = 조종 영역 활성화

muted = 음소거 활성화

loop = 무한 반복 활성화

12. table


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

table = 메인 테이블 태그

thead = 테이블의 헤드 영역 지정

tbody = 테이블의 바디 영역 지정

tr = 테이블의 행을 생성

th = 테이블의 하나의 데이터 블럭 생성, 컬럼의 헤더값을 지정

td = 테이블의 하나의 데이터 블럭 생성

rowspan = 행의 높이를 지정
colspan = 컬럼의 높이를 지정

3. 총정리

💡

지금까지 배운 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/DNCBaeCoMug"
      width="500"
      height="300"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
    <hr />
    <h3>궁금한 사항이 있다면 아래에 문의해주세요</h3>
    <input type="text" placeholder="궁금한 사항을 적어주세요." />
    <button>물어보기</button>
  </body>
</html>

Contents

1. 웹 서버 열기 2. 태그 1. div 2. span 3. h1 4. hr 4. img 5. ul 6. ol 7. a 8. input 9. 특수 기호 삽입(엔티티)10. iframe 11. video & audio 12. table 3. 총정리