Merge pull request #2 from DO-SOPT-WEB/Week1-4

[1주차 기본/생각과제] 다현이의 가계부 💸 #2
DO-SOPT-WEB · Oct 24, 2023 · 273053b · 273053b
2 parents 01e4460 + d26f5cf
commit 273053b
Show file tree

Hide file tree

Showing 26 changed files with 259 additions and 0 deletions.
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주차/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를 돕는다고 한다