개발자 미니민의 개발스터디

[HTML] 글쓰기 게시판 - 연습

by mini_min

프로젝트 실습/[Project] HTML

[HTML]
글쓰기 게시판 - 연습

✔️ 글쓰기 게시판 만들기

틀만 만들면 아래와 같이 생성된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<div>
	<div>
		<h3><span>| </span> 게시판</h3>
	</div>
	
	<form>
		<table>
			<tr>
				<td>제 목</td>
				<td>
					<input>
				</td>
			<tr>
				<td>이 름</td>
				<td>
					<input>
				</td>
			</tr>
			<tr>
				<td>내 용</td>
				<td>
					<textarea rows="" cols=""></textarea>
				</td>
			</tr>
			<tr>
				<td>패스워드</td>
				<td>
					<input>
				</td>
			</tr>
		</table>
	
	
	</form>
 
 
 
 
 
</div>
 
</body>
</html>

 

 

1. 기본 board / table / title 설정

<style type="text/css">
* {padding: 0; margin: 0;}
		/*width 안에 패딩이랑 선이 포함되게 계산하라는 말*/
*, ::after, ::before { box-sizing: border-box;}
 
body {
	font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; 
	font-size: 14px; color: #222
}
 
.board {width: 700px; margin: 30px auto;}
.table {width: 100%; border-spacing: 0; border-collapse: collapse;}
.title {width: 100%; font-size: 16px; font-weight: 600; padding: 13px 0;}
 
 
 
 
</style>
<div class="board">
	<div class="title">
		<h3><span>| </span> 게시판</h3>
	</div>
	
	<form>
		<table class="table">
			<tr>
				<td>제 목</td>
				<td>
					<input>
				</td>
			<tr>
				<td>이 름</td>
				<td>
					<input>
				</td>
			</tr>
			<tr>
				<td>내 용</td>
				<td>
					<textarea rows="" cols=""></textarea>
				</td>
			</tr>
			<tr>
				<td>패스워드</td>
				<td>
					<input>
				</td>
			</tr>
		</table>
	
	
	</form>
</div>

 

 

2. 테이블 패딩값

.table th, .table td { padding-top: 10px; padding-bottom: 10px; }

 

 

3. table-border 값 주기

.table-border thead > tr {border-top: 2px solid #212529; border-bottom: 1px solid #ced4da;}
.table-border tbody > tr { border-bottom: 1px solid #ced4da;}

 

 

4. table-form 값에 margin top 20px 를 줘서 |게시판 제목과 조금 떨어졌다.

테이블의 마진과 패딩 값을 주면 안에 내용들이 조절된다.

td:first-child : 로 td 의 첫번째 컬럼들은 모두 색을 입혔다!

 

그럼 아래와 같은 결과가 나온다. 

.table-form {margin-top: 20px;}
.table-form td {padding: 7px 0;}
.table-form tr > td:first-child {
	width: 110px; text-align: center; background: lightblue;}

 

 

5. table에 input 박스와 textarea 박스 크기 조절!

.table-form tr > td:nth-child(2) {padding-left: 10px;}
.table-form input[type=text], .table-form input[type=file], .table-form textarea {
	width: 97%;}
.table-form input[type=file] { width: 50% }

 

 

6. form-control 이라는 input 박스 크기 / padding / 폰트 설정하기

.form-control {
	border: 1px solid #999; border-radius: 4px; background-color: #fff;
	padding: 5px 5px;
	font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; 
	vertical-align: baseline;
}
 
.form-control[readonly]{
	background-color: #f8f9fa;
}

 

 

7. 마지막으로 textarea 가 자동 사이즈 조절이 되는데, 자동 사이즈 조절(resize 를 풀어주면 끝!)

textarea.form-control {
	height: 170px; resize: none;
}

 

 

 

 

블로그의 프로필 사진

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기

티스토리툴바