diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/index.html" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/index.html"
index 95fb2c8..8f80f0d 100644
--- "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/index.html"	
+++ "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/index.html"	
@@ -43,17 +43,19 @@
       </ul>
       <div class="scroll-right">></div>
     </section>
+      
     <nav class="nav">
       <div>📸✌️ 클릭하면 이동해요! ✌️ 📸</div>
       <ul>
         <li><a href="#france">프랑스</a></li>
         <li><a href="#portugal">포르투갈</a></li>
         <li><a href="#spain">스페인</a></li>
-      </ul>
     </nav>
+      
     <section class="france">
       <header class="country" id="france">프랑스 🇫🇷</header>
       <div class="img-france">
+
         <div class="each">
           <img src="./pics/1013-1.jpeg" alt="미키모양 팬케이크 & 마시멜로우" />
           <div class="hover-text">
@@ -138,6 +140,20 @@
             <p>230201</p>
           </div>
         </div>
+
+        <img src="./pics/1013-1.jpeg" alt="미키모양 팬케이크 & 마시멜로우" />
+        <img src="./pics/1013-2.jpeg" alt="디즈니랜드 30주년 일루미네이션" />
+        <img src="./pics/1013-3.jpeg" alt="쉐익스피어 서점에서" />
+        <img src="./pics/1013-4.jpeg" alt="파리의 인형들" />
+        <img src="./pics/1013-5.jpeg" alt="프랑스 동네 빵집1" />
+        <img src="./pics/1013-6.jpeg" alt="프랑스 동네 빵집2" />
+        <img src="./pics/1013-7.jpeg" alt="디즈니랜드 정문에서" />
+        <img src="./pics/1013-8.jpeg" alt="낭뜨의 야경" />
+        <img src="./pics/1013-9.jpeg" alt="에펠탑을 봐서 신난 다현이" />
+        <img
+          src="./pics/KakaoTalk_Photo_2023-10-09-15-33-43 022.jpeg"
+          alt="오르세 미술관 가는 길"
+        />
       </div>
     </section>
     <section class="portugal">
@@ -202,6 +218,8 @@
     </section>
     <div class="top-button"><a href="#head">^</a></div>
     <footer>2023.01 ~ 2023.03</footer>
+
     <script src="./script.js"></script>
+
   </body>
 </html>
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 003.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 003.jpeg"
deleted file mode 100644
index 43f1a88..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 003.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg"
deleted file mode 100644
index 4df450b..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 006.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 006.jpeg"
deleted file mode 100644
index 819bad6..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 006.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 008.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 008.jpeg"
deleted file mode 100644
index 355fdc1..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 008.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 009.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 009.jpeg"
deleted file mode 100644
index f835c13..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-07 009.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-08 010.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-08 010.jpeg"
deleted file mode 100644
index d429978..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-08 010.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-08 017.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-08 017.jpeg"
deleted file mode 100644
index 7ea8bd6..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-08 017.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 019.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 019.jpeg"
deleted file mode 100644
index 44fcea8..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 019.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg"
deleted file mode 100644
index abeb70e..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg"
deleted file mode 100644
index e78fd17..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-10 026.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-10 026.jpeg"
deleted file mode 100644
index 6bc69d4..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-10 026.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-39 001.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-39 001.jpeg"
deleted file mode 100644
index ee23335..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-39 001.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg"
deleted file mode 100644
index 9cfeb5f..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 005.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 005.jpeg"
deleted file mode 100644
index cc3457a..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 005.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg"
deleted file mode 100644
index f5fc604..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 007.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 007.jpeg"
deleted file mode 100644
index 137eec1..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-40 007.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg"
deleted file mode 100644
index 59dcd2c..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg"
deleted file mode 100644
index fe7427f..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-43 022.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-43 022.jpeg"
deleted file mode 100644
index 374d1d7..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/KakaoTalk_Photo_2023-10-09-15-33-43 022.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\234.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\234.jpeg"
deleted file mode 100644
index f2a82da..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\234.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\2342.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\2342.jpeg"
deleted file mode 100644
index 2634c6e..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\2342.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\2343.jpeg" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\2343.jpeg"
deleted file mode 100644
index c2e88aa..0000000
Binary files "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/pics/\352\260\200\353\241\2343.jpeg" and /dev/null differ
diff --git "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/style.css" "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/style.css"
index 54d2009..3b75597 100644
--- "a/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/style.css"	
+++ "b/1\354\243\274\354\260\250/3.\354\233\250\353\271\204\354\235\230 \354\202\254\354\247\204\352\264\200/style.css"	
@@ -5,7 +5,9 @@ html {
 body {
   font-weight: bold;
   background-color: #ecffdc;
+
   margin: 0;
+
 }
 
 a {
@@ -56,6 +58,7 @@ li {
   height: 28rem;
   align-items: center;
   position: relative;
+
 }
 
 /* ::-webkit-scrollbar {
@@ -146,6 +149,7 @@ li {
   width: 70%;
   text-align: center;
   justify-content: center;
+
   gap: 0.5rem;
   margin: 1rem auto;
 }
@@ -176,7 +180,9 @@ li {
 }
 
 .img-portugal-sub div {
+
   width: 12rem;
+
   height: 20rem;
   flex-grow: 1;
   margin: 0 auto;
@@ -244,6 +250,7 @@ footer {
   font-size: 2.5rem;
 }
 
+
 .more-button {
   border: 1px solid black;
   cursor: pointer;
@@ -275,4 +282,5 @@ footer {
   font-weight: bold;
   color: mediumaquamarine;
   cursor: pointer;
+
 }
diff --git "a/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/index.html" "b/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/index.html"
new file mode 100644
index 0000000..10d2185
--- /dev/null
+++ "b/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/index.html"
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>가계부</title>
+</head>
+<body>
+    <header>다현이의 가계부</header>
+    <div class="my-account">
+        <div class="inner">
+            <div class="inner-1">나의 자산</div>
+            <div class="inner-2">2000723</div>
+            <div class="inner-3">
+                <div style="color: red;">+30000</div>
+                <div style="color:blue">-500000</div>
+            </div>
+        </div>
+    </div>
+    <div class="list-header-1"> < 10월 1일 > </div>
+    <div class="list-header-2">
+        <div class="title">내역 리스트</div>
+        <div class="button">
+          <input type="checkbox" checked>수입</input>  <!-- checked로 default -->
+          </div>
+            <div class="button">
+                <input type="checkbox" checked>지출</input>
+            </div>
+    </div>
+    <section class="list-real">
+
+        <ul class="list-indiv">
+        <li class="category">식비</li>
+        <li class="content">버거킹 문정역</li>
+        <li class="price">-10800</li>
+        <li class="x">x</li>
+        </ul>
+
+        <ul class="list-indiv">
+            <li class="category">취미</li>
+            <li class="content">포토그레이강남2호첨</li>
+            <li class="price">-5000</li>
+            <li class="x">x</li>
+        </ul>
+
+        <ul class="list-indiv">
+                <li class="category">식비</li>
+                <li class="content">내가찜한닭</li>
+                <li class="price">-18000</li>
+                <li class="x">x</li>
+        </ul>
+
+
+        <ul class="list-indiv">
+                    <li class="category">월급</li>
+                    <li class="content">꼰떼넨떼</li>
+                    <li class="price" style="color: red;">+7000000</li>
+                    <li class="x">x</li>
+        </ul>
+
+        <ul class="list-indiv">
+            <li class="category">취미</li>
+            <li class="content">인터파크</li>
+            <li class="price">-110000</li>
+            <li class="x">x</li>
+        </ul>
+
+    </section>
+    <footer class="list-add">
+        <div class="button">+</div>
+    </footer>
+    <script src="./script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/script.js" "b/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/script.js"
new file mode 100644
index 0000000..a16ec7e
--- /dev/null
+++ "b/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/script.js"
@@ -0,0 +1,25 @@
+const INIT_BALANCE = 0;
+const HISTORY_LIST = {
+    0: {
+        category : "식비",
+        main : '버거킹',
+        price : 10800
+    },
+    1: {
+        category : "식비2",
+        main : '버거킹',
+        price : 10800
+    },
+    2: {
+        category : "식비3",
+        main : '버거킹',
+        price : 10800
+    },
+    3: {
+        category : "식비4",
+        main : '버거킹',
+        price : 10800
+    },
+}
+
+let balance = document.querySelectorAll('category'); 
\ No newline at end of file
diff --git "a/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/style.css" "b/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/style.css"
new file mode 100644
index 0000000..4243013
--- /dev/null
+++ "b/1\354\243\274\354\260\250/4.\352\260\200\352\263\204\353\266\200/style.css"
@@ -0,0 +1,142 @@
+body {
+  border: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  line-height: 50px; /*글씨가 세로 기준 가운데에 오게*/
+  text-align: center; /*글씨가 가로 기준 가운데에 오게*/
+  font-size: 25px;
+  font-weight: bold;
+  background-color: bisque;
+}
+
+.my-account {
+  height: 150px;
+  display: flex;
+  align-items: center;
+}
+
+.my-account .inner {
+  height: 110px;
+  width: 80%;
+  margin: 0 auto; /*박스 가로 중앙정렬 */
+  background-color: bisque;
+  border-radius: 30px;
+  text-align: center; /*글씨 가운데 정렬*/
+  border: 5px solid salmon;
+  padding: 5px;
+}
+
+.inner-1 {
+  margin-top: 3px;
+  line-height: 30px;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.inner-2 {
+  line-height: 60px;
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.inner-3 {
+  display: flex;
+  justify-content: space-around;
+}
+
+.list-header-1 {
+  height: 35px;
+  line-height: 35px;
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.list-header-2 {
+  display: flex;
+  margin: 0 15px;
+  height: 35px;
+  line-height: 35px;
+}
+
+.list-header-2 .title {
+  width: 60%;
+  font-weight: bold;
+}
+
+.list-header-2 .button {
+  width: 20%;
+  border-radius: 5px;
+  color: white;
+  background-color: salmon;
+  margin: 0 5px;
+  text-align: center;
+}
+
+.list-real {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 300px;
+  padding: 10px 0;
+  overflow-y: scroll;
+}
+
+.list-real ul {
+  list-style-type: none;
+}
+
+.list-add {
+  height: 50px;
+}
+
+.list-indiv {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0; /*크기 자동조정 안되게 */
+  width: 300px;
+  height: 50px;
+  background-color: bisque;
+  border: 1px solid salmon;
+  border-radius: 15px;
+  margin: 10px 0;
+  padding: 0 3%;
+}
+
+.list-indiv .category {
+  font-size: 13px;
+  width: 10%;
+}
+.list-indiv .content {
+  width: 55%;
+  padding-left: 5%;
+  font-weight: bold;
+}
+.list-indiv .price {
+  font-size: 14px;
+  width: 25%;
+  color: blue;
+}
+
+.x {
+  align-self: flex-start;
+}
+
+.list-add {
+  display: flex;
+  justify-content: center;
+  background-color: gainsboro;
+}
+
+.list-add .button {
+  height: 100%;
+  line-height: 50px;
+  width: 20%;
+  border-radius: 20px;
+  font-size: 40px;
+  text-align: center;
+  background-color: salmon;
+}
diff --git "a/1\354\243\274\354\260\250/\354\203\235\352\260\201\352\263\274\354\240\234.md" "b/1\354\243\274\354\260\250/\354\203\235\352\260\201\352\263\274\354\240\234.md"
new file mode 100644
index 0000000..7eba088
--- /dev/null
+++ "b/1\354\243\274\354\260\250/\354\203\235\352\260\201\352\263\274\354\240\234.md"
@@ -0,0 +1,17 @@
+- 웹 접근성은 무엇일까? <br>
+ 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이라 합니다.
+
+
+- 접근성을 위한 개발은 어떤 것들이 있을까? <br>
+시맨틱 구조를 잘 이용하는 것
+이미지 태그 쓸때 alt 넣는 것
+
+- 접근성을 위한 개발을 꼭 해야 할까? <br>
+더 많은 유저 유입을 위해 필요하다고 생각한다.또 신뢰성 부분에서도 좋다고 생각한다.
+
+
+- 검색엔진 최적화를 하는 방법에는 무엇이 있을까? <br>
+  검색 결과가 상단에 위치 할 수 있게 최적화하는 프로세스를 검색엔진 최적화라고 한다.<br>
+  직관적인 네비게이션 만들기<br>
+  메타데이터 명확하게 작성하기<br>
+  의미 있는 URL 등이 SEO를 돕는다고 한다
\ No newline at end of file
diff --git "a/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.css" "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.css"
new file mode 100644
index 0000000..2c4d5c7
--- /dev/null
+++ "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.css"
@@ -0,0 +1,27 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  
+    background-color: beige;
+  }
+  
+  h1 {
+    text-align: center;
+  }
+  
+  ul {
+    font-size: 20px;
+  }
+  
+  .count {
+    cursor: pointer;
+  }
+  
+  .red {
+    color: red;
+  }
+  
+  .blue {
+    color: blue;
+  }
\ No newline at end of file
diff --git "a/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.html" "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.html"
new file mode 100644
index 0000000..012706c
--- /dev/null
+++ "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.html"
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="index.css" />
+    <title>2차 세미나 실습</title>
+  </head>
+  <body>
+    <h1>my favorite fruit list</h1>
+    <ul>
+      <li class="red">apple</li>
+      <li class="red">orange</li>
+      <li>banana</li>
+      <li>grape</li>
+      <li>strawberry</li>
+    </ul>
+    <button class="count">과일 개수를 알려줘!</button>
+    <script src="index.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git "a/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.js" "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.js"
new file mode 100644
index 0000000..ae2b12c
--- /dev/null
+++ "b/\354\213\244\354\212\265/2\354\243\274\354\260\250/index.js"
@@ -0,0 +1,28 @@
+// strawberry 아래에 mango 추가하기
+const mango = document.createElement("li");
+const mangoText = document.createTextNode("mango");
+
+mango.appendChild(mangoText);
+
+const fruitList = document.querySelector("ul");
+fruitList.appendChild(mango);
+
+// class가 red인 애들만 삭제하기
+const redFruit = document.querySelectorAll(".red");
+redFruit.forEach((fruit) => {
+    fruit.remove();
+})
+
+// 세번째 과일 파란색 만들기
+const thirdFruit = document.querySelector("li:nth-child(3)");
+thirdFruit.classList.add("blue");
+
+// 버튼 누르면 과일 개수 알려주기
+const lengthButton = document.querySelector("button.count");
+
+function showLength() {
+    const allList= document.querySelectorAll("li");
+    alert(`과일개수는 ${allList.length}입니다`);
+}
+lengthButton.addEventListener("click",showLength);
+