TIL

230209 [CSS] (style)

하차모 2023. 2. 9. 17:27

1. margin / border / padding

  margin : 테두리의 바깥쪽의 여백 / border : 테두리 / padding : 테두리 안쪽의 여백

  각각 top, bottom, left, right에 크기를 지정할 수 있다.

  margin은 "0 auto" 값으로 좌우여백을 자동으로 계산하여 중앙에 오게 할 수 있다.

  border은 color으로 색상을 지정하고, radius로 테두리를 둥글게 만들 수 있다.

2. width : px 등으로 넓이 지정

3. text-align : left, right, center 등으로 텍스트의 정렬 방향을 지정할 수 있다.

4. textarea { resize: none; } 으로 textarea의 크기를 고정시킬 수 있다.

 

5. colgroup : table의 열을 묶을 수 있다. col 자식으로 width를 지정할 수 있다. (%)

6. onclick : button 타입의 input 태그에 onclick 속성을 넣어 버튼 클릭 시 이벤트를 지정할 수 있다.

  "location.href='주소';" : ''안의 주소로 이동 / "alert(메세지);" : ()안의 메세지를 알림창에 띄움

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
	background-color: #f2f2f2;
	width: 800px;
	margin: 0 auto;
	margin-top: 70px;
	padding-top: 70px;
	padding-bottom: 70px;
	border-radius: 30px;
}
table{
	width: 300px;
	margin : 0 auto;
	text-align: center;
}
</style>
</head>
<body>
<div class="container">
	<table>
		<colgroup>
			<col width="20%"> 
			<col width="80%"> 
		</colgroup>
		<tr>
			<td>I D</td>
			<td>
				<input type="text" placeholder="Input your ID">
			</td>
		</tr>
		<tr>
			<td>P W</td>
			<td>
				<input type="password" placeholder="Input your PASSWORD">
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<a href="board.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: 600px;
	margin: 0 auto;
	margin-top: 70px;
}
table {
	width: 600px;
	border-collapse: collapse;
}
thead > tr {
	font-weight: bold;
	text-align: center;
	height: 40px;
	background-color: #cee3f6;
}
thead > tr > td {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
tbody > tr {
	text-align: center;
	height: 35px
}
tbody > tr:nth-child(even) {
	background-color: #eeeeee;
}
tbody > tr > td {
	border-bottom: 1px solid black
}
tbody > tr > td:nth-child(2) {
	text-align: left;
	color: blue;
}
tbody > tr:hover {
	background-color: #dddddd;
}
.buttonDiv {
	width: 600px;
	margin: 0 auto;
	margin-top: 10px;
}
</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>
<div class="buttonDiv">
	<input type="button" value="뒤로 가기" onclick="location.href='login.html';">
</div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
	border: 1px solid black;
	border-collapse: collapse;
}
tr, td {
	border: 1px solid black;
}
.title{
	font-weight: bold;
	background-color: #cee3f6;
	text-align: center;
}
.redFont {
	color: red;
	font-size: 12px;
	font-style: italic;
}
textarea {
	resize: none;
}
</style>
</head>
<body>
<table>
	<tr class="title">
		<td colspan="2" >
			<span class="redFont">(*필수입력)</span> 회원 기본 정보
		</td>
	</tr>
	<tr>
		<td>
			<span class="redFont">*</span> 아이디 : 
		</td>
		<td>
			<input type="text" placeholder="4~12자의 영문 대소문자, 숫자로만 입력">
			<input type="button" value="아이디 검사">
		</td>
	</tr>
	<tr>
		<td>
			<span class="redFont">*</span> 비밀번호 :
		</td>
		<td>
			<input type="password">
			4~12자의 영문 대소문자와 숫자로만 입력
		</td>
	</tr>
	<tr>
		<td>
			<span class="redFont">*</span> 비밀번호확인 :
		</td>
		<td>
			<input type="password">
			<input type="button" value="비밀번호 확인">
		</td>
	</tr>
	<tr>
		<td>
			<span class="redFont">*</span> 메일주소 :
		</td>	
		<td>
			<input type="email">
			<input type="button" value="메일 확인">
			예) id@domain.com
		</td>
	</tr>
	<tr>
		<td>
			<span class="redFont">*</span>이름 :
		</td>	
		<td>
			<input type="text">
		</td>
	</tr>
	<tr class="title">
		<td colspan="2">개인 신상 정보</td>
	</tr>
	<tr>
		<td>
			<span class="redFont">*</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>
			<div>
				<input type="text">
				<input type="button" value="우편번호 찾기">					
			</div>
			<div>
				<input type="text">				
				<input type="text">				
			</div>
		</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="3" cols="50"></textarea>
		</td>
	</tr>
</table>

<a href="login.html">뒤로 가기</a>

</body>
</html>
저작자표시 비영리 (새창열림)

'TIL' 카테고리의 다른 글

230213 [JSP, Servlet] (데이터 전달)  (0) 2023.02.13
230210 [JSP, Servlet] (서버와 클라이언트, 기본 개념)  (0) 2023.02.10
230208 [Html, CSS] (list / input / 선택자)  (0) 2023.02.08
230207 [Java, Html] (Set / Map / 태그 / table)  (0) 2023.02.07
230206 [Java] (List / ArrayList)  (0) 2023.02.06

'TIL'의 다른글

  • 현재글230209 [CSS] (style)

관련글

티스토리툴바