1) fontstyle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 내부 스타일 시트 -->
<style>
body {
font-family: "나눔고딕","맑은 고딕",sans-serif;
color: #2d2d2d;
font-size: 30px;
}
div { color: rgb(255, 0, 0);}
.box {text-indent: 50px; box-shadow: 2px 2px 5px rgba(0, 0,0, 0.5);}
#box3 {letter-spacing: 10px; font-style: italic; font-weight: bold;}
#box4{text-shadow: 0px 10px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div>div1 입니다.</div>
<div class="box">div2 입니다.</div>
<div id="box3" style="color: pink;">div3 입니다.</div>
<div id="box4"><h3>text transform</h3></div>
</body>
</html>
2) box.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div { width: 500px; height: 200px; border-top: 3px solid #ccc; margin: 20px auto;
border-bottom-style: dashed;
}
/* ※(auto : 자동맞춤, width와 무조건 같이 써야함) */
#box1 { background: lightblue; padding: 20px;}
#box2 { background: lightcoral;}
#box3 { background: lightgoldenrodyellow;}
</style>
</head>
<body>
<div id="box1">box1입니다.</div>
<div id="box2">box2입니다.</div>
<div id="box3">box3입니다.</div>
</body>
</html>3) table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table { border-collapse: collapse;}
td { border: 1px solid #ccc; padding: 10px;}
.left_none { border-left: none;}
</style>
</head>
<body>
<table>
<tr>
<td class="left_none">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
</body>
</html>4) 예제1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 우선 순위가 무엇인지 그에 따라 어디에 적용이 되는지 조심하자! */
/* 연습1
#ulsanTable {
border-top: 2px solid #a4a4a4;
border-collapse: collapse;
}
th {border: 1px solid #ccc; padding: 20px;
background: #f8f8f8;
font-weight: bold;}
td {border: 1px solid #ccc; padding: 20px;
text-align: center; font-size: 15px;
}
.left_none {border-left: none;}
.right_none {border-right: none;} */
#ulsanTable {
width: 1000px;
margin: 0 auto;
border-top: 3px solid #444;
border-collapse: collapse;
}
#ulsanTable td {
border-bottom: 1px solid #666;
border-right: 1px solid #666;
padding: 20px;
}
#ulsanTable th {
border-bottom: 1px solid #666;
border-right: 1px solid #666;
padding: 20px;
background: #eee;
}
#ulsanTable .right_none {
border-right: none;
}
</style>
</head>
<body>
<h1>교내장학 - 기타장학(학생 신청 장학)</h1>
<table id="ulsanTable">
<tr>
<th class="left_none">장학명</th>
<th>신청시기</th>
<th>신청방법</th>
<th class="right_none">제출서류</th>
</tr>
<tr>
<td class="left_none">복지장학</td>
<td rowspan="4">12월 / 6월</td>
<td rowspan="5">uwins - 장학신청<br><br>(매학기 신청)</td>
<td class="right_none">장애인증명서/가족관계증명서</td>
</tr>
<tr>
<td class="left_none">공무원본인장학</td>
<td class="right_none">재직증명서</td>
</tr>
<tr>
<td class="left_none">행복나눔명예장학</td>
<td class="right_none">신청서</td>
</tr>
<tr>
<td class="left_none">행복나눔장학</td>
<td class="right_none">신청서</td>
</tr>
<tr>
<td class="left_none">가족장학</td>
<td>5월 / 11월</td>
<td class="right_none">가족관계증명서</td>
</tr>
<tr>
<td class="left_none">국가유공자본인장학</td>
<td rowspan="3">입학금<br>납부 전</td>
<td rowspan="2">학생복지팀 제출</td>
<td class="right_none">교육지원대상자증명서</td>
</tr>
<tr>
<td class="left_none">국가유공자자녀장학</td>
<td class="right_none">대학수업료등 면제대상자증명서</td>
</tr>
<tr>
<td class="left_none">교직원자녀장학 (교직원이 신청)</td>
<td>UWIN-원스탑</td>
<td class="right_none">신청서, 재직증명서, 가족관계증명서</td>
</tr>
</table>
</body>
</html>
'노력이 좋아서' 카테고리의 다른 글
| <step14>'css_boxsize, select_link' (0) | 2022.04.07 |
|---|---|
| <step14>'html_markup' (0) | 2022.04.07 |
| <step12> 'html_div/ form/ select/ input' (0) | 2022.04.05 |
| <step11> 'html_ul/ ol/ table/ img/ video' (0) | 2022.04.04 |
| <step10> '웹 시안, 앱 시안' (1) | 2022.04.01 |