[HTML] 게시판 버튼 만들기 (button 태그) - 연습

[HTML]
게시판 버튼 만들기 (button 태그) - 연습

---

✔️ 게시판 버튼

	<table class="table">
		<tr>
			<td >
				<button>새로고침</button>
			</td>
			
			<td>
				<form>
					<select>
						<option></option>
						<option></option>
						<option></option>
						<option></option>
						<option></option>
					</select>
					<input>
					<button>검색</button>
				</form>
			</td>
			<td>
				<button>글올리기</button>
			</td>
		</tr>
	</table>

💡 select - option : 옵션을 넣으면 선택할 수 있다.
💡 input : 입력창
💡 button 은 버튼을 만드는 태그! 

 

 

1. button 의 클래스 설정하기

<button type="button" class="btn">새로고침</button>

<button type="button" class="btn">검색</button>

<button type="button" class="btn">글올리기</button>

.btn {
	color: #333;
	border: 1px solid #999;
	background-color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: 500;
	cursor: pointer;
	font-size: 14px;
	font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; 
	vertical-align: baseline;

}

.btn:active, .btn:focus, .btn:hover {
	background-color: #f8f9fa;
}

💡 버튼 클릭 / 버튼 포커스 / 버튼에 마우스 댔을 때 뜨는 효과
.btn:active, .btn:focus, .btn:hover

 

 

 

2. 버튼 위치 조정

	<table class="table">
		<tr>
			<td width="100">
				<button type="button" class="btn">새로고침</button>
			</td>
			
			<td align="center">
				<form>
					<select>
						<option></option>
						<option></option>
						<option></option>
						<option></option>
						<option></option>
					</select>
					<input>
					<button type="button" class="btn">검색</button>
				</form>
			</td>
			<td width="100" align="right">
				<button type="button" class="btn">글올리기</button>
			</td>
		</tr>
	</table>

 

 

 

3. select form 설정 코드와 input form 설정 코드!

	<table class="table">
		<tr>
			<td width="100">
				<button type="button" class="btn">새로고침</button>
			</td>
			
			<td align="center">
				<form>
					<select name="condition" class="form-select">
						<option></option>
						<option></option>
						<option></option>
						<option></option>
						<option></option>
					</select>
					<input type="text" name="keyword" class="form-control">
					<button type="button" class="btn">검색</button>
				</form>
			</td>
			<td width="100" align="right">
				<button type="button" class="btn">글올리기</button>
			</td>
		</tr>
	</table>

 

 

4. textarea 부분 조정하는 코드

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


textarea:focus, input:focus {
	outline: none;
	/*아웃라인이 보더 라인보다 우선순위가 높다.*/
}

아웃라인 none 설정했을 때

아웃라인 설정하기 전