예전에 테이블에 부여했던 테두리를 자세히 설명한다.
테두리는 기본적으로 border 키워드를 사용
border-width, border-style, border-color 세가지가 있고,
세가지를 합친 border: [width style color] 키워드도 있다.
또한 border-[top/bottom/left/right]-attr(속성)을 통해
테두리의 각 부분의 속성을 컨트롤 할 수 있다.
사용법과 예시를 확인해보자
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "btn.png">
<style>
/*border-width, border-style, border-color 세가지를 합친*/
/*border: [width style color]을 사용한 것.*/
/*또한 border-[top/bottom/left/right]-attr(속성)을 통해*/
/*테두리의 각 부분의 속성을 컨트롤 할 수 있다.*/
.one{
border: 5px solid red;
}
.two{
border-style: dashed;
border-width: thin;
border-color: brown;
}
.three{
border-bottom-style: dotted;
border-top-style: double;
border-right-style: solid;
border-left-style: solid;
border-left-color: aquamarine;
/*선이 없을 경우, 색깔만 줘도 아무 변화 없다.*/
}
.four{
border-bottom-style:groove;
border-top-style: groove;
border-right-style: ridge;
border-left-style: ridge;
}
.five{
/*한번에 주는 방법*/
/*12-3-6-9, 시계방향*/
border-style: double solid dotted dashed;
}
</style>
<!--스타일이 많으면 로딩이 느려질 수 있다.-->
<!--아이디가 # 클래스가 . 태그는 p-->
</head>
<body>
<p class="one">This is content</p>
<p class="two">This is content</p>
<p class="three">This is content</p>
<p class="four">This is content</p>
<p class="five">This is content</p>
</body>
</html>
실행 화면
테이블에 적용 예시
마진 기능을 추가하여 좀 더 이쁘게 자리잡았다.
<html>
<head>
<meta charset="UTF-8">
<title>로그인 박스</title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th{
width: 50px;
padding: 3px;
}
td{
width: 50px;
padding: 3px;
}
</style>
</head>
<body>
<h2>로그인</h2>
<hr/>
<form action="" method="GET">
<fieldset>
<table>
<tr><!--행(row)선언-->
<th><b>ID</b></th>
<th><input type="text" name = "UserID" value=""placeholder = "아이디를 입력 해주세요."/></th>
<th rowspan="2"><input type="submit" value="로그인"/></th>
</tr>
<tr><!--행(row)선언-->
<th><b>PW</b></th>
<th><input type="password" name = "UserPW" value=""placeholder = "비밀번호를 입력 해주세요."/></th>
</tr>
<tr><!--행(row)선언-->
<th colspan="3"><input type="button" value="회원가입"/> <input type="button" value="아이디/비번 찾기"></th>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 3px;
}
</style>
</head>
<body>
<fieldset>
<h2>회원가입</h2>
<hr/>
<form action="" method="GET">
<table>
<tr>
<th>아이디</th>
<td><input type="text" name = "UserID" value=""/></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="text" name = "UserPW" value=""/></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="text" name = "ReUserPW" value=""/></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" name = "Name" value=""/></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email" name="mail" required/></td>
</tr>
<tr>
<th>생년월일</th>
<td>
<select name="year">
<option value="1995">1995</option>
<option value="1996"d>1996</option>
<option value="1997" selected>1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<select name="month">
<option value="01" selected>01</option>
</select>
<select name="day">
<option value="01" selected>01</option>
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="male"/> 남자
<input type="radio" name="gender" value="female"/> 여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="드라이브"/>드라이브
<input type="checkbox" name="hobby" value="스포츠"/>스포츠
<input type="checkbox" name="hobby" value="게임"/>게임
<input type="checkbox" name="hobby" value="낚시"/>낚시
</td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="age" min="1" max="200" value="20"/></td>
</tr>
<tr>
<th>보안등급</th>
<td><input type="range" name="security" min="0" max="100" value="0" step="20"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="회원가입"/>
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |
|---|---|
| [CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기 (0) | 2018.10.17 |
| [CSS]03-05.float, link 정렬, 링크 속성, 이미지 밑줄 삭제 (0) | 2018.10.17 |
| [CSS]03-03.background, 배경화면 (0) | 2018.10.17 |
| [CSS]03-01.CSS, Style, 선택자 (0) | 2018.10.16 |
