게시판

board.css

css 위치 : /css/board/board.css
```
div.board_paging span.page_block
{
	letter-spacing: -4px;
}
```
- letter-spacing: -4px - 블럭이동 페이지 링크의 화살표 간격 조정

div.board_menu a
{
	padding: 6px 14px 7px 14px;
	line-height: 16px;
}

div.board_menu input
{
	padding: 6px 14px 6px 14px;
	line-height: 17px;
}

line-height: 16px , line-height: 17px - a 태그와 input 태그의 높이값을 조정하기 위한 속성

```
div.board_view div.board_view_image
{
	clear: both;
	padding: 12px 12px 0 12px;
	text-align: center;
}

div.board_view div.board_view_image img
{
	display: inline-block;
	max-width: 100%;
	height: auto;
}
```
- text-align: center , display: inline-block - 사진 중앙 배치
- max-width: 100% - 사진 가로크기 최대값을 100% 하여 영역을 벗어나지 못하도록 방지하고 확대 · 축소 가능하도록 속성 적용
- 작은 크기의 사진은 원본 사이즈 그대로 표시
```
div.board_gallery ul li:nth-child(odd) div.wrapper
{
	margin: 0 6px 0 12px !important;
}

div.board_gallery ul li:nth-child(even) div.wrapper
{
	margin: 0 12px 0 6px !important;
}
```
- nth-child(odd) - 홀수 번호
- nth-child(even) - 짝수 번호
- !important - board_write.jsp 에서 재정의된 div.board_gallery Mobile 스타일이 Tablet 이상에서도 적용되는것을 막기 위함

@media screen and (min-width: 760px)
{
	...

	div.board_gallery ul li:nth-child(3n+1) div.wrapper
	{
		margin: 0 6px 0 0 !important;
	}

	div.board_gallery ul li:nth-child(3n+2) div.wrapper
	{
		margin: 0 3px 0 3px !important;
	}

	div.board_gallery ul li:nth-child(3n) div.wrapper
	{
		margin: 0 0 0 6px !important;
	}

nth-child(3n+1) - 1 4 7 10...
nth-child(3n+2) - 2 5 8 11...
nth-child(3n) - 3의 배수

div.board_insert div.board_article div.category_wrapper div.input_wrapper textarea
{
	width: 90%;
	height: 300px;
	padding: 5px 5px 5px 5px;
	overflow: auto;
	border: 1px solid #cccccc;
	background: transparent;
}

overflow: auto - 입력된 내용이 width , height 값을 넘기면 스크롤이 생김
background: transparent - 배경색을 투명하게 처리

@media screen and (min-width: 760px)
{
	...

	div.board_insert
	{
		float: left;
		width: 100%;
	}

	div.board_insert div.board_article div.category_wrapper
	{
		float: left;
		width: 100%;
	}

	div.board_insert div.board_article div.category_wrapper label
	{
		float: left;
		width: 20%;
		padding: 5px 0 0 0;
	}

	div.board_insert div.board_article div.category_wrapper div.input_wrapper
	{
		float: left;
		width: 80%;
		padding: 0 0 0 0;
	}

Tablet 이상일때 label 과 input을 일렬로 배치함