[HTML] <ul> 태그로 게시판 만들기 - 연습

[HTML]
<ul> 태그로 게시판 만들기 - 연습

---

✔️ ul 태그로 게시판 만들기

1. 게시판 내용으로 들어갈 부분 <ul>, <li> 태그로 작성하기

<div>
	<div>
		<h3>게시판</h3>
	</div>
	
	<div>
		<ul>
			<li>번호</li>
			<li>제목</li>
			<li>작성자</li>
			<li>작성일</li>
			<li>조회수</li>
		</ul>
		
		<ul>
			<li>3</li>
			<li>HTML 강좌입니다.</li>
			<li>프론트</li>
			<li>2022-09-12</li>
			<li>33</li>
		</ul>
		
		<ul>
			<li>2</li>
			<li>CSS 강좌입니다.</li>
			<li>이자바</li>
			<li>2022-04-05</li>
			<li>3</li>
		</ul>
		
		<ul>
			<li>1</li>
			<li>자바스크립트 강좌입니다.</li>
			<li>오자바</li>
			<li>2022-02-03</li>
			<li>30</li>
		</ul>
	</div>
	
	


</div>

 

 

2. CSS 코드 짜기 - 기본

- 기본적으로 패딩이랑 마진 값 0으로 바꾸기 

- body 부분 기본값 설정하기

- title 값 설정하기

* { padding: 0; margin: 0; }
*, ::after, ::before { box-sizing: border-box; }

body {
	font-family:"Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif;
	font-size: 14px;
	color: #222;
}

.board { width: 700px; margin: 30px auto; }
.title { width:100%; font-size: 16px; font-weight: bold; padding: 13px 0; }

 

 

3. CSS 코드 짜기 - board-list 클래스 값

- board-list 클래스 값을 설정한다. ✨ float 값 중요 ✨

왜 중요한지 모르겠다면 아래 <ul> 리스트 태그 공부하면서 정리한 글 참고하자...!

https://backshren20.tistory.com/257

[HTML] 리스트 관련 <ol> <ul> <menu> <li> 태그

.board-list li {float: left; text-align: center; padding: 10px 0; border-bottom: 1px solid #ced4da; }
.board-list ul {clear: both; list-style: none;}
.board-list ul:first-child {color: #787878; background: #f8f9fa; font-weight: 600; border-top: 2px solid #212529;}

💡 board-list 의 li 태그들은 float 정렬되도록하고,
ul 태그마다 clear:both 를 줘서 줄바꿈이 되도록 한다.

ul 태그의 가장 첫번째 first-child 는 소제목이 되므로, border 값, 배경값, 컬러 모두 다른 값을 줘서 구분한다.

 

 

4. CSS 코드 짜기 - li 태그 값 설정

- <u>, <li> 리스트 태그는 table 태그와 달리, 처음부터 목록값이었기 때문에 <li> 값마다 와이드 값을 줘서 간격을 벌린다. (패딩 값을 줘서 간격을 벌려도 된다.)

💡 <table> 태그와 달리 <ul><li> 태그에는 너비와 높이를 직접 지정해야한다.

.board-list ul .num {width: 50px;}
.board-list ul .subject {width: 410px; text-align: left; white-space: nowrap;}
.board-list ul .subject:first-child {text-align: center;}

.board-list ul .name {width: 95px;}
.board-list ul .date {width: 85px;}
.board-list ul .hit {width: 60px;}

	<div class="board-list">
		<ul>
			<li class="num">번호</li>
			<li class="subject">제목</li>
			<li class="name">작성자</li>
			<li class="date">작성일</li>
			<li class="hit">조회수</li>
		</ul>
		
		<ul>
			<li class="num">3</li>
			<li class="subject">HTML 강좌입니다.</li>
			<li class="name">프론트</li>
			<li class="date">2022-09-12</li>
			<li class="hit">33</li>
		</ul>
		
		<ul>
			<li class="num">2</li>
			<li class="subject">CSS 강좌입니다.</li>
			<li class="name">이자바</li>
			<li class="date">2022-04-05</li>
			<li class="hit">3</li>
		</ul>
		
		<ul>
			<li class="num">1</li>
			<li class="subject">자바스크립트 강좌입니다.</li>
			<li class="name">오자바</li>
			<li class="date">2022-02-03</li>
			<li class="hit">30</li>
		</ul>
	</div>

💡 white-space 는 띄어쓰기 & 줄바꿈 공백이다.
nowrap : 노랩은 연속되는 여러 개의 공백이나 줄바꿈을 1칸으로 인식한다.
영역을 넘어가는 내용은 줄 바꿈 하지 않고 한 줄로 표시한다.

 

 

5. 페이지 박스 만들기

- page-box 클래스와 paginate 클래스를 만든다. 

	<div class="page-box">
		<div class="paginate">
			<span>1</span>
			<a href="#">2</a>
			<a href="#">3</a>
		</div>
	</div>

.page-box {clear: both; padding: 20px 0; text-align: center;}
.paginate {text-align: center; font-size: 14px; }
.paginate span {
	border: 1px solid #e26d86;
	color: #cb3536; font-weight: 600;
	padding: 3px 7px; margin-left: 3px; vertical-align: middle;
	text-decoration: none;}

.paginate a {
	border: 1px solid #ccc;
	color: #000;  font-weight: 600;  text-decoration: none;
	padding: 3px 7px; margin-left: 3px; vertical-align: middle; }

.paginate :first-child { margin-left: 0; }

💡 text-decoration : 텍스트 줄 긋기를 할 때 사용하는 속성이다.

 

 

6. 새로고침, 글쓰기, 검색 버튼 만들기

- <div> 태그로 좌측에는 새로고침 버튼을, 중앙에는 검색창과 검색 버튼을, 우측에는 등록하기 버튼을 만든다.

	<div>
		<div>
			<button type="button" class="btn">새로고침</button>
		</div>
		<div>
			<form action="">
				<select>
					<option></option>
					<option></option>
					<option></option>
					<option></option>
					<option></option>
				
				</select>
				<input>
				<button type="button" class="btn">검색</button>
			</form>
		</div>
		<div>
			<button type="button" class="btn">등록하기</button>
		</div>
	
	
	</div>

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

 

 

7. board-footer 클래스 설정

- board-list 클래스를 따로 만든 것 처럼, 아래 버튼 영역에 적용할 board-footer 클래스를 만든다.

- board-footer 클래스에 left / center / right 를 만든다.

.board-footer {clear: both; padding: 15px 0;}
.board-footer .left-footer {width: 20%; float: left; text-align: left;}
.board-footer .center-footer {width: 60%; float: left; text-align: center;}
.board-footer .right-footer {width: 20%; float: left; text-align: right;}

<div class="left-footer">
<div class="center-footer">
<div class="right-footer">

 

 

8. input 박스, select 박스 설정하기

- input 박스와 select 박스에 들어갈 코드 작성하면 끝!

	<div class="board-footer">
		<div class="left-footer">
			<button type="button" class="btn">새로고침</button>
		</div>
		<div class="center-footer">
			<form action="">
				<select name="condition" class="form-select">
					<option value="all">제목+내용</option>
					<option value="name">작성자</option>
					<option value="subject">제목</option>
					<option value="content">내용</option>
					<option value="reg_date">등록일</option>
				
				</select>
				<input type="text" name="keyword" class="form-control">
				<button type="button" class="btn">검색</button>
			</form>
		</div>
		<div class="right-footer">
			<button type="button" class="btn">등록하기</button>
		</div>
	
	
	</div>

.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; }
textarea.form-control { height: 170px; resize : none; }
.form-select {
	border: 1px solid #999; border-radius: 4px; background-color: #fff;
	padding: 4px 5px; 
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;}
.form-select[readonly] { background-color:#f8f9fa; }
textarea:focus, input:focus { outline: none; }
input[type=checkbox], input[type=radio] { vertical-align: middle; }

💡 form-control : input 박스를 조정하는 클래스
form-select : option 이 있는 select 박스를 조정하는 클래스

💡 textarea:focus, input:focus { outline: none; } : 아웃라인을 설정하지 않아야 클릭했을 때 까맣게 뜨는 테두리를 없앨 수 있다.