<오늘의 학습>
1. Visual Studio Code 설치
2. HTML
3. 텍스트 태그
4. 리스트 태그
5. 테이블 태그
6. 멀티미디어 태그
7. form 태그
8. input 태그
1. Visual Studio Code 설치
▶ Visual Studio Code 다운로드
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. HTML
▶ 특징
- 웹 문서를 만들기 위해 사용하는 마크업 언어이다.
- 파일 이름을 입력할 때 확장자인 '.html'을 붙여 입력한다.
- <> 기호로 묶인 부분을 태그라고 하며, 웹 브라우저에는 태그 사이에 작성한 내용만 나타난다.
- 태그 단위로 실행된다.
- HTML을 골격을 잡고 CSS가 꾸미거나 간격을 주는 등의 꾸미기 역할을 담당한다.
▶ 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>
</body>
</html>
- ! + tab : HTML 기본 구조 자동 완성
3. 텍스트 태그
| 종류 |
설명 |
| <h1~h6> |
제목. 타이틀. 강조. 숫자가 커질수록 글자 크기는 작아진다. |
| <p> |
고정된 여백을 가지는 일반 텍스트. 내용이 길어지면 웹 브라우저 창의 너비에 맞게 자동으로 줄바꿈된다. |
| <div> |
여백 없이 한 줄의 영역을 다 차지하는 텍스트. p 태그보다 자주 사용된다. |
| <span> |
작성한 내용까지만 영역을 차지하는 텍스트. |
| <br> |
줄바꿈. |
| <blockquote> |
일정 공백을 들여써준다. 단락으로 표시하거나 내용을 인용할 때 사용한다. |
| <b> |
글씨를 굵게 표시한다. |
| <strong> |
글씨를 굵게 표시한다. b 태그와 육안 상으로 차이는 없지만, 소리로 서비스가 될 때 강조된 부분으로 안내가 된다. b 태그보다 자주 사용된다. |
| <i> |
글씨를 기울여준다. |
| <em> |
글씨를 기울여준다. |
| <sup> |
위 첨자. 위로 올린다. |
| <sub> |
아래 첨자. 아래로 내린다. |
| <ins> |
글 아래 밑줄 표시를 한다. 내용을 편집할 때 추가한 내용을 표시한다. |
| <del> |
글 가운데 줄을 긋는다. 내용을 편집할 때 삭제한 내용을 표시한다. |
| <hr> |
구분선을 긋는다. |
▶ 실습 1) 태그 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫 번재 html 파일</title>
</head>
<body>
Hello World!!
<h1>
첫 번째 html 실습
</h1>
<h2>
첫 번째 html 실습
</h2>
<p>p 테스트</p>
<div>div 테스트1</div>
<div>div 테스트2</div>
<span>span 테스트1</span>
<span>span 테스트2</span>
</body>
</html>
▶ 실습 2) 태그 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태그 연습</title>
</head>
<body>
<h1>레드향</h1>
<p>레드향 맛있다.</p>
<blockquote>맛있는 레드향</blockquote>
<p><b>레드향</b>은 <strong>한라봉</strong>과 귤을 교배한 과일이다.</p>
<p><i>레드향</i>은 <em>한라봉</em>과 귤을 교배한 과일이다.</p>
<p>레드향<sup>1</sup>은 <ins>한라봉</ins>과 <sub>귤</sub>을 <del>교배한</del> 과일이다.</p>
</body>
</html>
4. 리스트(목록) 태그
| 종류 |
설명 |
| <ol> |
규칙성이 있는 목록의 시작과 끝을 나타낸다. type을 지정해줄 수 있다. |
| <ul> |
규칙성이 없는 목록의 시작과 끝을 나타낸다. |
| <li> |
목록의 각 항목을 나타낸다. |
| <dl> |
설명 목록의 시작과 끝을 나타낸다. |
| <dt> |
설명 목록의 이름(제목)을 나타낸다. |
| <dd> |
설명 목록의 값(설명)을 나타낸다. |
▶ 실습 1) 리스트 만들기
<body>
<ol>
<li>자바</li>
<li>오라클 데이터베이스</li>
<li>HTML/CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol start="5">
<li>자바</li>
<li>오라클 데이터베이스</li>
<li>HTML/CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol type="a">
<li>자바</li>
<li>오라클 데이터베이스</li>
<li>HTML/CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol type="I">
<li>자바</li>
<li>오라클 데이터베이스</li>
<li>HTML/CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ul>
<li>자바</li>
<li>오라클 데이터베이스</li>
<li>HTML/CSS</li>
<li>JAVASCRIPT</li>
</ul>
</body>
▶ 실습 2) 상품 설명하기
<body>
<h2>상품 구성</h2>
<dl>
<dt>선물용 3kg</dt>
<dd>소과 13~16과</dd>
<dd>중과 10~12과</dd>
<dd>대과 8~9과</dd>
</dl>
</body>
5. 테이블(표) 태그
| 종류 |
설명 |
| <table> |
표를 나타낸다. |
| <caption> |
표의 제목을 넣는다. |
| <tr> |
표의 행을 만든다. |
| <td> |
표의 셀을 만든다. |
| <th> |
제목 셀을 만든다. 컬럼의 헤더 역할을 하는 열이다. |
| <tread> |
표 구조에서 제목 부분을 나타낸다. 코드에 영향을 주지는 않지만, 구조적 파악을 위해 사용한다. |
| <tbody> |
표 구조에서 본문 부분을 나타낸다. |
| <tfoot> |
표 구조에서 요약이나 정리 부분을 나타낸다. |
| <col> |
표에서 열 스타일을 지정한다. |
| <colgroup> |
표에서 여러 열을 함께 묶어서 스타일을 지정한다. |
▶테이블의 구조 파악을 위한 style 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td{
border: 1px solid #ccc;
border-collapse: collapse;
}
th, td {padding: 10px 20px;}
</style>
</head>
- border-collapse: collapse; : 중복되는 선을 없애준다.
▶ 실습 1) 테이블 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 만들기</title>
<style>
table, th, td{
border: 1px solid #ccc;
border-collapse: collapse;
}
th, td {padding: 10px 20px;}
</style>
</head>
<body>
<table>
<caption>테이블 제목</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
▶ 실습 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>
<style>
table, th, td{
border: 1px solid #ccc;
border-collapse: collapse;
}
th, td {padding: 10px 20px;}
</style>
</head>
<body>
<table>
<caption>요안도라 객실</caption>
<thead>
<tr style="background-color: #ccc;">
<th>방 이름</th>
<th>대상</th>
<th>크기</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4">1인 20,000원</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동성 도미토리</td>
</tr>
<tr>
<td>가족 1팀</td>
</tr>
<tr>
<td>천혜향방</td>
<td style="text-align: center;">-</td>
<td >2인실</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color: #ccc;">
<td colspan="4" style="text-align: center;"><strong>바깥채 전체를 렌트합니다</strong></td>
</tr>
</tfoot>
</table>
</body>
</html>
▶ 실습 3) 테이블 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 문제</title>
<style>
table, th, td{
border: 1px solid #ccc;
border-collapse: collapse;
}
th, td {padding: 10px 20px;}
</style>
</head>
<body>
<table style="text-align: center;">
<caption>요안도라 객실</caption>
<thead>
<tr>
<th>방 이름</th>
<th>대상</th>
<th>크기</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4">1인 20,000원</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동성 도미토리</td>
</tr>
<tr>
<td>가족 1팀</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td >2인실</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<strong>바깥채 전체를 렌트합니다</strong>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
※ 열을 기준으로 설정할 수 있다.
<colgroup>
<col style="background-color: #ffc0c0;">
<col>
<col style="background-color: #eceb9e;">
<col>
</colgroup>
6. 멀티미디어 태그
| 종류 |
설명 |
| <img> |
이미지 파일을 삽입한다. |
| <audio> |
오디오 파일을 삽입한다. |
| <video> |
비디오 파일을 삽입한다. |
| <object> |
멀티미디어, PDF 파일 등 다양한 형식의 파일을 삽입한다. |
| <embed> |
<audio>, <video> 태그와 <Object> 태그도 지원하지 않을 경우 멀티미디어 파일을 삽입한다. |
| <a href=""> |
하이퍼링크를 삽입한다. |
- 절대 경로 : C:\html_css\img\link.png
- 상대 경로 : ..\img\link.png (내 파일을 기준으로 경로를 정한다.)
- . : 현재경로
- .. : 이전경로
▶ 텍스트를 눌러도 페이지를 이동시키지 않는 방법
<a href="javascript:;">이동안함</a>
- <a href="#"> : #을 넣어도 페이지를 이동시키지 않지만 문제 발생의 소지가 있다.
▶ 실습 1) 이미지 삽입
<body>
<img src="img/salad.jpg" alt="샐러드">
<img src="img/salad.jpg" alt="샐러드" width = "50%" height="80%">
<img src="img/salad.jpg" alt="샐러드" width = "150%">
</body>
- alt : 출력에 영향을 끼치지 않지만, 출력을 하지 않아도 이미지의 내용을 추측할 수 있다. 소리로 서비스가 될 때 설명된다.
▶ 실습 2) 이미지 삽입
<img src="https://www.ikbc.co.kr/data/kbc/image/2023/03/14/kbc202303140094.800x.9.jpg" alt="손흥민">
- 이미지 주소를 받아와서 이미지를 출력할 수 있다.
- 원본 이미지가 삭제되면 해당 이미지를 받아올 수 없다.
▶ 실습 3) 오디오 삽입
<!-- <embed src="img/spring.mp3" type=""> -->
<audio src="img/spring.mp3" controls></audio>
- 재생버튼 없이 백그라운드에서 소리가 나게 한다.
- controls:재생버튼이 보이게 한다
▶ 실습 4) 비디오 삽입
<video src="img/flight.mp4" width="500" controls autoplay loop></video>
▶ [★정말 많이 사용★] 실습 5) 하이퍼링크 삽입
<a href="http://www.naver.com" target="_blank">네이버</a>
누르면 연결된 페이지를 띄운다.
- target="_blank" : 새로운 창에 연결된 페이지를 띄운다.
▶실습 6) 실습 파일을 이용한 하이퍼링크 삽입
<a href="first.html">첫번째 html 실습 파일</a>
▶ 실습 7) PDF 삽입
<object width="900" height="800" data="img/ch16.pdf"></object>
다음 학습
[HTML] 2 (25일차)
deliciouscode.tistory.com
