HTML, CSS/day27 / 23.10.05(목) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축
08_position
01_relative.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>
<!--
# position
- 박스의 위치를 지정할 때 사용
- static : 기본
- absolute : 절대 배치. 원래 위치에서 따로 떼어내서 독립적으로 새로운 위치를 지정
left, right, top, bottom 속성으로 위치 지정
- relative : 상대 배치, left, top 속성으로 이동
absolute 로 지정된 요소의 부모요소가 될 수 있음
- fixed : 고정. screen 기준
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
border: 1px solid black;
width: 200px;
height: 200px;
margin: 50px;
}
.r_box {
border: 1px solid red;
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 10px;
left: 100px;
}
</style>
</head>
<body>
<h1>relative</h1>
<br>
<div class="parent">
<div class="r_box">relative box</div>
</div>
</body>
</html>02_absolute.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>
<!--
# absolute 속성은 부모에게 static 이외의 position 속성이 지정되어 있을 경우에만 부모를 기준으로 위치함
- absolute의 부모는 static이 될 수 없음
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
width: 200px;
height: 200px;
}
.parent {
margin: 50px;
background-color: gray;
}
.r_box {
background-color: red;
position: relative;
top: 20px;
left: 50px;
}
.a_box {
background-color: blue;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<h1>absolute</h1>
<br>
<div class="parent">
<div class="a_box">relative box</div>
</div>
<br>
<div class="parent">
<div class="r_box">relative box
<div class="a_box">relative box</div>
</div>
</div>
</body>
</html>03_z-index.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>
<!--
# z-index
- position 속성에서 요소들의 계층을 변경할 때 사용
숫자가 클수록 위로 올라가고, 작을수록 아래로 내려감
> -1 을 사용하면 가장 바닥으로 배치
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.base {
border: 1px solid black;
}
div {
width: 200px;
height: 200px;
margin: 20px;
position: absolute;
}
.box_a {
background-color: red;
top: 50px;
left: 50px;
z-index: 3;
}
.box_b {
background-color: green;
top: 100px;
left: 150px;
z-index: 1;
}
.box_c {
background-color: blue;
top: 150px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<h1>z-index</h1>
<br>
<div class="base">
<div class="box_a"> box a</div>
<div class="box_b"> box b</div>
<div class="box_c"> box c</div>
</div>
</body>
</html>04_overflow.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>
<!--
# overflow
- 내용이 요소의 크기를 벗어났을때 어떻게 처리할지를 결정
> visible : 영역을 벗어난 부분을 표시(기본)
hidden : 영역을 벗어난 부분을 잘라내서 보이지 않게 함
scroll : 영역을 벗어난 부분이 없어도 스크롤을 표시
auto : 영역을 벗어난 부분이 있을때만 스크롤을 표시
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: silver;
margin-right: 10px;
display: inline-block;
}
.visible{
overflow: visible;
}
.hedden{
overflow: hidden;
}
.scroll{
overflow: scroll;
}
.auto{
overflow: auto;
}
</style>
</head>
<body>
<h1>overflow</h1>
<br>
<div class="visible">
<p>
내용이 요소의 크기를 벗어났을때 어떻게 처리할지를 결정
> visible : 영역을 벗어난 부분을 표시(기본)
hidden : 영역을 벗어난 부분을 잘라내서 보이지 않게 함
scroll : 영역을 벗어난 부분이 없어도 스크롤을 표시
auto : 영역을 벗어난 부분이 있을때만 스크롤을 표시
</p>
</div>
<div class="hidden">
<p>
내용이 요소의 크기를 벗어났을때 어떻게 처리할지를 결정
> visible : 영역을 벗어난 부분을 표시(기본)
hidden : 영역을 벗어난 부분을 잘라내서 보이지 않게 함
scroll : 영역을 벗어난 부분이 없어도 스크롤을 표시
auto : 영역을 벗어난 부분이 있을때만 스크롤을 표시
</p>
</div>
<div class="scroll">
<p>
내용이 요소의 크기를 벗어났을때 어떻게 처리할지를 결정
> visible : 영역을 벗어난 부분을 표시(기본)
hidden : 영역을 벗어난 부분을 잘라내서 보이지 않게 함
scroll : 영역을 벗어난 부분이 없어도 스크롤을 표시
auto : 영역을 벗어난 부분이 있을때만 스크롤을 표시
</p>
</div>
<div class="auto">
<p>
내용이 요소의 크기를 벗어났을때 어떻게 처리할지를 결정
> visible : 영역을 벗어난 부분을 표시(기본)
hidden : 영역을 벗어난 부분을 잘라내서 보이지 않게 함
scroll : 영역을 벗어난 부분이 없어도 스크롤을 표시
auto : 영역을 벗어난 부분이 있을때만 스크롤을 표시
</p>
</div>
</body>
</html>05_ex-position.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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
font-family: "돋움", sans-serif;
}
li{
list-style: none;
}
h1{
margin: 20px;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active, a:focus{
text-decoration: underline;
}
/* 공지사항 */
.tab {
border: 1px solid red;
width: 400px;
margin-left: 20px;
position: relative;
}
.tab h3 {
background: url(../../image/position_image/tab_bg.gif) no-repeat 0 0;
background-size: 400px 40px;
height: 40px;
padding: 10px 0 0 20px;
font-weight: bold;
font-size: 20px;
}
.tab li {
background: url(../../image/position_image/news_list.gif) no-repeat 10px 50%;
padding-left: 15px;
line-height: 22px;
font-weight: bold;
}
.tab li span {
position: absolute;
right: 4px;
font-weight: bold;
}
.more{
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<h1>ex position</h1>
<br>
<div class="tab">
<h3>공지사항</h3>
<ul>
<li><a href="#">웹 접근성 품질 마크...</a><span>2023-10-05</span></li>
<li><a href="#">웹 접근성 품질 마크...</a><span>2023-10-05</span></li>
<li><a href="#">웹 접근성 품질 마크...</a><span>2023-10-05</span></li>
<li><a href="#">웹 접근성 품질 마크...</a><span>2023-10-05</span></li>
</ul>
<p class="more">
<a href="#"><img src="../../image/position_image/more.gif" /></a>
</p>
</div>
</body>
</html>06_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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
font-family: "돋움", sans-serif;
}
li{
list-style: none;
}
a:link, a:visited {
text-decoration: none;
color: black;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
.board{
width: 400px;
margin-left: 20px;
position: relative;
}
.board h3 {
height: 25px;
}
.board li{
font-family: "굴림", sans-serif;
font-size: 13px;
line-height: 20px;
}
.question{
background: url(../../image/position_image/icon01.gif) no-repeat 0 50%;
padding-left: 40px;
}
.answer{
background: url(../../image/position_image/icon02.gif) no-repeat 0 50%;
padding-left: 40px;
}
.board li span {
position: absolute;
right: 10px;
}
.more a{
position: absolute;
top: 5px;
right: 10px;
font-size: 5px;
color: #ff781f;
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="board">
<h3><img src="../../image/position_image/qna_title.gif" alt="온라인 상담 게시판"></h3>
<ul>
<li class="question"><a href="#">웹퍼블리셔 배우고 싶어요..</a><span>2023-02-23</span></li>
<li class="answer"><a href="#">안녕하세요.문의하신 과정이..</a><span>2023-02-23</span></li>
<li class="question"><a href="#">사직서 낸날 등록 가능한가여</a><span>2023-02-23</span></li>
<li class="answer"><a href="#">안녕하세요. 개인적으로 듣는 경..</a><span>2023-02-23</span></li>
<li class="question"><a href="#">과정관련 문의</a><span>2023-02-23</span></li>
</ul>
<p class="more"><a href="#" title="온라인 상담 게시판 더보기">more ></a></p>
</div>
</body>
</html>06_quizT.html
<!-- 08_position/08-6_Quiz_온라인상담.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08-6_Quiz_온라인상담</title>
<!--
# Quiz_온라인상담.jpb 파일의 내용을 구현하세요
-->
<style type="text/css">
* { margin: 0; padding: 0; }
body {
font-family: "돋움", sans-serif;
}
li {
list-style: none;
}
a:link, a:visited {
color: #333333;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
/* 온라인 상담 게시판 */
.board {
border: 1px solid red;
width: 500px;
margin: 30px;
position: relative;
}
.board h3 {
margin: 10px;
}
.board img {
width: 150px;
height: 20px;
}
.board li {
padding-left: 50px;
margin-bottom: 10px;
}
.board li span {
position: absolute;
right: 10px;
color: #333333;
}
.board .question {
background: url("../../image/position_image/icon01.gif") no-repeat 10px 2px;
}
.board .answer {
background: url("../../image/position_image/icon02.gif") no-repeat 10px 2px;
}
.board .more {
position: absolute;
top: 10px;
right: 10px;
}
.board .more a {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<div class="board">
<h3><img src="../../image/position_image/qna_title.gif" alt="온라인 상담 게시판"></h3>
<ul>
<li class="question"><a href="#">웹퍼블리셔 배우고 싶어요..</a><span>2023-02-23</span></li>
<li class="answer"><a href="#">안녕하세요.문의하신 과정이..</a><span>2023-02-23</span></li>
<li class="question"><a href="#">사직서 낸날 등록 가능한가여</a><span>2023-02-23</span></li>
<li class="answer"><a href="#">안녕하세요. 개인적으로 듣는 경..</a><span>2023-02-23</span></li>
<li class="question"><a href="#">과정관련 문의</a><span>2023-02-23</span></li>
</ul>
<p class="more"><a href="#" title="온라인 상담 게시판 더보기">more ></a></p>
</div>
</body>
</html>09_table
01_CSS-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>
<!--
# border-collapse
- 테두리 사이의 간격을 없애고, 한 줄로 만듬
# text-align
- 테이블 셀의 내용을 가로 정렬
- left, center, right
# vertical-align
- 테이블 셀의 내용을 세로 정렬
- top, bottom
# 테두리와 내용 사이의 간격은 padding 속성을 사용해서 조절
-->
<style type="text/css">
/* 한 줄 선 테이블 */
.single, .single th, .single td {
border: 1px solid black;
border-collapse: collapse;
}
.single {
width: 300px;
height: 120px;
}
.single td{
text-align: center;
}
/* 가로선 테이블 */
.h_line {
width: 300px;
height: 120px;
border-collapse: collapse;
}
.h_line th {
border-top: 3px solid black;
border-bottom: 3px solid black;
}
.h_line td {
border-bottom: 1px solid black;
text-align: center;
}
/* 가로선 테이블 */
.in_line{
width: 300px;
height: 120px;
border-top: 3px solid black;
border-collapse: collapse;
}
.in_line th , .in_line td {
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
}
.in_line th:first-child, .in_line td:first-child{
border-left: none;
}
/* cell 간격 */
.cell {
width: 300px;
height: 120px;
border: 1px solid black;
border-collapse: collapse;
background-color: #EEEEEE;
}
.cell th, .cell td {
border: 1px solid black;
text-align: center;
}
.cell th:first-child {
width: 100px;
height: 40px;
}
.cell th:last-child {
width: 150px;
}
</style>
</head>
<body>
<h1>한줄선 테이블</h1>
<table class="single">
<tr>
<th>제목 1</th><th>제목 2</th><th>제목 3</th>
</tr>
<tr>
<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
</tr>
<tr>
<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
</tr>
</table>
<hr>
<table class="h_line">
<tr>
<th>제목 1</th><th>제목 2</th><th>제목 3</th>
</tr>
<tr>
<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
</tr>
<tr>
<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
</tr>
</table>
<hr>
<table class="in_line">
<tr>
<th>제목 1</th><th>제목 2</th><th>제목 3</th>
</tr>
<tr>
<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
</tr>
<tr>
<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
</tr>
</table>
<hr>
<h1>cell 간격</h1>
<table class="cell">
<tr>
<th>제목 1</th><th>제목 2</th><th>제목 3</th>
</tr>
<tr>
<td>내용 1-1</td><td>내용 2-1</td><td>내용 3-1</td>
</tr>
<tr>
<td>내용 1-2</td><td>내용 2-2</td><td>내용 3-2</td>
</tr>
</table>
<hr>
</body>
</html>02_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>
<style type="text/css">
.main {
width: 300px;
height: 180px;
border-collapse: collapse;
background-color: #a9a9a9;
text-indent: 5px;
}
.main th {
color: #ffff00;
text-align: left;
}
.main tr:nth-child(3), .main tr:nth-child(5) {
background-color: #f0f8ff;
}
.main tr:nth-child(2), .main tr:nth-child(4) {
background-color: #ffffff;
}
.main tr:last-child {
color: #ffff00;
font-weight: bold;
}
</style>
</head>
<body>
<h2>1학기 성적</h2>
<hr>
<table class="main">
<tr>
<th>이름</th><th>HTML</th><th>CSS</th>
</tr>
<tr>
<td>루피</td><td>80</td><td>70</td>
</tr>
<tr>
<td>조로</td><td>95</td><td>99</td>
</tr>
<tr>
<td>나미</td><td>85</td><td>90</td>
</tr>
<tr>
<td>초파</td><td>50</td><td>40</td>
</tr>
<tr>
<td>합</td><td>310</td><td>249</td>
</tr>
</table>
</body>
</html>02_quizT.html
<!-- 09_table/09-2_Quiz_CSS-table.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-2_Quiz_CSS-table</title>
<!--
# Quiz_css-table.png 파일의 내용을 구현하세요
-->
<style type="text/css">
table {
border-collapse: collapse;
font-size: 24px;
}
th, td {
width: 140px;
height: 50px;
text-align: left;
}
thead, tfoot {
color: yellow;
background-color: silver;
}
tbody tr:nth-child(odd) {
background-color: #FFFFFF;
}
tbody tr:nth-child(even) {
background-color: #F0F8FF;
}
</style>
</head>
<body>
<h1>1학기 성적</h1>
<hr/>
<table>
<thead>
<tr>
<th> 이름 </th><th> HTML </th><th> CSS </th>
</tr>
</thead>
<tbody>
<tr>
<td> 루피 </td><td> 80 </td><td> 70 </td>
</tr>
<tr>
<td> 조로 </td><td> 80 </td><td> 98 </td>
</tr>
<tr>
<td> 초파 </td><td> 85 </td><td> 90 </td>
</tr>
<tr>
<td> 로빈 </td><td> 100 </td><td> 95 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> 합 </td><td> 345 </td><td> 353 </td>
</tr>
</tfoot>
</table>
</body>
</html>10_form
01_login.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>
<style type="text/css">
#col_1 {
width: 80px;
}
input {
width: 150px;
height: 24px;
}
button{
padding: 20px 20px;
margin-left: 2px;
}
</style>
</head>
<body>
<h1>로그인 폼</h1>
<form action="">
<table>
<tr>
<td id="col_1"> 아이디 </td>
<td><input type="text"></td>
<td rowspan="2"><button>로그인</button></td>
</tr>
<tr>
<td> 비밀번호 </td>
<td><input type="password"></td>
</tr>
</table>
</form>
</body>
</html>02_membership.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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
h1, #join ,#buttons{
margin: 20px 0 0 30px;
}
#join{
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
width: 600px;
padding: 20px;
}
.cols {
padding: 5px;
}
.cols li {
display: inline-block;
}
.col_1 {
width: 120px;
vertical-align: top;
}
.col_2 input, select, .email input{
width: 200px;
height: 28px;
}
textarea {
width: 430px;
height: 100px;
resize: none;
}
.hello {
vertical-align: top;
}
#buttons {
width: 583px;
text-align: right;
}
#buttons button {
padding: 10px 20px;
margin-top: 20px 0 0 4px;
}
</style>
</head>
<body>
<h1>회원가입 폼</h1>
<form>
<ul id="join">
<li>
<ul class="cols">
<li class="col_1">아이디</li>
<li class="col_2"><input type="text"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">비밀번호</li>
<li class="col_2"><input type="password"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">비밀번호 확인</li>
<li class="col_2"><input type="password"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">이름</li>
<li class="col_2"><input type="text"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">email</li>
<li class="email"><input type="text"> @ </li>
<li>
<select>
<option value="">직접 입력</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
</select>
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">이메일 수신</li>
<li>
<input type="radio" name="email" checked/> 비수신
<input type="radio" name="email"> 비수신
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">가입 경로</li>
<li>
<input type="checkbox" name="notice1"/> 추천
<input type="checkbox" name="notice2"/> 인터넷
<input type="checkbox" name="notice3" checked/> 기타
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">가입 인사</li>
<li><textarea cols="30" rows="10"></textarea></li>
</ul>
</li>
</ul> <!-- // #join -->
<div id="buttons">
<button type="submit">저장하기</button>
<button type="reset">취소하기</button>
</div>
</form>
</body>
</html>03_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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h3 {
margin: 5px;
}
table {
width: 500px;
margin: 10px;
border-collapse: collapse;
}
thead tr {
border-top: 3px solid black;
}
tr {
height: 40px;
border-bottom: 1px solid gray;
}
thead td:first-child {
width: 100px;
}
input {
width: 388px;
}
textarea {
width: 390px;
height: 80px;
}
table tr:nth-child(2) {
height: 100px;
}
#buttons {
width: 500px;
text-align: right;
}
button {
padding: 3px 6px 3px 6px;
}
tbody tr:first-child input{
height: 20px;
}
</style>
</head>
<body>
<h3>게시판 글쓰기 폼</h3>
<table>
<thead>
<tr>
<td class="col1">이름</td>
<td>홍길동</td>
</tr>
</thead>
<tbody>
<tr>
<td>제목</td>
<td><input type="text"></td>
</tr>
<tr>
<td>글 내용</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>파일</td>
<td><input type="file"></td>
</tr>
</table>
</tbody>
<div id="buttons">
<button>저장하기</button> <button>목록보기</button>
</div>
</body>
</html>03_quizT.html
<!-- 10_form/10-3_Quiz_게시판 글쓰기 폼.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10-3_Quiz_게시판 글쓰기 폼</title>
<!--
Quiz_게시판 글쓰기 폼.png 파일의 내용을 구현하세요
-->
<style type="text/css">
table {
border-collapse: collapse;
border-top: 3px solid black;
}
td {
border-bottom: 1px solid #CCCCCC;
padding: 10px;
}
.col1 {
width: 100px;
}
input {
width: 400px;
height: 24px;
}
textarea {
width: 400px;
height: 100px;
}
#buttons {
width: 540px;
text-align: right;
margin-top: 10px;
}
button {
padding: 4px 20px;
margin-left: 4px;
}
</style>
</head>
<body>
<h3>게시판 글쓰기 폼</h3>
<table>
<tr>
<td class="col1">이름</td>
<td>홍길동</td>
</tr>
<tr>
<td>제목</td>
<td><input type="text"></td>
</tr>
<tr>
<td>글 내용</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>파일</td>
<td><input type="file"></td>
</tr>
</table>
<div id="buttons">
<button>저장하기</button> <button>목록보기</button>
</div>
</body>
</html>
Fintech