IN-SOPT-WEB · iamphj3 · Oct 15, 2022 · Oct 5, 2022 · Oct 5, 2022 · Oct 5, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,14 @@
-# HyeonJiPARK
+<div align=center>
+
+# HyeonjiPARK 
+<p>아좌좌..</p>
+
+###  💻 과제
+
+| Week | 과제      | ☑️ | 링크 |
+| ---- | -------- | -- |---- |
+| 1주차 | TodoList | ☑️ | |
+| 1주차 | Hyeonlog | ☑️ | |
+| 1주차 | 웹접근성   |  | |
+
+</div>
diff --git a/img/TodoList.png b/img/TodoList.png
diff --git a/img/hyeonlog.gif b/img/hyeonlog.gif
diff --git a/img/hyeonlog.mov b/img/hyeonlog.mov
diff --git a/week1/.DS_Store b/week1/.DS_Store
diff --git a/week1/WA.md b/week1/WA.md
@@ -0,0 +1,118 @@
+# 웹 접근성(Web Accessibility)
+
+
+## 👀 웹 접근성이란?
+
+웹 표준 기구 W3C가 말하는 웹 접근성은 제약을 가진 유저들도 접근하고 사용할 수 있게끔 하는 웹사이트, 도구, 기술이다. 전 세계에 사는 모든 다양한 유저가, 그들이 가진 불편함과 관계 없이 웹을 사용할 수 있게 하는 것이 웹 접근성의 목표이다. 예를 들어 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해한다.
+
+> **웹의 힘은 보편성에 있다. 장애와 상관없이 모든 사람이 접근할 수 있는 것은 필수적인 측면이다.**
+>
+> -Tim Berners-Lee, W3C Director and inventor of the World Wide Web
+
+결국 접근성은 ‘**누구나 콘텐츠를 이용할 수 있어야한다**'에 가깝기 때문에, 접근성을 고려해 웹을 만드는 것은 **모든 장애인 그리고 모든 비장애인을 위한 일**이라고 말할 수 있다.  
+
+
+------
+
+## 💻 접근성을 위한 개발은 어떤 것들이 있을까?
+
+모든 사용자들이 어떻게 웹을 잘 쓰게 할 것인가에 대해서는 정말 다양한 기준이 있다. 그래서 그러한 표준을 잡기 위해서 W3C(World Wide Web Consortium)는 접근성에 대한 지침을 제시했다. 이를 WCAG(Web Content Accessibility Guidelines) 라고 한다. WCAG에는 접근 가능한 웹사이트를 만들 때 중점을 주어야 할 4가지 주요 원칙 이 명시되어 있다.
+
+
+### 1. **인지성(Perceivable)**
+
+>  **모든 콘텐츠는 사용자가 인식 가능해야 한다.**
+
+- 모든 텍스트가 아닌 콘텐츠를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간 언어 등과 같은 형태로 제공해야한다.
+- 사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경 분리한 콘텐츠를 만들어야 한다.
+
+**ex) 대체 텍스트**  
+이미지, 비디오 및 오디오 등 페이지의 모든 텍스트가 아닌 콘텐츠에는 이를 볼 수 없는 사용자를 위한 대체 텍스트를 제공해야 한다. 이를 위해 alt 속성에 이미지에서 제공하는 내용을 작성한다. 단순한 장식 이미지의 경우 alt 속성을 포함하되 비워 둔다.
+
+```jsx
+<img src="..." alt="대체 텍스트">
+```
+
+
+### 2. **운용성(Operable)**
+
+> **사용자가 모든 기능에 대해 조작이 가능해야한다.**
+
+- 키보드로 모든 기능을 사용할 수 있도록 해야한다.
+- 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야한다.
+- 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
+- 사용자가 탐색하고, 콘텐츠 찾고 그들이 어디에 위치하고 있는지를 알 수 도와주는 방법을 제공해야한다.
+
+**ex) 키보드를 통한 조작**  
+모든 사람이 마우스를 사용할 수 있는 것은 아니다. 따라서 웹사이트의 모든 기능은 키보드만으로 액세스할 수 있어야 한다. 예를 들어, 탭 키는 사용자가 페이지에서 선택 가능한 요소 사이를 이동할 수 있게 하고, 엔터/리턴 키는 포커스가 있는 요소를 클릭할 수 있어야 한다.
+
+```jsx
+<p tabindex='0'>탭 키를 이용할 수 있게 함</p>
+<p tabindex='-1'>탭 키를 이용할 수 없게 함</p>
+
+<p tabindex='1'>탭 키의 순서를 지정</p>
+<p tabindex='2'>탭 키의 순서를 지정</p>
+<p tabindex='3'>탭 키의 순서를 지정</p>
+```
+
+
+### 3. **이해성(Understandable)**
+
+> **모든 사용자에게 콘텐츠는 이해되어야 한다.**
+
+- 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
+- 웹페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
+- 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.
+
+**ex) 페이지 언어 지정**  
+다국어를 지원하는 경우, 텍스트의 언어 정보를 스크린 리더에게 전달하기 때문에콘텐츠에 적용되는 언어를 반드시 명시해야 한다.
+
+```jsx
+<html lang="ko"> <!-- 전체 언어 -->
+<p>좀 더 <span lang="en">fancy</span>한 삶을 살고 싶으신가요?</p> <!-- 특정 언어는 span의 속성을 이용한다. -->
+```
+
+
+### 4. **견고성(Robust)**
+
+>  **미래의 기술로도 현재의 콘텐츠를 이용할 수 있어야 한다.**
+
+- 콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.  
+
+
+------
+
+## 💡 접근성을 위한 개발은 필요할까?
+
+웹 접근성을 보장하는 개발을 위한 노력을 통해 기대할 수 있는 효과들은 다음과 같다.
+
+1. **`장애인, 고령자 등을 포함한 사용자층 확대`**
+
+   장애인, 고령자 등과 같은 정보 소외 계층이 원하는 정보를 자유롭게 접근하고 이용할 수 있게 해주며, 이러한 잠재적인 계층을 사용자 계층으로 끌어내어 새로운 고객층을 발굴하는 기회로 활용할 수 있다.
+
+2. **`유지보수의 용이성`**
+
+   불필요한 태그들을 사용하지 않고 정해진 규격에 맞게 코딩하기 때문에 이후 유지보수가 상대적으로 간편해진다. 다른이들과의 협업에서도 좋은 가독성을 제공한다.
+
+3. **`서버의 부담 감소`**
+
+   웹 표준을 따라 효율적으로 짜여진 코드는 코드의 양도 줄고 동시에 서버의 부담을 줄인다. 이는 로딩 속도도 향상시킨다.
+
+4. **`SEO(검색 엔진 최적화)에 유리`**
+
+   웹 접근성을 준수한 마크업은 SEO에 유리하다. 시맨틱한 마크업은 검색 크롤러가 컨텐츠를 이해하는데 도움을 주기 때문이다. 검색 엔진의 크롤러는 웹사이트 요소간의 관계와 중요도를 파악하여 `heading`과 같은 태그로 감싸진 중요한 키워드를 검색 인덱스에 넣어 검색 결과를 최적화한다.  
+
+
+월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리는 웹이란 `'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'`이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다.  
+웹 개발을 시작하며 이러한 본질을 잊지 않기 위해서, 앞으로도 다양한 방식을 통한 접근성을 처음부러 고려하여 개발하는 습관을 들여야겠다고 생각했다.  
+
+
+------
+
+### 참고 자료
+
+- https://www.w3.org/WAI/fundamentals/accessibility-intro/
+- https://jae04099.tistory.com/entry/HTML-CSS-웹-접근성-웹-표준-웹-접근성을-위한-규칙들
+- https://maxkim-j.github.io/posts/web-accessiblity-virtuous-cycle
+
+
diff --git a/week1/seminar/.DS_Store b/week1/seminar/.DS_Store
diff --git a/week1/seminar/index.html b/week1/seminar/index.html
@@ -0,0 +1,35 @@
+<html lang="ko"> 
+    <!-- 웹 접근성 -->
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css" />
+    <title>Document</title>
+<body>
+    <!-- <div>블락</div>요소
+    <span>인라인
+        <p>블록</p>
+    </span>요소
+    <ul>
+        <li>1</li>
+        <li>2</li>
+        <li class="">2</li>
+        <li>3</li>
+    </ul> -->
+
+    <!-- <div style="height: 500px; background-color: gray ">
+        1
+    </div>
+    <div style="height: 100px; background-color: blue; position: sticky;">
+        2
+    </div>
+    <div style="height: 5000px; background-color: pink">
+        3
+    </div> -->
+
+    <section>
+        <article style="width: 100px; height: 500px; background-color: rgb(135, 175, 232); display: flex;"></article>
+    </section>
+</body>
+</html>
diff --git a/week1/seminar/style.css b/week1/seminar/style.css
@@ -0,0 +1,8 @@
+@import url(./subStyle.css);
+body{
+    /* color: blue; */
+}
+
+ul > li{
+    color: blue;
+}
diff --git a/week1/seminar/subStyle.css b/week1/seminar/subStyle.css
@@ -0,0 +1,3 @@
+body{
+    color: red;
+}
diff --git a/week1/todoList/index.html b/week1/todoList/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <title>TODOLIST</title>
+</head>
+<body>
+    <header class="header">
+        <!-- <h2 class="header-title">TODOLIST</h2> -->
+
+        <img src="./logo.png" class="header-logo" alt="로고">
+        <nav class="header__nav">
+            <button class="header__nav-button" type="button">TODAY PLAN</button>
+            <button class="header__nav-button" type="button">TOMORROW PLAN</button>
+            <button class="header__nav-button" type="button">ALL</button>
+        </nav>
+    </header>
+    <main class="todolist">
+        <section class="todolist__today box">
+            <h3 class="todolist-title">TODAY</h3>
+            <hr class="todolist-line">
+            <ul class="todolist__lists">
+            </ul> 
+            <footer class="todolist__footer">
+                <input class="todolist__input" type="text"/>
+                <button class="todolist__add-button" type="button">+</button>
+            </footer>
+        </section>
+        <section class="todolist__tomorrow box">
+            <h3 class="todolist-title">TOMORROW</h3>
+            <hr class="todolist-line">
+            <ul class="todolist__lists">                
+                <li class="todolist__item">투두리스트 과제하기
+                    <button class="todolist__delete-button">
+                        <span>-</span>
+                    </button>
+                </li>
+                <li class="todolist__item">벨로그 클론코딩 과제하기
+                    <button class="todolist__delete-button">
+                        <span>-</span>
+                    </button>
+                </li>
+            </ul>
+            <footer class="todolist__footer">
+                <input class="todolist__input" type="text"/>
+                <button class="todolist__add-button" type="button">+</button>
+            </footer>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/week1/todoList/logo.png b/week1/todoList/logo.png
diff --git a/week1/todoList/reset.css b/week1/todoList/reset.css
@@ -0,0 +1,130 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}