- CSS : 게시판 글쓰기(write.html)

/* 게시판 글쓰기 */
.write {
    width: 700px; margin: 0 auto;
    border-top: 3px solid gray; border-bottom: 3px solid gray;
}
.write input {width: 676px; padding: 10px; margin: 12px auto 0;}
.write .text {table-layout: fixed;
    height: 300px; white-space: pre-line; word-break: break-all;
}
.write .button {padding: 0 200px; margin: 15px auto;}    
.write .button a {
    border: 1px solid black; background: gainsboro;
    margin: 10px; padding: 5px;
    text-decoration: none; color: black;
}
.write .button a:hover {color: blueviolet;}
.write p {text-align: center;}

- HTML : 게시판 글쓰기(write.html)

<!DOCTYPE html>
<html lang="ko">
<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>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <div class="homebox">
            <div>
                <a href="index.html" class="logo"></a>
            </div>
        </div>
    </header>

    <nav>
        <div class="menubox">
            <ul>
                <li><a href="notice.html">공지사항</a></li>
                <li><a href="free.html">자유게시판</a></li>
            </ul>
        </div>
    </nav>

    <main>
        <form class="write">
            <input type="text" placeholder="제목을 입력해주세요." required>
            <hr>
            <input type="text" placeholder="내용을 입력해주세요." class="text" required>
            <div class="button">
                <p><a href="free.html">글쓰기</a><a href="free.html">취소</a></p>
            </div>
        </form>
    </main>

    <footer>
        <div>
            <p>Copyright &copy; 김예찬 all rights reserved</p>
        </div>
    </footer>
</body>
</html>

게시판 글쓰기 : write.html

- 화면구현 페이지

 

게시판 글쓰기

Copyright © 김예찬 all rights reserved

www.yermi.co.kr

티스토리툴바