Skip to content

[프로젝트 ecc rest html] #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sejin-coding wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[프로젝트 ecc rest html] #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions ecc_rest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECC Rest</title>
<link rel="stylesheet" href="styles.css">


<script>
document.addEventListener("DOMContentLoaded", function() {
const floorButtons = document.querySelectorAll(".floor-button");
const descriptions = document.querySelectorAll(".description");

floorButtons.forEach(button => {
button.addEventListener("click", () => {
const floor = button.getAttribute("data-floor");
descriptions.forEach(description => {
description.classList.remove("active");
if (description.getAttribute("data-floor") === floor) {
description.classList.add("active");
}
});
});
});
});
</script>
</head>
<body>
<header>
<h1 class="main-title">ECC Rest</h1>
<p class="subtitle">ECC에서 먹고 쉬는 곳</p>
</header>
<section class="content">
<div class="floor-buttons">
<button class="floor-button" data-floor="1">B1F</button>
<button class="floor-button" data-floor="2">B2F</button>
<button class="floor-button" data-floor="3">B3F</button>
<button class="floor-button" data-floor="4">B4F</button>
</div>
<div class="floor-description">
<p class="description" data-floor="1">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxOTA0MTlfMjE5%2FMDAxNTU1NjM4ODMwNTc2.jWC5PisFnzXJBINgt-l_M9KvDDtdXhJiLD7bsyyTd2Qg.v3DAytIy__UF-KFjG9z4iTAxEeWLDdx_HruNRT7FfPsg.JPEG.iljufoundation%2F%25C0%25D7%25BF%25A9%25B0%25E8%25B4%25DC.jpg&type=sc960_832" alt="B1F 이미지"> <br>
B1F에는 많은 회의실과 강의실이 있습니다.<br>
- 정수기: 강의실 B101 옆 위치<br>
- 취식 가능 공간: 있음<br>
- 휴게 공간: 잉여계단, 중간에 배치된 동그라미 테이블
</p>
<p class="description" data-floor="2">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F030%2F2020%2F12%2F17%2F0002919090_002_20201217164532752.jpg&type=sc960_832" alt="B1F 이미지"> <br>

B2F는 여러 열람실들과 강의실이 있습니다.
<br>
- 정수기: 열람실 옆 위치<br>
- 취식 가능 공간: 있음<br>
- 휴게 공간: 중간에 배치된 동그라미 테이블, 여러 계단, 엘리베이터 앞 쇼파
</p>
<p class="description" data-floor="3">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDA4MTJfMjQz%2FMDAxNTk3MjI4Nzc0MjI4.A6PqfEeMuKep8J0e89fypHIzYsAoKZhvVgSyX2qm1hAg.6gCYZDcU86D-awQ0bbAr8hgATZUhEfD2qjzfcode_wEg.JPEG.choosana%2FKakaoTalk_20200812_193855427.jpg&type=a340" alt="B1F 이미지"> <br>
B3F에는 다목적 휴게실과 강의실이 있습니다.
<br>
- 정수기: 열람실 옆 위치<br>
- 취식 가능 공간: 있음<br>
- 휴게 공간: 중간에 배치된 동그라미 테이블
</p>
<p class="description" data-floor="4">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2FMjAxODA5MzBfNDMg%2FMDAxNTM4Mjg1NjA1OTc4.db1HFzas0TkhM6laXDZRI8Y0eFZxp-ymN4NZjcpZdTgg.r_bJUcilypmt2h9CAn62tBFypANmS2X-PHWTq2i-wtgg.JPEG.dldms4353%2FexternalFile.jpg&type=sc960_832" alt="B2F 이미지"> <br>
B4F에는 다양한 편의시설이 제공됩니다.<br>
- 편의점: GS25<br>
- 베이커리: 뚜레쥬르<br>
- 휴게 음식점: 닥터로빈, 이화김밥, 마이델플레이스, 샐러디<br>
- 정수기: GS25 옆에 위치<br>
- 취식 가능 공간: 있음<br>
- 휴게 공간: 삼성 극장 옆, 기념품샵 앞 벤치
</p>
</div>
</section>
</body>
</html>




96 changes: 96 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/* Reset default margin and padding */
body, h1, p {
margin: 0;
padding: 0;
}

/* Set background color and font styles */
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
color: #333333;
}

/* Style header */
header {
background-color: #004a29; /* 진녹색 */
color: #ffffff;
text-align: center;
padding: 1em 0;
}

header h1 {
font-size: 3em; /* 큰 글씨 크기 */
}

.subtitle {
font-size: 1.2em; /* 큰 글씨 크기 */
}

/* Style content section */
.content {
margin: 2em;
padding: 1em;
background-color: #f7f7f7; /* 아이보리 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.floor-buttons {
display: flex;
justify-content: space-between; /* 공간을 4등분으로 나누기 */
margin-top: 1em;
}

.floor-button {
background-color: #949494; /* 회색 */
border: none;
color: #ffffff;
padding: 1em 3em; /* 더 넓은 버튼 */
cursor: pointer;
font-size: 1.2em; /* 버튼 글씨 크기 */
transition: background-color 0.3s ease-in-out; /* 부드러운 배경색 전환 */
}

.floor-button.active {
background-color: #004a29; /* 진녹색 */
}

.floor-description {
margin-top: 2em; /* 설명과의 간격 늘리기 */
padding: 1em; /* 내용 주위에 여백 추가 */
background-color: #ffffff; /* 흰 배경색 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: left; /* 설명 텍스트 왼쪽 정렬 */
font-size: 1.1em; /* 조금 줄인 설명 글씨 크기 */
color: #333333;
line-height: 1.6; /* 줄 간격 늘리기 */
}

.floor-description h2 {
font-size: 1.4em; /* 문장 부분의 글씨 크기 */
margin-bottom: 0.5em; /* 문장 아래 여백 추가 */
}

/* Show description for the selected floor */
.description {
display: none;
}

.description.active {
display: block;
}


/* Style the horizontal rule for floor descriptions */
.floor-description hr {
margin: 1em 0; /* 상하 여백 추가 */
border: none;
border-top: 2px solid #ddd; /* 회색 구분선 */
}