์‹ค์Šต ๋กœ๊ทธ์ธ์ฐฝ, ๊ฒŒ์‹œํŒ, ํšŒ์›๊ฐ€์ž…์ฐฝ ๋งŒ๋“ค๊ธฐ

2023. 2. 9. 17:01ใ†CSS

๋กœ๊ทธ์ธ์ฐฝ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
background-color: #f2f2f2;
/* div์˜ ๋„ˆ๋น„ ์ค„์ด๊ธฐ */ /* ํฌ๊ธฐ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•˜๋‚˜ ํ•œ ์ค„ ์ฐจ์ง€ ์„ฑ์งˆ์€ ๊ทธ๋Œ€๋กœ ์œ ์ง€!!! */
width : 400px; /* ์„ธ๋กœ ๊ธธ์ด๋Š” ๋‚ด์šฉ๋งŒํผ ์ž๋™ ๋„“์–ด์ง */
/* padding : div ๊ธฐ์ค€์œผ๋กœ ์•ˆ ์ชฝ ์—ฌ๋ฐฑ ์ง€์ • */
/* padding-left: 30px; */
/* magin : div ๊ธฐ์ค€์œผ๋กœ ๋ฐ”๊นฅ์ชฝ ์—ฌ๋ฐฑ ์ง€์ • */
/* margin-top: 50px; */
/* ๊ทธ๋ƒฅ margin ์–‘์ชฝ ๋ฐฉํ–ฅ ๋ชจ๋‘ ์กฐ์ • ๊ฐ€๋Šฅ(๊ฐ€๋กœ) */
margin: 0 auto; /* margin : ์ƒํ•˜์—ฌ๋ฐฑ ์ŠคํŽ˜์ด์Šค ์ขŒ์šฐ์—ฌ๋ฐฑ(์˜คํ† ๋Š” ๊ฐ™์€ ๊ฐ’? ์คŒ) > ๊ฐ€์šด๋ฐ ์ •๋ ฌ */
margin-top: 50px;
padding-top: 50px;
padding-bottom: 50px;
/* ํ”ฝ์…€์ˆ˜๊ฐ€ ๋†’์•„์ง€๋ฉด ๋” ๋‘ฅ๊ธ€์–ด์ง */
border-radius: 10px;
}
table{
/* border: 1px solid black;
border-collapse: collapse; /* ๊ฒน์น˜๋Š” ๋ถ€๋ถ„ ์ด์ค‘์„  ์—†์•จ ์ˆ˜ ์žˆ์Œ */
width: 350px;
margin: 0 auto;
text-align: center; /* ๊ธ€์ž ์ •๋ ฌ */
}
/* ๊ฐ™์€ ์†์„ฑ์„ ์ค„ ๋•Œ๋Š” ,๋กœ ๋™์‹œ์— ํƒœ๊ทธ์„ ํƒ์ž ์„ ํƒ ๊ฐ€๋Šฅ */
tr, td{
/* border: 1px solid black; */
}
</style>
</head>
<body>
<div class="container">
<table>
<colgroup>
<!-- ํ…Œ์ด๋ธ”์˜ ์—ด์˜ ํฌ๊ธฐ๋Š” ์œ„์—์„œ ์ง€์ •ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— %๋กœ ์ง€์ • ๊ฐ€๋Šฅ -->
<col width="30%"> <!-- col ๋‹ซ๋Š” ํƒœ๊ทธ ์—†์Œ ์ฒซ๋ฒˆ์งธ ์—ด-->
<col width="70%"> <!-- ๋‘๋ฒˆ์งธ ์—ด -->
</colgroup>
<tr>
<td>I D</td>
<td>
<input type="text" placeholder="Input your ID">
</td>
</tr>
<tr>
<td>P W</td>
<td>
<input type="text" placeholder="Input your PASSWORD">
</td>
</tr>
<tr>
<td colspan="2">
<a href="board_1.html">LOGIN</a>
<a href="join.html">JOIN</a>
</td>

</tr>
</table>
</div>
</body>
</html>

๋กœ๊ทธ์ธ ๋ˆ„๋ฅด๋ฉด ๊ฒŒ์‹œํŒ์œผ๋กœ ์ด๋™

์กฐ์ธ ๋ˆ„๋ฅด๋ฉด ํšŒ์›๊ฐ€์ž…์ฐฝ์œผ๋กœ ์ด๋™

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
width:700px;
margin: 0 auto;
margin-top: 70px;
}
table{
/* border: 1px solid balck; */
border-collapse: collapse;
width: 700px; /* ํ…Œ์ด๋ธ”์— ๋„ˆ๋น„๋งŒ ์ฃผ๋ฉด ์ƒ˜ํ”Œ๊ฒŒ์‹œํŒ๊ณผ ์•ˆ ๋งž๊ธฐ ๋•Œ๋ฌธ์— ์ปจํ…Œ์ด๋„ˆ ํฌ๊ธฐ์™€ ๊ฐ™๊ฒŒ */
}
thead > tr{
font-weight: bold;
text-align: center;
height: 30px;
background-color: #FFFBF5;

}
thead > tr > td{
border-top: 3px solid #f3f3f3;
border-bottom: 2px solid #f0f0f0;
}
tbody > tr{
text-align: center;
height: 24px;

}
tbody > tr:nth-child(even){
background-color: #f1f1f1
}
tbody > tr > td:nth-child(2) {
text-align: left;
color: blue;

}
tbody > tr > td{ /* ๋‚ด์šฉ tr์— ๋งˆ์šฐ์Šค ์˜ฌ๋ฆฌ๋ฉด ๋””์ž์ธ ์ ์šฉ */
border-bottom: 2px solid #f0f0f0;
}
tbody > tr:hover {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class ="container">
<div>
<h1>์ƒ˜ํ”Œ ๊ฒŒ์‹œํŒ</h1>
</div>
<div>
<table>
<colgroup>
<col width="10%">
<col width="*"> <!-- *์ฐ์œผ๋ฉด ๋‚˜๋จธ์ง€ ํผ์„ผํŠธ ๋งž์ถฐ์คŒ -->
<col width="10%">
<col width="15%">
<col width="10%">
<col width="10%">
</colgroup>
<thead>
<tr>
<td>๋ฒˆํ˜ธ</td>
<td>์ œ๋ชฉ</td>
<td>์ž‘์„ฑ์ž</td>
<td>๋‚ ์งœ</td>
<td>์กฐํšŒ์ˆ˜</td>
<td>๋Œ“๊ธ€์ˆ˜</td>
</tr>
</thead>
<tbody>
<tr>
<td>165</td>
<td>์ž…๋ฌธ์ž </td>
<td>admin</td>
<td>2013.06.21</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>165</td>
<td>์›น์‚ฌ์ดํŠธ</td>
<td>admin</td>
<td>2013.06.21</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>165</td>
<td>์•ˆ๋…•ํ•˜์„ธ์š”</td>
<td>admin</td>
<td>2013.06.21</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>165</td>
<td>์›Œ๋“œํ”„๋ ˆ์Šค</td>
<td>admin</td>
<td>2013.06.21</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>165</td>
<td>์ƒˆ ์Šคํ‹ฐ์ปค ์ƒํ’ˆ์ด ์ถœ์‹œ๋˜์—ˆ๋„ค์š”~</td>
<td>admin</td>
<td>2013.06.21</td>
<td>2</td>
<td>0</td>
</tr>

</tbody>
</table>
</div>
</div>
<!-- aํƒœ๊ทธ๋Š” ํƒœ๊ทธ๋„ ๊ฐ์Œ€ ์ˆ˜ ์žˆ๋‹ค. ๊ธ€์ž๋งŒ ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ ์•„๋‹˜! ๊ทธ๋Ÿฌ๋‚˜ aํƒœ๊ทธ ์•ˆ ์”€ -->
<!-- <a href="test1_1.html"><input type="button" value="๋’ค๋กœ๊ฐ€๊ธฐ"></a> -->
<input type="button" value="๋’ค๋กœ๊ฐ€๊ธฐ" onclick="location.href='test1_1.html';">
<input type="button" value="๋’ค๋กœ๊ฐ€๊ธฐ" onclick="alert(5);">
<!-- ๋ฒ„ํŠผ ํด๋ฆญํ•˜๋ฉด ๋ญํ• ์ง€ ์˜จํด๋ฆญ์— ๋„ฃ์–ด์คŒ -->
</body>
</html>

๊ฒŒ์‹œํŒ

์ฒซ๋ฒˆ์งธ ๋’ค๋กœ๊ฐ€๊ธฐ > ๋กœ๊ทธ์ธ์ฐฝ์œผ๋กœ ๋Œ์•„๊ฐ

๋‘๋ฒˆ์งธ ๋’ค๋กœ๊ฐ€๊ธฐ > ๋ฉ”์„ธ์ง€ ๋œจ๊ฒŒ ํ•˜๋Š” ๊ฒƒ 

 

ํšŒ์›๊ฐ€์ž…

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border: 2px solid black;
border-collapse: collapse;
margin: 0 auto;
}
tr, td{
border: 2px solid black;
}
td:nth-child(1) {
font-weight: bold;
text-align: center;
}
tr:nth-child(7){
background-color: #cee3f6;
}
tr:nth-child(1){
background-color: #cee3f6;
}
.redFont{
color: red;
text-align: right;
font-style: italic;
}
span{
color: red;
font-size: 14px;


}
textarea {
resize: none;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td colspan="2">
<span class="redFont">*(ํ•„์ˆ˜์ž…๋ ฅ)</span>
ํšŒ์›๊ธฐ๋ณธ์ •๋ณด
</td>
</tr>
<tr>
<td><span>*</span>์•„์ด๋””:</td>
<td>
<input type="text" placeholder="4~12์˜ ์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž,์ˆซ์ž๋งŒ ์ž…๋ ฅ">
<input type="button" value="์•„์ด๋”” ๊ฒ€์‚ฌ">
</td>
</tr>
<tr>
<td><span>*</span>๋น„๋ฐ€๋ฒˆํ˜ธ:</td>
<td><input type="password"> 4~12์ž์˜ ์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž์™€ ์ˆซ์ž๋กœ๋งŒ ์ž…๋ ฅ</td>
<tr>
<td><span>*</span>๋น„๋ฐ€๋ฒˆํ˜ธํ™•์ธ:</td>
<td>
<input type="password">
<input type="button" value="๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ">
</td>
</tr>
<tr>
<td><span>*</span>๋ฉ”์ผ์ฃผ์†Œ:</td>
<td>
<input type="text">
<input type="button" value="๋ฉ”์ผ ํ™•์ธ">
์˜ˆ) id@domain.com
</td>
</tr>
<tr>
<td><span>*</span>์ด๋ฆ„:</td>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2">๊ฐœ์ธ ์‹ ์ƒ ์ •๋ณด</td>


</tr>
<tr>
<td><span>*</span>์ฃผ๋ฏผ๋“ฑ๋ก๋ฒˆํ˜ธ:</td>
<td>
<input type="text">-<input type="text">
<input type="button" value="ํ™•์ธ">
์˜ˆ) 123456-1234567
</td>
</tr>
<tr>
<td>์ƒ์ผ:</td>
<td>
<input type="text">๋…„ <input type="text">์›”
<input type="text">์ผ
</td>
</tr>
<tr>
<td>์ฃผ์†Œ:</td>
<td>
<input type="text">
<input type="button" value="์šฐํŽธ๋ฒˆํ˜ธ์ฐพ๊ธฐ"><br>
<input type="text"> <input type="text">
</td>
</tr>
<tr>
<td>๊ด€์‹ฌ๋ถ„์•ผ:</td>
<td>
<input type= "checkbox">์ปดํ“จํ„ฐ
<input type= "checkbox">์ธํ„ฐ๋„ท
<input type= "checkbox">์—ฌํ–‰
<input type= "checkbox">์˜ํ™”๊ฐ์ƒ
<input type= "checkbox">์Œ์•…๊ฐ์ƒ


</td>
</tr>
<tr>
<td>์ž๊ธฐ์†Œ๊ฐœ:</td>
<td>
<textarea rows="5" cols="60"></textarea>
</td>
</tr>
</table>
</div>
<a href="test1_1.html">๋’ค๋กœ๊ฐ€๊ธฐ</a>
</body>
</html>

๋’ค๋กœ๊ฐ€๊ธฐ ๋ˆ„๋ฅด๋ฉด ๋กœ๊ทธ์ธ์ฐฝ์œผ๋กœ ์ด๋™

'CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Scroll bar  (0) 2023.04.27
div ํƒœ๊ทธ ๊ฐ€๋กœ ๋ฐฐ์น˜  (0) 2023.03.07
ํฐํŠธ ๋ณ€๊ฒฝ  (0) 2023.02.23
CSS๊ธฐ์ดˆ2  (0) 2023.02.09
CSS ๊ธฐ์ดˆ  (0) 2023.02.08

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”