Merge branch 'main' into week2-picbooth

DO-SOPT-WEB · Dec 15, 2023 · c5aa142 · c5aa142
2 parents 46178f2 + 273053b
commit c5aa142
Show file tree

Hide file tree

Showing 31 changed files with 362 additions and 1 deletion.
diff --git a/1주차/3.웨비의 사진관/index.html b/1주차/3.웨비의 사진관/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주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 003.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 003.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 006.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 006.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 008.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 008.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 009.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-07 009.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-08 010.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-08 010.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-08 017.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-08 017.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-09 019.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-09 019.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-10 026.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-10 026.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-39 001.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-39 001.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 005.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 005.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 007.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-40 007.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-43 022.jpeg b/1주차/3.웨비의 사진관/pics/KakaoTalk_Photo_2023-10-09-15-33-43 022.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/가로.jpeg b/1주차/3.웨비의 사진관/pics/가로.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/가로2.jpeg b/1주차/3.웨비의 사진관/pics/가로2.jpeg
diff --git a/1주차/3.웨비의 사진관/pics/가로3.jpeg b/1주차/3.웨비의 사진관/pics/가로3.jpeg
diff --git a/1주차/3.웨비의 사진관/style.css b/1주차/3.웨비의 사진관/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주차/4.가계부/index.html b/1주차/4.가계부/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>
diff --git a/1주차/4.가계부/script.js b/1주차/4.가계부/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'); 
diff --git a/1주차/4.가계부/style.css b/1주차/4.가계부/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주차/생각과제.md b/1주차/생각과제.md
@@ -0,0 +1,17 @@
+- 웹 접근성은 무엇일까? <br>
+ 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이라 합니다.
+
+
+- 접근성을 위한 개발은 어떤 것들이 있을까? <br>
+시맨틱 구조를 잘 이용하는 것
+이미지 태그 쓸때 alt 넣는 것
+
+- 접근성을 위한 개발을 꼭 해야 할까? <br>
+더 많은 유저 유입을 위해 필요하다고 생각한다.또 신뢰성 부분에서도 좋다고 생각한다.
+
+
+- 검색엔진 최적화를 하는 방법에는 무엇이 있을까? <br>
+  검색 결과가 상단에 위치 할 수 있게 최적화하는 프로세스를 검색엔진 최적화라고 한다.<br>
+  직관적인 네비게이션 만들기<br>
+  메타데이터 명확하게 작성하기<br>
+  의미 있는 URL 등이 SEO를 돕는다고 한다
diff --git a/실습/2주차/index.css b/실습/2주차/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;
+  }