- <head>:문자 인코딩, 뷰포트 설정, 페이지 제목 등이 포함됩니다.
- <style>: CSS 스타일 입니다.
- <body>: 실제로 사용자가 웹사이트에서 보게 될 내용을 담고 있습니다.
- header: 헤더 영역으로, "공지사항 페이지"라는 제목이 들어갑니다.
- div class="container": 이 div 요소 안에 공지사항 리스트가 나타나게 됩니다.
- script src="/noticeData.js": 이 스크립트 태그는 외부 JavaScript 파일인 noticeData.js를 가져옵니다.
- inline JavaScript 코드:
- 공지사항 데이터(noticeData)를 순회하면서 각 공지사항 아이템(제목과 내용)을 생성
- 위에서 생성한 각 아이템들을 화면에 표시
notice.html코드입니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>공지사항 페이지</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
rel="stylesheet"
/>
<style>
/* 기본 스타일 설정 */
body {
font-family: "Noto Sans KR", sans-serif;
font-size: 18px;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
/* 헤더 스타일 설정 */
header {
background-color: #3f51b5;
padding: 20px;
text-align: center;
font-size: 36px;
font-weight: bold;
color: #ffffff;
}
.container {
margin: 30px;
}
/* 제목 스타일 설정 */
h2 {
font-size: 32px;
margin-bottom: 20px;
text-align: center;
color: #4caf50;
font-weight: bold;
border-bottom: 2px solid #4caf50;
display: inline-block;
padding-bottom: 5px;
}
/* 공지사항 아이템 스타일 설정 */
.notice-item {
background-color: #ffffff;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
color: inherit;
margin-bottom: 20px;
}
/* 공지사항 제목 스타일 설정 */
.notice-title {
font-weight: bold;
font-size: 20px;
}
/* 공지사항 내용 스타일 설정 */
.notice-content {
font-size: 14px;
color: #666666;
}
</style>
</head>
<body>
<header>공지사항 페이지</header>
<!-- 컨테이너 및 공지사항 섹션 -->
<div class="container">
<h2>공지사항</h2>
<div id="noticeList">
<!-- 여기에 자동으로 공지사항이 생성됩니다. 수정할 필요가 없습니다. -->
</div>
</div>
<script src="/noticeData.js"></script>
<script>
/* 공지사항 리스트를 가져옵니다. */
const noticeList = document.getElementById("noticeList");
/* 공지사항 데이터(noticeData)를 순회합니다. */
for (const notice of noticeData) {
/* 공지사항 아이템 생성 */
const noticeItem = document.createElement("div");
noticeItem.classList.add("notice-item");
/* 공지사항 제목 생성 */
const noticeTitle = document.createElement("div");
noticeTitle.classList.add("notice-title");
noticeTitle.textContent = notice.title;
noticeItem.appendChild(noticeTitle);
/* 공지사항 내용 생성 */
const noticeContent = document.createElement("div");
noticeContent.classList.add("notice-content");
noticeContent.textContent = notice.content;
noticeItem.appendChild(noticeContent);
/* 공지사항 리스트에 아이템 추가 */
noticeList.appendChild(noticeItem);
}
</script>
</body>
</html>
반응형
'Project > 순살 아파트' 카테고리의 다른 글
| 순살 아파트) 사이트 배포 (0) | 2023.08.27 |
|---|---|
| 순살 아파트) server.js (0) | 2023.08.27 |
| 순살 아파트) news.html (0) | 2023.08.27 |
| 순살 아파트) map.html 코드 (0) | 2023.08.27 |
| 순살 아파트) index.html 코드 (0) | 2023.08.27 |