6. 디자인 게시판 만들기-EDIT

write에서 글쓰기를 진행 후 수정을 할 필요가 있을때 이전 write.html과 동일 해도 되지만 우리는 연습이 필요하기 때문에 다시 한번 edit.html에 작성을 해보기로 하자.

새로운 edit.html 파일 생성 후 경로 설정

1. HTML

// edit.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">
    <link rel="stylesheet" href="../BOARD/style.css">
    <title>글수정</title>
</head>
<body>
    <div class="card">
        <div class="card-header4"><a href="../BOARD/index.html"><h1>게시판</h1></a></div>
        <div class="card-edit">
            <div class="myinfo">
                이름<input type="text" placeholder="이름을 입력하세요." value="김이름">
                비밀번호<input type="password" placeholder="비밀번호를 입력하세요." value="1234">
            </div>
            <div class="title">
                제목<input type="text" placeholder="제목을 입력하세요." value="안녕하세요. 이것은 게시판 제목입니다.">
            </div>
            <div class="msg">
                <!-- textarea에서는 input의 value와는 다르게 textarea 안에 내용을 작성하며 tab을 없앤다. -->
                내용<textarea placeholder="내용을 입력하세요.">
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
                </textarea>
                <input type="file">
            </div>
        </div>

        <div class="btn-edit">
            <a href="../BOARD/index.html">작성</a>
        </div>
    </div>


</body>
</html>

2. CSS

// edit.css
/* view.html */
.card-view {
    text-align: center;
    padding: 30px;
}

.card-view .title {
    margin-top: 30px;
    margin-bottom: 30px;
}

.card-view .myinfo {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    margin: auto;
    width: 400px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.card-view .myinfo dl {
    display: inline-block;
}

.card-view .myinfo dl dt, dd {
    display: inline-block;
    font-size: small;
}

.card-view .myinfo dl dt {
    margin-left: 5px;
    color: #999;
}

.card-view .myinfo dl dd {
    margin-right: 10px;
    margin-left: 5px;
}

.cont {
    margin-top: 30px;
    padding-bottom: 30px;
}

.btn-view {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 10px;
    margin: 10px 10px 20px 10px;
}

.btn-view a {
    padding: 10px;
    border-radius: 10px;
    background-color: tomato;
    color: #fff;
}

/* edit.html */
.card-header4 {
    padding: 20px;
    text-align: center;
}

.card-edit {
    padding: 20px;
}

.card-edit input {
    margin-left: 10px;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 10px;
}

.card-edit .myinfo input[type="text"] {
    width: 25%;
    margin-right: 50px;
}

.card-edit .myinfo input[type="password"] {
    width: 31%;
}

.card-edit .title input {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 85.5%;
}

.card-edit .msg textarea {
    margin-left: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: inset 3px 3px 10px #e6e6e6;
    min-width: 85.5%;
    max-width: 85.5%;
    min-height: 200px;
    max-height: 200px;
    vertical-align: top;
}


.card-edit .msg input {
    border: none;
    margin-left: 40px;
    padding: 10px;
}

.btn-edit {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 10px 10px 20px 10px;
    padding: 10px;
}

.btn-edit a {
    padding: 10px;
    background-color: tomato;
    color: #fff;
    border-radius: 10px;
}

3. 결과

아래의 기능들을 구현해보았다. 이전 write.css에서 .card-write input, textarea 가 같이 적용이 되어 edit.html의 textarea 작성시 바로 css가 적용되어 이 부분을 찾느라 시간이 소요된 것 같다. 그래도 해결이 되니 좋구나.

1. edit-html 작성하기
2. edit-css 작성하기
3. edit-css 작성 버튼 만들기

이로써 디자인 게시판 만들기를 완료하였다. 비슷한 유형의 html과 css를 만들면서 손에 익히고 작동 원리를 알아가는 시간을 가져서 보람있었다.

다음은 기본 적인 부분을 조금 더 알아기는 시간을 가져보려한다.

전체적인 code는 git을 통해 확인해 보시기 바랍니다. 감사합니다.

이상!😆😆😆

저작자표시

'코딩배우기 > HTML, CSS' 카테고리의 다른 글

5. 디자인 게시판 만들기-VIEW (0)	2022.07.20
4. 디자인 게시판 만들기-WRITE (0)	2022.07.20
3. 디자인 게시판 만들기-BOARD (0)	2022.07.20
2. 기본 게시판 만들기 (0)	2022.07.19
1. 오늘부터 코딩 1일 (0)	2022.07.19

1. HTML

2. CSS

3. 결과

'코딩배우기 > HTML, CSS' 카테고리의 다른 글

티스토리툴바