HTML, CSS/day23 / 23.09.25(월) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축
01_text
09_figure-tag.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>
<!--
# figure 태그
- 본문 내용안에 첨부자료를 표시하면서 설명글을 작성하기 위한 태그
# figcaption 태그
- figure 요소안에 제목을 붙일 때 사용
-->
<h2>figure 태그입니다</h2>
<br>
<figure>
<img src="../../image/img/onepice_poster.jpg" title="밀짚모자 해적단 포스터"
width="300px" height="320">
<figcaption>< 밀짚모자 해적단 현상금 ></figcaption>
</figure>
<figure>
<figcaption>< 밀짚모자 해적단 현상금 ></figcaption>
<img src="../../image/img/onepice_poster.jpg" title="밀짚모자 해적단 포스터"
width="300px" height="320">
</figure>
<br>
<h3>여러 이미지</h3>
<figure>
<img src="../../image/img/라이언_생각.png" title="라이언 생각" width="100px" height="100px">
<img src="../../image/img/라이언_장미.png" title="라이언 생각" width="100px" height="100px">
<img src="../../image/img/라이언_후드.png" title="라이언 생각" width="100px" height="100px">
<figcaption>[ 라이언 이미지 ]</figcaption>
</figure>
</body>
</html>10_imge-map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image-map</title>
</head>
<body>
<!--
# image map
- 하나의 이미지에 여러개의 링크를 적용할 때 사용
- img 태그
<img src="" usemap=""/>
* usemap : 이미지에서 map 을 사용 할 것이라고 브라우저에게 알려줌
- map 태그
<map name=""></map>
* name : map 태그에 붙이는 이름
- area 태그
- 이미지 안에 링크 활성화 지역 크기 설정
<area shape="" coords="" title="" href=""/>
* shape : 영역의 모양
default(이미지 전체), rect, circle, poly
* coords : map 좌표, shape 크기
rect - x1, y1, x2, y2 : 사각형 두 꼭지점의 위치(왼쪽위, 오른쪽 아래)
circle - x, y, radius : 원의 중싱좌표, 반지름
poly - x1, y1, x2, y2, ... : 3개 이상의 좌표
-->
<h2>image map</h2>
<br>
<img src="../../image/img/G20.jpg" usemap="#g20"/>
<map name ="g20">
<area shape="rect" coords="426, 342, 489,377" href="https://ko.wikipedia.org/wiki/대한민국"/>
<area shape="circle" coords="301, 197, 138" href="https://ko.wikipedia.org/wiki/G20"/>
<area shape="poly" coords="220, 17, 255, 52, 188, 52" href="https://ko.wikipedia.org/wiki/미국"/>
</map>
</body>
</html>11_ul-tag.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, ol, dl
# ul 태그
- 순서가 없는 목록을 만들때 사용하는 태그
> 글머리 기호를 붙여서 목록을 만듦
- type 속성을 사용해서 기홍를 설정할 수 있음
> disc, circle, square
# li 태그
- ul, ol 태그안에 목록을 작성하는 태그
-->
<h2>ul tag</h2>
<br>
<h3>disc</h3>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<br>
<h3>circle</h3>
<ul type="circle">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<br>
<h3>square</h3>
<ul type="square">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
</body>
</html>12_ol-tag.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>
<!--
# ol tag
- 순서가 있는 목록을 만들때 사용하는 태그
- type 속성을 사용해서 목록 형태를 지정할 수 있음
>1, 알파벳(A, a), 로마숫자(I, i)
-->
<h2>ol tag</h2>
<br>
<h3>숫자</h3>
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ol>
<br>
<h3>로마 숫자</h3>
<ol type="i">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ol>
<br>
<h3>알파벳</h3>
<ol type="A">
<li>항목 1</li>
<ul>
<li>목록</li>
<li>목록</li>
</ul>
<li>항목 2</li>
<li>항목 3</li>
</ol>
</body>
</html>13_dl-tag.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>
<!--
# dl tag
- 정의 목록을 만드는 태그
> dt : 용어의 제목을
dd : 용어에 대한 설명
-->
<h2>dl tag</h2>
<br>
<h3>disc</h3>
<dl>
<dt><b>정의 목록 태그</b></dt>
<dd>dd : 설명 목록을 위한 태그</dd>
<dd>dd 는 자동으로 들여쓰기 됨</dd>
</dl>
<br>
<dl>
<dt><b>< hTML ></b></dt>
<dd>마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함</dd>
<dt><b>< CSS ></b></dt>
<dd>HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정의</dd>
</dl>
</body>
</html>14_ul_ol_quiz.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>
<h2><b>에버랜드 이용 안내</b></h2>
<ul>
<li>안전하고 즐거운 이용을 위하여 아래 물품의 반입을 제한합니다.</li>
<li>동물에게 음식을 주거나 플래시를 켜고 촬영하지 마세요.</li>
<li>가지고 오신 도시락은 피크닉 영역에서 이용해 주세요.</li>
</ul>
<p>※ 대기 동선에서 기다리기 어려운 장애인 손님을 위하여 탑승 예약을 도와드리고 있으니 근무자에게 문의해 주시기 바랍니다.</p>
<br>
<h2><b>대중교통 정보</b></h2>
<ol>
<li><h3>지하철 이용</h3>
<p>에버라인 종점에 내려서 셔틀버스(무료)로 에버랜드,
<br>
캐리비안 베이까지 이동,
<br>
※ 에버라인 운행시간 : 05:30~23:30
</p>
<img src="./table_열차시간표.PNG">
</li>
<li><h3>버스 이용</h3>
<p>- 5002번 : 신논현역 - 강남역 - 양재역 경유
<br>
- 5700번 : 강변역 - 잠실역 - 송파역 - 수서역 경유
<br>
- 66-4번 : 수원역 - 수원 - 동백 - 용인 경유
</p>
</li>
</ol>
</body>
</html>02_table
15_table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table 태그</title>
</head>
<body>
<!--
# table 태그
- 표를 만드는 태그
- tr 태그 : row(행)을 만드는 태그
th 태그 : 테이블 헤더를 정의, 가운데 정렬, 진하게 속성 자동 부여
td 태그 : col(열)을 만드는 태그
# 테이블을 만드는 순서 :
- 테이블 선언
- 행(tr)지정
- 행을 셀(td)로 나누어 생성
# caption 태그
- 표에 제목을 넣어줄 때 사용
-->
<h2>테이블 태그</h2>
<br>
<h3>한행에 2개의 칸을 가진 테이블</h3>
<table border="9" width="300px">
<caption>< 세로 제목 ></caption>
<tr>
<th>이름</th><td>손흥민</td>
</tr>
<tr>
<th>소속팀</th><td>토트넘</td>
</tr>
</table>
<br>
<h3>한 행에 3개의 칸을 가진 테이블</h3>
<table border="1" width="300px">
<caption>< 가로 제목 ></caption>
<tr>
<th>이 름</th><th>능 력</th><th>현상금</th>
</tr>
<tr>
<td>루피</td><td>고무고무 열매</td><td>10억 베리</td>
</tr>
<tr>
<td>쵸파</td><td>럼블볼</td><td>3억 베리</td>
</tr>
</table>
<br>
<img src="../../image/img/onepice_poster.jpg">
</body>
</html>16_quiz_table.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>
<style>
table, td, th {
border : 1px solid black;
border-collapse : collapse;
};
</style>
<body>
<img src="../../image/img/table_열차시간표.PNG">
<table border="1px" width="350" height="150">
<caption><h3>KTX 열차 시간표</h3></caption>
<tr>
<th>출발</th><th>도착</th><th>객실</th><th>요금</th>
</tr>
<tr>
<td>서울(17:25)</td><td>부산(20:07)</td><td>일반실</td><td>50,800원</td>
</tr>
<tr>
<td>서울(18:00)</td><td>부산(20:35)</td><td>특실</td><td>83,700원</td>
</tr>
<tr>
<td>서울(18:15)</td><td>부산(20:50)</td><td>일반실</td><td>50,800원</td>
</tr>
</table>
</body>
</html>17_table-marge.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>셀 병합</title>
</head>
<style>
table, td, th {
border : 1px solid black;
border-collapse : collapse;
};
</style>
<body>
<!--
# 셀 병합
- 테이블의 셀과 셀을 합칠 수 있음
> rowspan : 셀을 세로로 합칠 때 사용
속성값으로 병합하고 싶은 행의 수를 지정
> colspan : 셀을 가로로 합칠 때 사용
속성값으로 병합하고 싶은 열의 수를 지정
-->
<table border="1px" style=" width:300px; text-align:center;">
<caption>< 행 병합 ></caption>
<tr>
<th>1열</th><th colspan="2">2열</th><th>3열</th>
</tr>
<tr>
<th>2행 1열</th><th>2행 2-1열</th><th>2행 2-2열</th>
</tr>
<tr>
<th>2행 2열</th>
</tr>
</table>
</body>
</html>18_quiz_table.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>
<style>
table, tr, th, td { border:1px solid #222; border-collapse:collapse; text-align:center;}
</style>
<body>
<!--
# img 폴더안의 'table_일기예보.png' 파일의 내용을 구현하세요
-->
<h3>img파일</h3>
<img src="../../image/img/table_일기예보.PNG">
<h3>table</h3>
<h3>일기예보</h3>
<table>
<tr>
<th rowspan="2" width="65" height="76">지역</th><th colspan="2" width="98">27일(목)</th><th colspan="2" width="98">28일(금)</th><th colspan="2" width="98">28일(토)</th>
</tr>
<tr>
<td>오전</td><td>오후</td><td>오전</td><td>오후</td><td>오전</td><td>오후</td>
</tr>
<tr>
<td height="59">서울<br>경기도</td><td><img src="../../image/img/shine.png"></td><td><img src="../../image/img/shine.png"></td><td><img src="../../image/img/shine.png"></td><td><img src="../../image/img/rain.png"></td><td><img src="../../image/img/rain.png"></td><td><img src="../../image/img/rain.png"></td>
</tr>
<tr>
<td height="51">제주도</td><td><img src="../../image/img/shine.png"></td><td><img src="../../image/img/shine.png"></td><td><img src="../../image/img/shine.png"></td><td><img src="../../image/img/rain.png"></td><td><img src="../../image/img/rain.png"></td><td><img src="../../image/img/rain.png"></td>
</tr>
</table>
</body>
</html>19_semantic-table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>semantic-table</title>
</head>
<body>
<!--
# 표 시멘틱 테이블
- 표의 구조를 제목, 본문, 요약 부분으로 나눔
- 시각 장애인도 화면 판독기를 사용해서 표의 구조를 쉽게 이해 가능
- thead : 표의 머릿말
- tbody : 표의 본문
- tfoot : 표의 꼬릿말
-->
<h2>시멘틱 테이블</h2>
<br>
<table border="1" style="width: 500px; text-align:center">
<caption>[ 시멘틱 테이블 ]</caption>
<thead>
<tr>
<th>태그 명칭</th><th>설 명</th><th>사용여부</th>
</tr>
</thead>
<tbody>
<tr>
<td>thead</td><td>표 머리말</td><td> 가능 </td>
</tr>
<tr>
<td>tbody</td><td>표 본문</td><td> 가능 </td>
</tr>
<tr>
<td>tfoot</td><td>표 꼬리말</td><td> 가능 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><a href="https://www.w3schools.com/">https://www.w3schools.com/</a></td>
</tr>
</tfoot>
</table>
</body>
</html>20_colgroup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table colgroup</title>
</head>
<body>
<!--
# colgroup tag
- 표에 하나 이상의 열을 그룹으로 지정할 때 사용
- colgroup 태그는 caption 태그 다음에 위치
# col 태그
- table 태그안에 열의 속성을 지정하는 colgroup 태그의 요소
-->
<h2>colgroup tag</h2>
<br>
<table border="1" style="width: 500px; text-align: center;">
<caption>colgroup</caption>
<colgroup>
<col style="width: 200px; background-color: aqua;">
<col span="2" style="background-color: magenta;">
<col style="width: 200px; background-color: lightgreen;">
</colgroup>
<tr style="height: 200px;">
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
<td>1행 4열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
<td>2행 4열</td>
</tr>
</table>
</body>
</html>21_quiz_table.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>
<style>
table, tr, th, td { border:1px solid #222; border-collapse:collapse; text-align:center;}
</style>
<body>
<h2>image</h2>
<img src="../../image/img/시간표.jpg">
<h2><table style="width: 510px; height: 720px;" >
<caption>
코드
</caption>
<thead style="background-color: white; ">
<tr>
<th colspan="6">시간표</th>
</tr>
</thead>
<thead style="background-color: rgb(213,220,228); ">
<tr>
<th></th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th>
</tr>
</thead>
<tbody>
<colgroup>
<col style="width: 85px; background-color:rgb(213,220,228);">
<col style="width: 85px; background-color:rgb(252,229,215);">
<col style="width: 85px; background-color:rgb(221,235,246);">
<col style="width: 85px; background-color:rgb(255,242,205);">
<col style="width: 85px; background-color:rgb(226,239,219);">
<col style="width: 85px; background-color:rgb(208,206,207);">
</colgroup>
<tr>
<td>9:00</td>
<td rowspan="3">전자계산기</td>
<td></td>
<td rowspan="3">자료구조</td>
<td></td>
<td rowspan="3">네트워크/통신</td>
</tr>
<tr>
<td>10:00</td>
<td rowspan="2">영어회와</td>
<td rowspan="2">경영론</td>
</tr>
<tr>
<td>11:00</td>
</tr>
<tr>
<td>12:00</td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>13:00</td>
<td rowspan="3">운영체제</td>
<td rowspan="2">이산수학</td>
<td rowspan="3">소프트웨어공학</td>
<td></td>
<td rowspan="3">프로그래밍 언어</td>
</tr>
<tr>
<td>14:00</td><td></td>
</tr>
<tr>
<td>15:00</td><td></td><td></td>
</tr>
</tbody>
</table></h2>
</body>
</html>21_quiz_table_T.html
<!-- 02_table/21_quiz_table.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>21_quiz_table</title>
</head>
<body>
<!--
# img 폴더안의 '시간표.jpg' 파일의 내용을 구현하세요
-->
<table border="1" style="width:400px; height: 500px; text-align: center;">
<caption>< 시간표 ></caption>
<colgroup>
<col style="width: 20%; background-color: #d5dce4;">
<col style="width: 15%; background-color: #fce5d7;">
<col style="width: 15%; background-color: #ddebf6;">
<col style="width: 15%; background-color: #fff2cd;">
<col style="width: 15%; background-color: #e2efdb;">
<col style="width: 15%; background-color: #d0cecf;">
</colgroup>
<thead style="height: 15%; background-color: #d5dce4">
<tr>
<th></th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00</td>
<td rowspan="3">전자<br/>계산<br/>기</td>
<td></td>
<td rowspan="3">자료<br/>구조</td>
<td></td>
<td rowspan="3">네트<br/>워크/<br/>통신</td>
</tr>
<tr>
<td>10:00</td>
<td rowspan="2">영어<br/>회화</td>
<td rowspan="2">경영<br/>론</td>
</tr>
<tr>
<td>11:00</td>
</tr>
<tr>
<td>12:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>13:00</td>
<td rowspan="3">운영<br/>체제</td>
<td rowspan="2">이산<br/>수학</td>
<td rowspan="3">소프<br/>트웨<br/>어공<br/>학</td>
<td></td>
<td rowspan="3">프로<br/>그래<br/>밍 언<br/>어</td>
</tr>
<tr>
<td>14:00</td>
<td></td>
</tr>
<tr>
<td>15:00</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>03_media
22_video.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>
<!--
# video 태그
- 웹페이지에서 영상을 재생할 때 사용하는 태그
- <video src="" width="" height="" type=""></video>
* src : 비디오 파일 경로 지정
width, height : 비디오 파일 크기 지정
type : 확장자에 따른 파일 type 지정
-->
<h2>video tag</h2>
<br>
<h3>기본 재생</h3>
<video src="../../image/media/Sample.mp4" width="400px" height="300px" type="vidop/mp4" controls></video>
<br>
<h3>자동 재생</h3>
<video src="../../image/media/Sample.mp4" width="400px" height="300px" type="vidop/mp4" controls autoplay muted></video>
<br>
<h3>브라우저 선택 재생</h3>
<video width="400px" height="300px" type="vidop/mp4" controls>
<source src="../../image/media/Sample.ogv" type="video/ogv">
<source src="../../image/media/Sample.mp4" type="video/mp4">
</video>
<br>
</body>
</html>23_audio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>audio tag</title>
</head>
<body>
<!--
# audio tag
- 웹페이지에서 오디오 파일을 재생할 때 사용
-->
<h2>video tag</h2>
<br>
<h3>기본 재생</h3>
<audio src="../../image/media/bear.mp3" type="audio/mp4" controls></audio>
<br>
<h3>자동 재생</h3>
<audio src="../../image/media/bear.mp3" type="audio/mp4" controls autoplay></audio>
<br>
<h3>브라우저 선택 재생</h3>
<audio type="vidop/mp4" controls>
<source src="../../image/media/Kalimba.ogg" type="audio/ogg">
<source src="../../image/media/Kalimba.mp3" type="audio/mp4">
</audio>
</body>
</html>24_iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe tag</title>
</head>
<body>
<!--
# iframe tag
- 웹페이지안에 다른 웹페이지를 표시
-->
<h2>iframe tag</h2>
<br>
<h3>기본</h3>
<iframe src="https://velog.io/@bh7852" width="100%" height="500px"></iframe>
<br>
<h3>youtube 링크</h3>
<iframe width="500px" height="400px" src="https://www.youtube.com/embed/vo-cr_6RuAQ?si=uixVhb--W10B5P5t"></iframe>
<br>
<h3>페이지 링크</h3>
<a href="https://www.youtube.com/embed/QW7EClanDmA?si=7kl1-xnSsvtL9Bph" target="fubao">푸바옹</a>
<br>
<iframe name="fubao" width="500px" height="400px"></iframe>
</body>
</html>
Fintech