diff --git a/ecc_rest.html b/ecc_rest.html
new file mode 100644
index 0000000..4584b87
--- /dev/null
+++ b/ecc_rest.html
@@ -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>
+
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..40e4aad
--- /dev/null
+++ b/styles.css
@@ -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; /* 회색 구분선 */
+}
+
+
+
+
+
+
+
