[PHP] book1

 

 

 

https://hyonyong.tistory.com/entry/PHP-book2

[PHP] book2

 

 

 

 

 

index.php

<?php
    include_once 'include/header.php'
?>

<?php
// ex) select * from books limit 0 5

        $conn = mysqli_connect('localhost', 'root', '1234', 'test');
        $query = "select * from books";
        $result = mysqli_query($conn, $query);
        $total = mysqli_num_rows($result);

        // (1) 한페이지당 레코드 개수
        $list_num = 4;
        // (2) 한 블럭당 페이지 수
        $page_num = 5;
        // (3) 현재 페이지
        $page= isset($_GET['page']) ? $_GET['page'] : 1;
        // (4) 전체 페이지수 = 전체 레코드 수 / 한 페이지당 레코드 개수     // 100 / 5 => 4
        $total_page = ceil($total / $list_num); // 소수점 방지, 정수로
        // (5) 전체 블럭 수 = 전체 페이지 수 / 블럭당 페이지 수         // 20 / 3 => 7
        $total_block = ceil($total_page / $page_num);
        // (6) 현재 블럭 번호 = 현재 페이지 번호 / 블럭 당 페이지 수    // 1 / 3 => 1 , 7 / 3 => 
        $now_block = ceil($page / $page_num);
        // (7) 블럭 당 시작 페이지 번호 = (해당글의 블럭번호 -1) * 블럭당 페이지수 +1
        $s_pageNum = ($now_block - 1) * $page_num + 1;
        // (8) 데이터가 0개인 경우
        if($s_pageNum <= 0) {
            $s_pageNum = 1;
        }
        // (9) 블럭당 마지막 페이지 번호
        $e_pageNum = $now_block * $page_num;
        // (10) 마지막 페이지 번호가 전체 페이지 수를 넘지 않도록 설정
        if($e_pageNum > $total_page) {
            $e_pageNum = $total_page;
        }
        // (11) 시작번호 → 0, 5, 10, 15 이런 아이들이 되도록
        $start = ($page - 1) * $list_num;
        // (12) 쿼리작성
        $sql = "select * from books limit $start, $list_num;";
        $result2 = mysqli_query($conn, $sql);
        // echo $sql; // select * from books limit 0, 5;

    function printList() {
    echo "<h3>$total</h3>";
    global $result2;
    while($row = mysqli_fetch_array($result2)) {
                // ( \" ) 문자열 따옴표로 사용하겠다.
        echo "
            <tr>
                <td>{$row['id']}</td>
                <td>{$row['writer']}</td>
                <td><a href=\"detail.php?id={$row['id']}\">{$row['title']}</a></td>
                <td>{$row['publisher']}</td>
                <td>{$row['price']}원</td>
                <td>{$row['bookdate']}</td>
            </tr>
        ";
    }
}
?>

    <div id="contents_page" class="inner">
        <h2>도서목록</h2>
        <h3>최신 도서 목록입니다.</h3>
        <table>
            <tr>
                <th>id</th>
                <th>글쓴이</th>
                <th>제목</th>
                <th>출판사</th>
                <th>가격</th>
                <th>출판일</th>
            </tr>
            <?php printList() ?>
        </table>

        <p class="pager">
            <!-- 💚 이전 버튼 -->
            <?php
            // if($page <= 1) {html 코드}
            // else {html 코드}
                // 이전은 같지만 링크는 다름
                // 1일때 0번으로 가면 안됨
            if($page <= 1) { ?>
                <a href="index.php?page=1">처음</a>
            <?php } else { ?>
                <a href="index.php?page=<?=$page-1?>">이전</a>
            <?php } ?>

            <?php
                    // 시작페이지 값을 넣어줌 , 1씩 증가
                for($print_page = $s_pageNum; $print_page <= $e_pageNum; $print_page++) {
            ?>
                <a href="index.php?page=<?=$print_page?>"><?=$print_page?></a>
            <?php } ?>

            <!-- 💚 다음 버튼 -->
            <?php if($page >= $total_page) { ?>
                <a href="index.php?page=<?=$total_page?>">마지막</a>
            <?php } else { ?>
                <a href="index.php?page=<?=$page+1?>">다음</a>
            <?php } ?>
        </p>

        <div id="searchDiv">
            <span>검색하기</span>
            <input type="text" name="search">
            <button id="searchBtn">검색</button>
            <button id="rightBtn"><a href="create.php">도서등록</a></button>
        </div>
    </div>

<?php
    include_once 'include/footer.php'
?>

 

 

 

create.php

<?php
    include_once 'include/header.php'
?>
<!-- 💚 도서등록 -->
    <div id="write_book" class="inner">
        <h2>도서등록</h2>
        <h3>새로운 도서를 등록하세요.</h3>

        <form action="process/create_process.php" method="post">
            <table>
                <tr>
                    <td>글쓴이</td>
                    <td><input type="text" name="writer" required></td>
                </tr>
                <tr>
                    <td>제목</td>
                    <td><input type="text" name="title" required></td>
                </tr>
                <tr>
                    <td>출판사</td>
                    <td><input type="text" name="publisher" required></td>
                </tr>
                <tr>
                    <td>가격</td>
                    <td><input type="text" name="price" required id="priceInput"></td>
                    <!-- INT 숫자만 입력할 수 있게해주기 -->
                    <!-- (1) type 넘버로 지정 -->
                    <!-- (2) 자바스크립트로 구현, id 지정후 스크립트 추가 -->
                </tr>
                <tr>
                    <td>출판일</td>
                    <td><input type="text" name="bookdate" required></td>
                </tr>
                <tr>
                    <!-- mySQL Workbench에 새로 추가하기 / desc | text(500) -->
                    <td>책 내용</td>
                    <td>
                        <textarea name="desc" id="desc" cols="30" rows="10"></textarea>
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <button type="submit">도서등록</button>
                        <button type="reset">취소</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        let priceInput = document.querySelector('#priceInput');
        priceInput.addEventListener('input', function() {
            if(isNaN(Number(priceInput.value))) { // 숫자가 아닐 때
                alert('가격은 숫자만 입력해주세요.');
                priceInput.value = ""; // 숫자이외 입력 안되게하기
            }
        })
    </script>

<?php
    include_once 'include/footer.php'
?>

 

 

 

detail.php

<?php
    include_once 'include/header.php'
?>

<!-- 💚 도서 자세히 보기 -->

<?php
    $bookid = $_GET['id'];
    $conn = mysqli_connect('localhost', 'root', '1234', 'test');
    $query = "select * from books where id={$bookid}";
    $result = mysqli_query($conn, $query);
    $row = mysqli_fetch_array($result);
    // var_dump($row); // 확인용
?>

    <div id="write_book" class="inner">
        <h2>도서 자세히 보기</h2>
        <h3>도서 내용입니다.</h3>
        <table>
            <tr>
                <td>글쓴이</td>
                <td><?=$row['writer']?></td>
            </tr>
            <tr>
                <td>제목</td>
                <td><?=$row['title']?></td>
            </tr>
            <tr>
                <td>출판사</td>
                <td><?=$row['publisher']?></td>
            </tr>
            <tr>
                <td>가격</td>
                <td><?=$row['price']?></td>
            </tr>
            <tr>
                <td>출판일</td>
                <td><?=$row['bookdate']?></td>
            </tr>
            <tr>
                <td>내용</td>
                <td><?=$row['desc']?></td>
            </tr>
            <tr id="tr">
                <td colspan="2">
                    <form action="edit.php" method="post">
                        <input type="hidden" value="<?=$_GET['id']?>" name="id">
                        <button type="submit">수정</button>
                    </form>

                    <!-- POST 전송하려면 form태그 있어야됨 -->
                    <!-- 테이블의 기준이 되는 컬럼은 id (중요)
                        삭제할 때도 id 값을 전달해줘야됨 -->
                    <form action="process/delete_process.php" method="post">
                        <input type="hidden" value="<?=$_GET['id']?>" name="id">
                        <button type="submit">삭제</button>
                    </form>
                </td>
            </tr>
        </table>
    </div>

<?php
    include_once 'include/footer.php'
?>

 

 

 

edit.php

<?php
    include_once 'include/header.php'
?>

<?php
    // echo $_POST['id'];
    $bookid = $_POST['id'];
    $conn = mysqli_connect('localhost', 'root', '1234', 'test');
    $query = "select * from books where id={$bookid}";
    $result = mysqli_query($conn, $query);
    $row = mysqli_fetch_array($result);
?>

<!-- 💚 도서수정 -->
    <div id="write_book" class="inner">
        <h2>도서수정</h2>
        <h3>도서 내용을 변경하세요.</h3>

        <form action="process/edit_process.php" method="post">
            <table>
                <tr>
                    <td>글쓴이</td>
                    <td><input type="text" name="writer" required value ="<?=$row['writer']?>"></td>
                </tr>
                <tr>
                    <td>제목</td>
                    <td><input type="text" name="title" required value ="<?=$row['title']?>"></td>
                </tr>
                <tr>
                    <td>출판사</td>
                    <td><input type="text" name="publisher" required value ="<?=$row['publisher']?>"></td>
                </tr>
                <tr>
                    <td>가격</td>
                    <td><input type="text" name="price" required id="priceInput" value ="<?=$row['price']?>"></td>
                    <!-- INT 숫자만 입력할 수 있게해주기 -->
                    <!-- (1) type 넘버로 지정 -->
                    <!-- (2) 자바스크립트로 구현, id 지정후 스크립트 추가 -->
                </tr>
                <tr>
                    <td>출판일</td>
                    <td><input type="text" name="bookdate" required value ="<?=$row['bookdate']?>"></td>
                </tr>
                <tr>
                    <!-- mySQL Workbench에 새로 추가하기 / desc | text(500) -->
                    <td>책 내용</td>
                    <td>
                        <textarea name="desc" id="desc" cols="30" rows="10"><?=$row['desc']?></textarea>
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <!-- id 값 주기위해 input을 하나 추가 , id 번호 필요 -->
                        <input type="hidden" value="<?=$bookid?>" name="id">
                        <button type="submit">수정</button>
                        <button type="reset">취소</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        let priceInput = document.querySelector('#priceInput');
        priceInput.addEventListener('input', function() {
            if(isNaN(Number(priceInput.value))) { // 숫자가 아닐 때
                alert('가격은 숫자만 입력해주세요.');
                priceInput.value = ""; // 숫자이외 입력 안되게하기
            }
        })
    </script>

<?php
    include_once 'include/footer.php'
?>

 

 

 

gallery_board.php

<?php
    include_once 'include/header.php';
?>

<?php
  $conn = mysqli_connect('localhost', 'root', '1234', 'test');
  $query = "select * from galleryBoard";
  $result = mysqli_query($conn, $query);
  function printList() {
        global $result;
        while($row = mysqli_fetch_array($result)) {
                            // 경로 → 아이디 전달해주기 / GET 전송
            echo "<li><a href='gallery_detail.php?id={$row['id']}'>
            <img src='/php/book/images/{$row['imgsrc']}'></a></li>";
        }
    }
?>

<!-- 💚 베스트셀러목록 -->
<div id="bestSeller_page" class="inner">
    <h2>베스트셀러 목록</h2>
    <h3>베스트셀러 목록입니다.</h3>
    <ul>
        <?php
            printList();
        ?> 
    </ul>

</div>
<?php
    include_once 'include/footer.php'
?>

 

 

 

gallery_create.php

<?php
    include_once 'include/header.php'
?>
<!-- 💚 베스트셀러등록 -->

<!-- 💛 jpeg 이미지로 저장 -->

    <div id="write_book" class="inner">
        <h2>베스트셀러 등록</h2>
        <h3>베스트셀러 등록하세요.</h3>
        <!-- 파일을 업로드 할 경우 form 속성 추가하기 -->
        <!-- enctype="multipart/form-data" -->

        <form action="process/gallery_create_process.php" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>글쓴이</td>
                    <td><input type="text" name="writer" required></td>
                </tr>
                <tr>
                    <td>책표지</td>
                    <td><input type="file" name="img" required></td>
                </tr>
                <tr>
                    <td>제목</td>
                    <td><input type="text" name="title" required></td>
                </tr>
                <tr>
                    <td>출판사</td>
                    <td><input type="text" name="publisher" required></td>
                </tr>
                <tr>
                    <td>가격</td>
                    <td><input type="text" name="price" required id="priceInput"></td>
                </tr>
                <tr>
                    <td>출판일</td>
                    <td><input type="text" name="bookdate" required></td>
                </tr>
                <tr>
                    <td>책 내용</td>
                    <td>
                        <textarea name="desc" id="desc" cols="30" rows="10"></textarea>
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <button type="submit">도서등록</button>
                        <button type="reset">취소</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        let priceInput = document.querySelector('#priceInput');
        priceInput.addEventListener('input', function() {
            if(isNaN(Number(priceInput.value))) { // 숫자가 아닐 때
                alert('가격은 숫자만 입력해주세요.');
                priceInput.value = ""; // 숫자이외 입력 안되게하기
            }
        })
    </script>

<?php
    include_once 'include/footer.php'
?>

 

 

 

gallery_detail.php

<?php
    include_once 'include/header.php'
?>

<?php
    // 아이디 값이 일치하는 레코드를 조회
    $conn = mysqli_connect('localhost', 'root', '1234', 'test');
    $query = "select * from galleryBoard where id='{$_GET['id']}'";
    $result = mysqli_query($conn, $query);
    $row = mysqli_fetch_array($result);
?>

<!-- 💚 목록(board) → 베스트셀러 자세히 보기 -->
<div id="best_book" class="inner">
    <h2><?=$row['title']?></h2>
    <h3><?=$row['title']?> 내용입니다.</h3>
    <table>
        <tr>
            <td class="tdcenter">
                <img src="/php/book/images/<?=$row['imgsrc']?>" width="400">
            </td>
            <td>
                <ul>
                    <li>출판사 : <?=$row['publisher']?></li>
                    <li>글쓴이 : <?=$row['writer']?></li>
                    <li>출판일자 : <?=$row['bookdate']?></li>
                    <li>가격 : <?=$row['price']?></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td colspan="2">책소개</td>
        </tr>
        <tr>
            <td colspan="2"><?=$row['desc']?></td>
        </tr>
        <tr id="tr">
            <td colspan="2">
                <form action="gallery_edit.php" method="post">
                    <input type="hidden" name="id" value="<?=$_GET['id']?>">
                    <button type="submit">수정</button>
                </form>

                <form action="process/gallery_delete_process.php" method="post">
                    <!-- 해당 id의 레코드 값 넘겨주기 -->
                    <input type="hidden" name="id" value="<?=$_GET['id']?>">
                    <!-- 🧡 (2) 쿼리문 작성하기 싫으면 바로 삭제하기 -->
                    <input type="hidden" name="imgsrc" value="<?=$row['imgsrc']?>">
                    <button type="submit">삭제</button>
                </form>
            </td>
        </tr>
    </table>
</div>
<?php
    include_once 'include/footer.php'
?>

 

 

 

gallery_edit.php

<?php
    include_once 'include/header.php'
?>

<?php
    // $_POST['id'] // 책 번호 가지고있음
    $conn = mysqli_connect('localhost', 'root', '1234', 'test');
    $query = "select * from galleryBoard where id={$_POST['id']}";
    $result = mysqli_query($conn, $query); // mysqli_query = 쿼리 실행, 데이터베이스 형식의 파일
    $row = mysqli_fetch_array($result); // 결과 받기, 데이터베이스형식을 php형식으로 사용할 수 있게
?>

<!-- 💚 베스트셀러 도서 수정 -->

    <div id="write_book" class="inner">
        <h2>베스트셀러 도서 수정</h2>
        <h3>베스트셀러를 도서 수정하세요.</h3>
        <!-- 파일을 업로드 할 경우 form 속성 추가하기 -->
        <!-- enctype="multipart/form-data" -->

        <form action="process/gallery_edit_process.php" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>글쓴이</td>
                    <td>
                        <input type="hidden" name="id" value="<?=$row['id']?>">
                        <input type="text" name="writer" required value="<?=$row['writer']?>">
                    </td>
                </tr>
                <tr> 
                    <td>책표지</td>
                    <td>
                        <!-- 💚 눈속임 -->
                        <input type="hidden" name="old_img" value="<?=$row['imgsrc']?>">
                                                                    <!-- hidden이랑 display:none 주면 안됨 -->
                                                        <!-- 겹치기 가능 / clip:rect 보여지는걸 안보이게, opacity: 0; 줘도됨 -->
                        <input type="file" name="img" style="position: absolute; opacity:0; "
                                                            onchange="imageChange(this)" required>
                        <!-- 임의로 만듦 / 눈에 보이는건 label이지만 input이 동작하는것 --> 
                        <label class="file">파일 선택</label>
                        <label id="imglabel"><?=$row['imgsrc']?></label>
                    </td>
                </tr>
                <tr>
                    <td>제목</td>
                    <td><input type="text" name="title" required value="<?=$row['title']?>"></td>
                </tr>
                <tr>
                    <td>출판사</td>
                    <td><input type="text" name="publisher" required value="<?=$row['publisher']?>"></td>
                </tr>
                <tr>
                    <td>가격</td>
                    <td><input type="text" name="price" required id="priceInput" value="<?=$row['price']?>"></td>
                </tr>
                <tr>
                    <td>출판일</td>
                    <td><input type="text" name="bookdate" required value="<?=$row['bookdate']?>"></td>
                </tr>
                <tr>
                    <td>책 내용</td>
                    <td>
                        <textarea name="desc" id="desc" cols="30" rows="10"><?=$row['desc']?></textarea>
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <input type="hidden" value="<?=$_POST['id']?>" name="id">
                        <button type="submit">수정</button>
                        <button type="reset">취소</button>
                    </td>
                </tr>
            </table>
        </form>

    <script>
        // 배열을 문자로 변경 : split
        // 마지막 index에 제목이 담겨있음
        // innerHTML로 마지막 제목을 뿌려줌
        // function imageChange(obj) {
        //     // file 변수에 input의 value 값을 저장
        //     let file = obj.value;
        //     let arSplitUrl = file.split('\\');
        //     let arFileName = arSplitUrl[arSplitUrl.length -1];
        //     console.log(file);
        //     console.log(arSplitUrl);
        //     console.log(arFileName);
        //     if(!arFileName) {
        //         document.querySelector('#imglabel').innerHTML = "선택된 파일이 없습니다.";
        //     } else {
        //         document.querySelector('#imglabel').innerHTML = arFileName;
        //     }
        // }

        function imageChange(input) {
            // #imglabel의 내용을 input의 value값으로 변경
            // 배열의 마지막 인덱스 = 배열길이 - 1
            console.log(input.value);
            if(input.value == "") {
                document.querySelector('#imglabel').innerHTML = "선택파일없음";
            } else {
                let valueArr = input.value.split('\\'); // (\\) 두 번 해줘야 문자로 취급이됨
                document.querySelector('#imglabel').innerHTML = valueArr[valueArr.length-1];
            }
        }

        let priceInput = document.querySelector('#priceInput');
        priceInput.addEventListener('input', function() {
            if(isNaN(Number(priceInput.value))) { // 숫자가 아닐 때
                alert('가격은 숫자만 입력해주세요.');
                priceInput.value = ""; // 숫자이외 입력 안되게하기
            }
        })
    </script>
    </div>

<?php
    include_once 'include/footer.php'
?>

 

 

 

include > header.php

<?php
    session_start();
?>

<!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>

    <link rel="stylesheet" href="/php/book/css/style.css">
</head>
<body>
    <div id="wrap">
        <header>
            <h1><a href="index.php">Green Books</a></h1>
            <ul>
                <li><a href="/php/book/index.php">home</a></li>
                <li>
                    <?php
                        if(isset($_SESSION['userId'])) {
                            echo "<a href='/php/book/process/logout_process.php'>로그아웃</a>";
                        } else {
                            echo "<a href='/php/book/member/login.php'>로그인</a>";
                        }
                    ?>
                    <!-- <a href="/php/book/member/login.php">로그인</a> -->
                </li>
                <li><a href="/php/book/member/join.php">회원가입</a></li>
                <li><a href="/php/book/index.php">도서목록</a></li>
                <li><a href="/php/book/create.php">도서등록</a></li>
                <li><a href="/php/book/gallery_board.php">베스트셀러목록</a></li>
                <li><a href="/php/book/gallery_create.php">베스트셀러등록</a></li>
                <li><a href="/php/book/index.php">도서검색</a></li>
            </ul>
        </header>

        <div id="contents">

 

 

 

include > footer.php

</div>

        <footer>
            <p>copyright (c) all rights reserved.</p>
            <h1>Green Books</h1>
        </footer>
    </div>
</body>
</html>

 

 

 

css > style.css

*{margin: 0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{color: inherit; text-decoration: none;}
/* @import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap'); */

:root {
    --main-color: #ef629f;
}
body {
    /* font-family: 'Single Day', cursive, sans-serif; */
    font-size: 14px;
    line-height: 1.6;
    color: #222;
}
header {
    display: flex;
    justify-content: space-between;
    height: 80px;
    align-items: center;
    padding: 0 30px;
}
header ul {
    display: flex;
}
header ul li {
    padding: 0 20px;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#contents {
    background-image: linear-gradient(120deg, rgb(188, 124, 201), #fccb90);
    padding: 60px 0;
}
.inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
}
.inner h2 {
    border-bottom: 1px solid #fff;
    margin-bottom: 30px;
    font-size: 36px;
    font-weight: normal;
}
table {
    border-collapse: collapse;
    width: 100%;
    line-height: 40px;
    margin: 30px 0;
    text-align: center;
}
#contents_page table th {
    background: var(--main-color);
}
#contents_page table td {
    border-bottom: 1px solid #fff;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#searchDiv {
    padding: 30px;
}
#searchDiv span {
    padding-right: 50px;
}
#searchDiv input {
    width: 300px;
    line-height: 30px;
    border: none;
    outline: none;
}
#searchDiv #searchBtn {
    background: var(--main-color);
    width: 100px;
    line-height: 30px;
    color: #fff;
    border: none;
    outline: none;
}
#searchDiv #rightBtn {
    width: 100px;
    line-height: 30px;
    color: #000;
    border: none;
    outline: none;
    background: #fff;
    float: right;
    text-align: center;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
footer {
    padding: 50px 30px;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#write_book table td {
    border-bottom: 1px solid #fff;
    padding: 8px;
}
#write_book table td:nth-child(1){
    width: 20%;
}
#write_book table td:nth-child(2){
    width: 80%;
    text-align: left;
}
#write_book input, #write_book textarea {
    width: 80%;
    line-height: 40px;
    padding-left: 20px;
    border: none;
    outline: none;
}
#write_book button {
    background: #fff;
    border: none;
    outline: none;
    width: 120px;
    border-radius: 6px;
    text-align: center;
    color: #222;
    line-height: 40px;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#contents #tr form{
    display: inline;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#bestSeller_page ul {
    display: flex;
    flex-wrap: wrap;
}
#bestSeller_page ul li {
    width: 33.3333%;
    padding: 80px 0;
    text-align: center;
}
#bestSeller_page ul li img {
    width: 70%;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
#best_book table {
    border-collapse: collapse;
}
#best_book table td {
    border-bottom: 1px solid #fff;
    text-align: left;
    padding: 6px 16px;
}
#best_book table .tdcenter {
    text-align: center;
}
#best_book button {
    background: #fff;
    border: none;
    outline: none;
    width: 120px;
    border-radius: 6px;
    text-align: center;
    color: #222;
    line-height: 40px;
}
#best_book #tr form{
    display: inline;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.file {
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    color: #333;
    background-color: #e0e0e0;
    padding: 6px 12px;
}