html과 css로 게시판 만들기2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판</title>
<style>
h2 { font-weight: border; }
.hr1 { border: 0;
height: 2px;
background: #d3d3d3;}
.grey {
color: #727272;}
#strong { font-weight: 900;}
table {
width: 100%;
border-top: 1px solid #d3d3d3;
border-collapse: collapse;
}
th { background-color: #d3d3d3 ;
border-top: 3px solid #727272;
}
th, td {
border-bottom: 1px solid #d3d3d3;
padding: 10px;
}
.greylist {
width: 50px;
height: 30px;
font-weight: 900;
color: white;
text-align: center;
background: grey;
border: solid 2px white;
border-radius: 5px;
}
.gradient {
width: 80px;
height: 30px;
font-weight: 900;
color: white;
text-align: center;
background: linear-gradient( to bottom, grey, black );
border: solid 2px white;
border-radius: 5px;
}
.left {text-align: left;}
.right { float: right;}
.center { text-align: center;}
a {color:black;
text-decoration-line : none;}
</style>
</head>
<body>
<h2> 게시판 </h2>
<hr class ="hr1" noshade>
<form>
<span> ▷ 총 3개의 게시물이 있습니다. </span>
<span class="right";>
<span class="grey"; id="strong";>SELECT</span>
<select>
<option value="제목"; name="제목"; >제목</option>
<option value="글쓴이";name="글쓴이";>글쓴이</option>
</select>
<input type="text";> <input type="button" name="검색" class="gradient" value="검색" >
</span>
</form>
<br>
<table>
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>일시</th>
<th>조회수</th>
</tr>
<tr>
<td class="center">1</td>
<td class="left">게시글 1 입니다.</td>
<td class="center">김준석</td>
<td class="center">2022-05-18</td>
<td class="center">15</td>
</tr>
<tr>
<td class="center">2</td>
<td class="left">게시글 2 입니다.</td>
<td class="center">김준석</td>
<td class="center">2022-05-18</td>
<td class="center">15</td>
</tr>
<tr>
<td class="center">3</td>
<td class="left">게시글 3 입니다.</td>
<td class="center">김준석</td>
<td class="center">2022-05-18</td>
<td class="center">15</td>
</tr>
</table>
</br>
<div class="center" >
<a href = "https://www.naver.com/">◀ 이전</a>
<a href = "https://www.naver.com/">1</a>
<a href = "https://www.naver.com/">다음 ▶</a>
</div>
<span class="right";>
<input type="button" value="목록" class="greylist";>
<input type="button" value="글쓰기" class="gradient";>
</span>
</body>
</html>↑검색하여 내가 만든 코드
hr태그
<hr> 수평선을 뜻하는 A horizontal rule 의 약자
그냥 선만 긋는 태그이기 때문에 종료없이 hr 태그만 쓰면된다.
hr 선은 태두리(border)부분과 안쪽영역으로 이루어져있다.
border은 색을 바꾸고 크기를 조절하고 없앨수있다
안쪽영역도 색,크기를 조절할 수있다.
border 조절 방법
길이 width(0%~100%)
높이 height (px)
색깔 background-color
폰트 속성을 주는 항목들
색 상 color: 색상이름 또는 색상코드 ;
굵 기 font-weight
기울임 font-style
크 기 font-size: 숫자px, 숫자% 또는 숫자em ;
글 꼴 font-family: 굴림, 돋움, 궁서, Arial, 등등 ;
줄높이 line-height: 숫자px, 숫자% 또는 숫자em ;
padding
padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.
table
border-collapse
표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다.
separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
테두리의 특정 방향만 따로 설정하는 방법
border-top
border-bottom
border-left
border-right
float ‘뜨다’ 라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성
text-align 텍스트의 정렬 방향을 의미
하이퍼링크에 밑줄을 없애는 방법
a {text-decoration-line : none;}
text-decoration 선으로 텍스트를 꾸밀 수 있게 해주는 속성
none : 선을 만들지 않습니다.
line-through : 글자 중간에 선을 만듭니다.
overline : 글자 위에 선을 만듭니다.
underline : 글자 아래에 선을 만듭니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
background: linear-gradient( to bottom, grey, black );
gradient 종류
linear-gradient 선형
radial-gradient 반지름형
repeating gradient 반복형
( to bottom, grey, black ); 은 방향과, 들어가는 색상이다
border: solid 2px white;
solid = 실선을 의미
border-radius: 5px;
테두리 라운드값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
padding-bottom: 10px;
border-bottom: 1px solid gray;
}
.aside {
width: 300px;
float: left;
padding-bottom: 20px;
/* background-color: greenyellow; */
}
.select-grup {
width: auto;
float: right;
text-align: right;
/* background-color: gray; */
}
.select-text {
color: gray;
font-size: 120%;
font-weight: bolder;
padding: 10px;
}
.select-dropbox {
height: 25px;
font-size: 16px;
}
.select-textbox {
height: 20px;
}
table.board-table {
width: 100%;
border-spacing: 0;
}
.container {
width: 1000px;
margin: 0 auto;
}
.board-table th {
background: #eee;
border-top: 2px solid gray;
padding: 5px;
}
.board-table td {
border-bottom: 1px solid #ccc;
padding: 5px;
}
.board-table td {
text-align: center;
}
.board-table td:nth-child(2) {
text-align: left;
}
.page {
text-align: center;
padding: 20px;
}
.button {
float: right;
text-align: center;
}
.button-gray {
border: 0px;
border-radius: 5px;
background-color: gray;
color: white;
font: 12px 굴림;
font-weight: bold;
width: 60px;
height: 30px;
}
.button-black {
border: 0px;
border-radius: 5px;
background-color: rgb(46, 46, 46);
color: white;
font: 12px 굴림;
font-weight: bold;
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<article>
<div class="container">
<h2>게시판</h2>
<div class="aside">
▷ 총 3개의 게시물이 있습니다.
</div>
<div class="select-grup">
<form action="">
<span class="select-text">SELECT</span>
<span>
<select class="select-dropbox">
<option value="s-title">제목</option>
<option value="s-writer">글쓴이</option>
<option value="s-">일시</option>
</select>
</span>
<span>
<input type="text" name="search" class="select-textbox">
<input type="submit" class="button-black" value="검색" />
</span>
</form>
</div>
<table class="board-table">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>일시</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>게시글 1 입니다.</td>
<td>김준석</td>
<td>2022-05-16</td>
<td>15</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
<td>게시글 2 입니다.</td>
<td>김준석</td>
<td>2022-05-16</td>
<td>15</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
<td>게시글 3 입니다.</td>
<td>김준석</td>
<td>2022-05-16</td>
<td>15</td>
</tr>
</tbody>
</table>
<div class="page">
<span><a href="#!">◀ 이전</a></span>
<span><a href="#!">1</a></span>
<span><a href="#!">다음 ▶</a></span>
</div>
<div class="button">
<span><input type="button" class="button-gray" value="목록"></span>
<span><input type="button" class="button-black" value="글쓰기"></span>
</div>
</div>
</article>
</body>
</html>↑다른 수강생이 만든 코드
article로 전체영역을 잡아주고 div로 각각 세션을 나눠서 CSS값을 깔끔하게 묶어 넣어주었다.
각구역마다 padding값, margin값, width, height값을 우선 잡아주고 스타일을 작성해 나간 것 같다.
주로 class 선택자로 선택하고
.board-table th {
background: #eee;
border-top: 2px solid gray;
padding: 5px;
}테이블에 소속되는 th, td 같은 부분은 후손선택자로 위 코드와 같이 style에 불러왔다.
그리고 구조선택자인 :nth-child()
를 사용하여 형제 관계 중에서 '앞'에서 수열 번째에 태그를 선택,
<tr>
<td>1</td>
<td>게시글 1 입니다.</td>
<td>김준석</td>
<td>2022-05-16</td>
<td>15</td>
</tr>td의 두번째 오는 <td>게시글 1 입니다.</td> 부분을
.board-table td:nth-child(2) {
text-align: left;
}위처럼 선택자 괄호안에 2 (두번째를 의미)를 넣어 한번에 여러개를 선택하여 처리했다.
tbody 같은 경우에는 코드를 작성하지 않아도, 자동으로 작성되는 부분이니 위치를 인지하여 선택자를 유의하여 사용한다.
<table class="board-table">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>일시</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>게시글 1 입니다.</td>
<td>김준석</td>
<td>2022-05-16</td>
<td>15</td>
</tr>
</tbody>table 태그는
thead와 tbody태그를 안에 사용해 더 확실히 구분되도록 잡아 표기 해준 것같다.
<div class="page">
<span><a href="#!">◀ 이전</a></span>
<span><a href="#!">1</a></span>
<span><a href="#!">다음 ▶</a></span>
</div>하단에 들어가는 ◀ 이전 1 다음 ▶ 부분은 하이퍼링크를 넣어 넘어갈 수 있게 만들어 주고,
하이퍼링크에 사이트 주소 대신 넣은 #은 클릭 이벤트 발생시 페이지 전환을 하지 않도록 하기 위해서 썼다고 한다.
velog.io
↑ 다른수강생 코드에 버튼 그라디언트 값만 수정해서 만든 코드
'STUDY > HTML5 CSS3' 카테고리의 다른 글
| [CSS] 22-05-19 flexboxdefense 공략 ☑ (0) | 2022.06.02 |
|---|---|
| [CSS] 22-05-19 CSS속성 ☑ (0) | 2022.06.02 |
| [CSS] 22-05-17 CSS diner 공략 ☑ (0) | 2022.06.02 |
| [CSS] 22-05-17 CSS선택자 ☑ (0) | 2022.06.02 |
| [HTML] 22-05-16 기초html태그 ☑ (0) | 2022.06.01 |