■ 아주 간단한 공지사항 게시판 만들어보기
html으로 맘대로 만드는 기초적인 게시판 만들어보기 연습을 해보았습니다
1. 상단
// html
<nav>
<div class="nav-left">
<a href="">프로필</a>
<a href="">소식</a>
<a href="">웹 상점</a>
<a href="">고객센터</a>
<a href="">커뮤니티</a>
</div>
<div class="nav-right">
<span>eSPORTS</span>
</div>
</nav>
<hr />
// css
hr {
border: 1px solid #dfdbdb;
}
nav {
width: 1200px;
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 20px 0;
}
.nav-left a {
font-weight: bold;
font-size: 18px;
margin-right: 50px;
}
.nav-left a:last-child {
margin-right: 0px;
}
.nav-right span {
font-weight: bold;
font-size: 18px;
color: #566cf3;
}
2. Header
// html
<header>
<h1>공지사항</h1>
<p>중요 내용을 안내해드립니다.</p>
</header>
// css
header {
text-align: center;
width: 1200px;
margin: 30px auto;
margin-bottom: 20px;
}
header h1 {
margin-bottom: 15px;
}
2. Main
// html
<main>
<div class="search">
<form action="">
<input type="text" placeholder="검색어를 입력하세요.">
<button>검색</button>
</form>
</div>
<table>
<tr>
<th>구분</th>
<th>제목</th>
<th>작성일</th>
<th>조회수</th>
</tr>
<tr>
<td>공지</td>
<td>2023 ek리그 오픈 디비전 시즌2 참가신청 사전 안내</td>
<td>10.11(수)</td>
<td>-</td>
</tr>
<tr>
<td>공지</td>
<td>10/19(목) 현재 발생 중인 오류 안내</td>
<td>3일전</td>
<td>-</td>
</tr>
<tr>
<td>공지</td>
<td>9월 아시안게임 국가대표팀 응원 접속 이벤트 사전 안내</td>
<td>9.13(수)</td>
<td>458,245</td>
</tr>
</table>
<div class="page-btn">
<span class="num active">1</span>
<span class="num">2</span>
</div>
</main>
// css
main {
width: 1200px;
margin: 0 auto;
}
.search {
display: flex;
justify-content: right;
margin-bottom: 20px;
}
table {
width: 100%;
font-size: 20px;
border-collapse: collapse;
}
table tr {
height: 50px;
}
table tr:nth-child(1) {
background-color: #eee;
}
table tr th, table tr td {
text-align: center;
font-size: 14px;
border: 1px solid #ccc;
}
table tr td:nth-child(2) {
text-align: left;
padding-left: 10px;
}
.page-btn {
display: flex;
justify-content: center;
margin-top: 20px;
}
.page-btn span {
margin-right: 5px;
cursor: pointer;
margin-top: 10px;
}
.page-btn span:last-child {
margin-right: 0;
}
.num {
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 14px;
display: inline-block;
color: black;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
}
.active {
background-color: rgb(216, 216, 247);
color: white;
}
■ html & css 용어 정리
사용한 html과 css의 용어 중에 알고 가면 좋은 것들이나 필요한 부분을 정리 해보기로 했다
- <hr> : 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용
- <nav> : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 집합을 정의하며, 일반적으로 메뉴,목차 등에 사용
- <span> : html 문서에서 인라인 요소들을 하나로 묶을 때 사용하며 요소의 그룹화, 속성값 공유에 유용하게 사용
- <form> : 사용자로부터 입력을 받을 수 있는 html 입력 form을 정의할 때 사용하며 input, button, lable, option 등의 요소를 하나 이상 포함 할 수 있다
- <input> : 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할때 사용하며 <form>요소 내부에서 사용
- placeholder : <input>태그에서 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시
- <button> : 요소안에 텍스트나 이미지 같은 콘텐츠를 삽입할 수 있지만, <input>요소를 사용한 버튼에는 삽입할 수 없으며 요소에 type 속성값을 명시하는 것이 좋다
- flex : 같은 플렉스 컨테이너 안에 있는 플렉스 요소의 너비를 상대적으로 설정하며, 기본 주축이 row로 되어 있기 때문에 가로 정렬이 된다
- justify-content : 축 수평방향 정렬
- space-between : flex 방향 양 끝점 기준(양 끝에 붙혀서 나온다)
- align-items : 축 수직 방향 정렬
- margin : 바깥쪽 여백(위, 오른쪽, 아래, 왼쪽 순)으로 magin : 20px 20px(상하, 좌우) margin : 20px 10px 20px(상, 좌우, 아래) 등으로 사용도 가능하다
- padding : 안쪽 여백을 의미하며 margin과 같은 방식으로 사용가능하다
- text-align : 텍스트의 정렬 방향을 의미한다
- border-collapse : collapse : 표의 테두리와 셀의 테두리 사이의 간격을 어떻게 처리할 지 정하며 collapse로 표와 셀의 테두리 사이의 간격을 없앨 수 있다
- nth-child() : 괄호안에 접근하고싶은 요소의 번호를 적어 지정하여 접근할 수 있다
- inline-block : inline 요소처럼 전후 줄바꿈 없이 한줄에 다른 요소와 나란히 배치되지만 block 요소처럼 margin, padding, width 등의 속성 지정이 가능하다
Today short review
html과 css로 이것저것 많이 빠졌지만 게시판 만들기를 해보았다 이후에 추가적으로 부분을 추가하거나 다르게 만들어 보아야겠다