diff --git a/css/css.css b/css/css.css new file mode 100644 index 0000000..47c4c7b --- /dev/null +++ b/css/css.css @@ -0,0 +1,2 @@ +@import url(style.css ); +@import url(media.css ); diff --git a/css/media.css b/css/media.css new file mode 100644 index 0000000..d2e93e3 --- /dev/null +++ b/css/media.css @@ -0,0 +1,39 @@ +@media (max-width: 1000px){ + .board_wrap{ + width: 100%; + min-width: 320px; + padding: 0 30px; + box-sizing: border-box; + } + + .board_list .num, + .board_list .writer, + .board_list .count{ + display: none; + } + .board_list .date{ + width: 40%; + } + + .board_list .title{ + text-indent: 10px; + } + + .board_list .top .title{ + text-indent: 0; + } + + .board_page a{ + width: 26px; + height: 26px; + } + + .board_page a.bt{ + padding-top: 7px; + } + + .board_page a.num{ + padding-top: 6px; + } + +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..24e43d3 --- /dev/null +++ b/css/style.css @@ -0,0 +1,281 @@ + *{ + margin:0; + padding:0; + } + + html{ + font-size: 10px; + } + + ul,li{ + list-style: none; + } + + a{ + text-decoration: none; + color: inherit; + } + + .board_wrap{ + width: 1000px; + margin: 100px auto; + } + + .board_title{ + margin-bottom: 30px; + } + + .board_title strong{ + font-size: 3rem; + } + + .board_title p{ + margin-top: 5px; + font-size: 1.4rem; + } + + .bt_wrap{ + margin-top: 30px; + font-size:0; + text-align: center; + } + + .bt_wrap a{ + display: inline-block; + min-width: 80px; + margin-left: 10px; + padding: 10px; + border: 1px solid #000; + border-radius: 2px; + font-size: 1.4rem; + } + + .bt_wrap a:first-child{ + margin-left: 0; + } + + .bt_wrap a.on{ + background: #000; + color: #fff; + } + + .board_list{ + width: 100%; + border-top: 2px solid #000; + } + + .board_list > div{ + border-bottom: 1px solid #ddd; + font-size: 0; + } + + .board_list > div.top{ + border-color: 1px solid #999; + } + + .board_list > div:last-child{ + border-bottom: 1px solid #000; + } + + .board_list > div > div{ + display: inline-block; + padding: 15px 0; + text-align: center; + font-size: 1.4rem; + } + + .board_list > div.top >div{ + font-weight: 600; + } + + .board_list .num{ + width: 10%; + } + + .board_list .title{ + width: 60%; + text-align: left; + } + + .board_list .top .title{ + text-align: center; + } + + .board_list .writer{ + width: 10%; + } + + .board_list .date{ + width: 10%; + } + + .board_list .count{ + width: 10%; + } + + .board_page{ + margin-top: 30px; + text-align: center; + font-size: 0; + } + + .board_page a{ + display: inline-block; + width: 32px; + height: 32px; + box-sizing: border-box; + border: 1px solid #ddd; + border-left: 0; + vertical-align: middle; + line-height: 100%; + } + + .board_page a.bt{ + padding-top: 9px; + font-size: 1.2rem; + letter-spacing: -1px; + } + + .board_page a.num{ + padding-top: 8px; + font-size: 1.4rem; + } + + .board_page a.num.on{ + border-color: #000; + background: #000; + color: #fff; + } + + .board_page a:first-child{ + border-left: 1px solid #ddd; + } + + .board_view{ + width: 100%; + border-top: 2px solid #000; + } + + .board_view .title{ + padding: 20px 15px; + border-bottom: 1px solid #ddd; + font-size: 2rem; + } + + .board_view .info{ + padding: 15px; + border-bottom: 1px solid #999; + font-size: 0; + } + + .board_view .info dl{ + position: relative; + display: inline-block; + padding: 0 20px; + } + + .board_view .info dl:first-child{ + padding-left: 0; + } + +.board_view .info dl::before{ + content: ""; + position: absolute; + top: 1; + left: 0; + display: block; + width: 1px; + height: 13px; + background: #ddd; +} + +.board_view .info dl:first-child::before{ + display: none; +} + + .board_view .info dl dt, + .board_view .info dl dd{ + display: inline-block; + font-size: 1.4rem; + } + + .board_view .info dl dd{ + margin-left: 10px; + color: #777; + } + + .board_view .cont{ + padding: 15px; + border-bottom: 1px solid #000; + line-height: 160%; + font-size: 1.4rem; + } + + .board_write{ + border-top: 2px solid #000; + } + + .board_write .title, + .board_write .info{ + padding: 15px; + } + + .board_write .info{ + border-top: 1px dashed #ddd; + border-bottom: 1px solid #000; + font-size: 0; + } + +.board_write .title dl{ + font-size: 0; +} + + .board_write .info dl{ + display: inline-block; + width: 50%; + vertical-align: middle; + } + +.board_write .title dt, +.board_write .title dd, +.board_write .info dt, +.board_write .info dd{ + display: inline-block; + vertical-align: middle; + font-size: 1.4rem; +} + +.board_write .title dt, +.board_write .info dt{ + width: 100px; +} + +.board_write .title dd{ + width: calc(100%-100px); +} + +.board_write .title input[type="text"], +.board_write .info input[type="text"], +.board_write .info input[type="password"]{ + padding: 10px; + box-sizing: border-box; +} + + +.board_write .title input[type="text"]{ + width: 80%; +} + + .board_write .cont{ + border-bottom: 1px solid #000; + } + + .board_write .cont textarea{ + display: block; + width: 100%; + height: 300px; + padding: 15px; + box-sizing: border-box; + border: 0; + resize: vertical; + } \ No newline at end of file diff --git a/edit.html b/edit.html new file mode 100644 index 0000000..8970b59 --- /dev/null +++ b/edit.html @@ -0,0 +1,145 @@ + + + + + + 게시글 수정 + + + +
+
+ 게시글 수정 +

게시글을 수정하세요.

+
+
+
+
+
+
+
제목
+
+
+
+
+
작성자
+
+
+
+
비밀번호
+
+
+
+
+ +
+
+
+
기록일자
+
+
+
+
장소
+
+
+
+
태그
+
+
+
+
이미지
+
+
+
+
공개 여부
+
+ + +
+
+
+
+
+ + 취소 +
+
+
+
+
+ + + \ No newline at end of file diff --git a/list.html b/list.html new file mode 100644 index 0000000..483e34e --- /dev/null +++ b/list.html @@ -0,0 +1,185 @@ + + + + + + 게시글 목록 + + + + +
+
+ 게시글 목록 +

게시글 목록을 확인할 수 있습니다.

+
+ + +
+ + + + + +
+ +
+
+
+
번호
+
제목
+
글쓴이
+
작성일
+
조회
+ +
+
+ +
+
+
+ 등록 +
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..030a7f1 --- /dev/null +++ b/script.js @@ -0,0 +1,79 @@ +document.addEventListener("DOMContentLoaded", function() { + const postForm = document.getElementById('postForm'); + + if (postForm) { + postForm.addEventListener('submit', function(event) { + event.preventDefault(); + + const title = document.getElementById('title').value; + const author = document.getElementById('author').value; + const password = document.getElementById('password').value; + const content = document.getElementById('content').value; + + if (!title || !author || !password || !content) { + alert("모든 필드를 입력하세요."); + return; + } + + const posts = JSON.parse(localStorage.getItem('posts')) || []; + const newPost = { + id: posts.length ? posts[posts.length - 1].id + 1 : 1, + title, + author, + password, + content, + date: new Date().toISOString().split('T')[0], + views: 0 + }; + + posts.push(newPost); + localStorage.setItem('posts', JSON.stringify(posts)); + alert("게시글이 등록되었습니다."); + window.location.href = 'list.html'; + }); + } +}); + + +document.addEventListener("DOMContentLoaded", function() { + const editForm = document.getElementById('editForm'); + const urlParams = new URLSearchParams(window.location.search); + const postId = parseInt(urlParams.get('id'), 10); + + if (editForm) { + const posts = JSON.parse(localStorage.getItem('posts')) || []; + const post = posts.find(p => p.id === postId); + + if (post) { + document.getElementById('title').value = post.title; + document.getElementById('author').value = post.author; + document.getElementById('password').value = post.password; + document.getElementById('content').value = post.content; + } + + editForm.addEventListener('submit', function(event) { + event.preventDefault(); + + const title = document.getElementById('title').value; + const author = document.getElementById('author').value; + const password = document.getElementById('password').value; + const content = document.getElementById('content').value; + + if (!title || !author || !password || !content) { + alert("모든 필드를 입력하세요."); + return; + } + + const index = posts.findIndex(p => p.id === postId); + if (index > -1) { + posts[index] = { ...posts[index], title, author, password, content }; + localStorage.setItem('posts', JSON.stringify(posts)); + alert("게시글이 수정되었습니다."); + window.location.href = 'list.html'; + } else { + alert("게시글을 찾을 수 없습니다."); + } + }); + } +}); + diff --git a/view.html b/view.html new file mode 100644 index 0000000..e771a0b --- /dev/null +++ b/view.html @@ -0,0 +1,188 @@ + + + + + + 게시글 보기 + + + + +
+
+ 게시글 보기 +
+
+
+

+

작성자:

+

작성일:

+

기록일:

+

장소:

+

조회수:

+

공감:

+

댓글 수: 0

+

태그:

+

공개 여부:

+
+ +
+ + + 목록 +
+ + +
+

댓글

+
+
+ + + +
+
+
+
+
+ + + + diff --git a/write.html b/write.html new file mode 100644 index 0000000..08b0a52 --- /dev/null +++ b/write.html @@ -0,0 +1,128 @@ + + + + + + 게시글 등록 + + + + +
+
+ 게시글 등록 +

새 게시글을 등록하세요.

+
+
+
+
+
+
+
제목
+
+
+
+
+
작성자
+
+
+
+
비밀번호
+
+
+
+
+ +
+
+
+
기록일자
+
+
+
+
장소
+
+
+
+
태그
+
+
+
+
이미지
+
+
+
+
공개 여부
+
+ + +
+
+
+
+
+ + 취소 +
+
+
+
+
+ + +