[ 1주차 기본/심화/생각 과제 ] ✅ TodoList, 💻 velog 클론코딩 , 📝 웹 접근성 #1

iamphj3 · 2022-10-07T08:28:36Z

✅ TodoList

✨ 구현 기능 명세

기본 과제
- 1. header, nav, main (left side, right side) / footer 를 나누어 구현합니다
header 안에 nav , main 안에 2개의 section을 각각 왼쪽, 오른쪽으로 배치하였습니다!
- 2. nav 에서는 3개의 버튼이 있어요 (가운데에 오도록 배치해주세요)
nav 안에 3개의 버튼을 justify-content: center 속성을 통해 가운데로 배치하였습니다!
- 3. main 에는 투두 리스트를 위치시켜요
  - 1. 두 개의 section 으로 나누어 left, right 를 양 쪽에 배치해요
  - todolist__today , todolist__tomorrow 두 개의 섹션으로 나누었으며 display: flex; flex-direction: column;를 통해 각각 왼쪽, 오른쪽에 배치하였습니다!!
  - 2. 오늘 할 일, 내일 할 일은 헤딩 태그를 / 할 일 리스트는 <ul> <li> 태그를 이용해요
  - 오늘 할 일, 내일 할 일에 h3 태그를 사용하였고, 할 일 리스트에 <ul> <li> 태그를 사용하였습니다!
  - 3. 내일 할 일에는 2개의 리스트가 존재합니다 ! 각 리스트의 구분선과, 삭제 버튼이 있어요
  - 리스트의 마지막 항목을 제외하고 구분선을 추가하였으며, 각 리스트의 끝에 삭제 버튼을 넣었습니다!
```
.todolist__item:not(:last-child) {
    border-bottom: 1px solid #efefef;
}
```
  - 4. section 의 아래에는 input 태그와 추가 버튼이 존재해요
  - 각 section의 footer 내에 input 과 추가 버튼을 배치하였습니다!!

🎁 PR Point

드래그미 따라했어여 ㅎㅎㅎ aka 짭래그미 ㅋ
nav의 TODAY PLAN, TOMORROW, ALL 에 호버 시 색깔 변경, 밑줄 효과를 주었습니당!
TODAY, TOMORROW 각 섹션에 flex: 1; 속성을 주어 화면 너비에 따라 섹션 영역의 너비를 조정해주었습니다
클래스명... 어떻게 써야 잘 썼다고 소문이 날까여.... ?!?

😭 소요 시간, 어려웠던 점

4h
TODAY, TOMORROW를 각각 양쪽에 똑같은 너비로 배치시키는 것!!
footer(input, button)를 섹션의 맨 아래에 고정시키는 것!!

😎 구현 결과물

💻 velog 클론코딩

✨ 구현 기능 명세

기본 과제
- 1. header, nav, card section 을 나누어 구현합니다
header와 nav를 나누었고, section 안에 article 태그를 사용하여 카드를 배치하였습니다!
- 2. header와 nav 에서는 flex 의 space-between 속성을 사용합니다
header 에서는 로고와 설정 아이콘 영역을 분리하혔고, flex: space-between으로 양쪽에 배치했습니다!
nav 에서는 탭바와 더보기 아이콘 영역을 분리하혔고, flex: space-between으로 양쪽에 배치했습니다!
- 3. card section 에서는 flex 를 이용하여 레이아웃을 배치합니다
card section에 display: flex;와 flex-wrap: wrap;을 통해 카드 레이아웃을 배치하였고, justify-content: space-between; 속성으로 간격을 맞추어 정렬하였습니다.
```
.section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;

margin: 20px auto;
}
```
- 4. 전체 레이아웃의 width 값을 1024px 로 잡고, 그보다 창이 넓어질 시에 가운데에 오도록 배치합니다
max-width를 1024px로 지정해주고, margin: 0 auto;로 가운데에 오도록 배치하였습니다.
```
body {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
```

심화 과제

1. 화면 가로 크기가 줄어듬에 따라서 카드 수가 4→3→2→1로 줄어들도록 구현
- 1. 반응형
- section에서 flex-wrap: wrap; 속성을 통해 카드에 반응형 속성을 만들어 주었습니다. 이를 통해 컨테이너를 넘어가면 자동으로 다음줄로 넘어가게 구현하였습니다!
- 2. media query
- 미디어 쿼리를 사용하여, 퍼센트를 동해서 화면 크기에 따라 카드 너비가 변경되도록 하였습니다.
```
@media (min-width:1445px){
    body{
        max-width: 1444px;
    }

    .card{
        width:22%;
    }
}

@media (min-width: 1025px) and (max-width: 1444px) {
    .card{
        width:30%;
    }
}

@media (min-width: 660px) and (max-width: 1024px) {
    .card{
        width:45%;
    }
}

@media (max-width: 660px){
    .card{
        width:100%;
    }
}
```

2. 카드에 hover 되었을 때 애니메이션 등록

transition: all .25s ease-in;으로 속성이 천천히 변화되게 하였습니다.
카드에 호버 시 top: -10px;으로 카드가 위로 올라오게 하였고, box-shadow: 0 0 15px 3px rgba(0,0,0,0.1);으로 그림자를 강조하였습니다!

   .card {
       width: 25%;
       margin: 15px;
   
       display: flex;
       flex-direction: column;
   
       background-color: white;
       text-decoration: none;
       color: #444;
       box-shadow: 0 0 10px 1px rgba(0,0,0,0.05);
   
       position: relative;
       top: 0;
       transition: all .25s ease-in;

   }

   .card:hover {
       top: -10px;
       box-shadow: 0 0 15px 3px rgba(0,0,0,0.1);
   }

🎁 PR Point

카드 섹션을 section->article로 배치했는데 맞게 배치한건지 궁금합니당!!
card 클래스 안에 card__title, card__info, card__user 등등 각 요소들이 있는데 background-color 를 모두 각각 지정해줘야만 하는건가요?!? card의 배경색만 지정해주면 안에 있는 모든 요소들의 배경색으로 적용되도록... 할 수 있나용??
위에 body에서 레이아웃 너비를 1024px로 고정했었는데 카드 배치가 4->3->2->1로 바뀌는 걸 어떻게 해야할지... 잘 모르게쒀여... 그래서 제맘대루 창이 더 커지면 1444px루 바뀌게 했는데...... 어케 하는거죠?!?!
반응형 사이트를 만들려면 모두 px이 아닌 rem을 사용하는게 좋나요?
클래스명... 어케 써야 할까여.. BEM은 정말 알쏭달쏭..
그리고 각종 태그들을 적절하게 사용한건지 피드백 받고싶습니당!!

😭 소요 시간, 어려웠던 점

2일......
header, nav바에서 항목을 배치하는것두 은근 오래 걸렸는데 이제 justify-content align-items에 대해서 감을 확실히 잡은 것 같습니당!!
반응형!!!!! 창 크기에 맞춰서 카드 배치와 너비 등등 바뀌게 하는 데 시간이 증말,, 오래 걸렸어욥,,
처음에flex-grow: 1; 속성을 썼더니 맨 마지막 카드가 여백에 맞춰서 꽉 채워져서 어려웠는데 미디어 쿼리를 써서 퍼센트를 지정해줘서 해결했씁니당!!!(금잔디조 쵝오)

😎 구현 결과물

아니 왤케 느리져...? ㅋㅋ........고쳐보겠음다....

📝 웹 접근성

✨ 구현 기능 명세

생각 과제
- 접근성은 무엇인가?
- 접근성을 위한 개발은 어떤 것들이 있을까?
- 접근성을 위한 개발을 꼭 해야 할까?

🎁 PR Point

접근성을 위한 개발 부분을 작성하면서 WCAG 2.0에 대해서 자세히 찾아보았습니다!!!

😭 소요 시간, 어려웠던 점

3h
마크다운 첨 써보는디!!! 아직 안 익숙해서 오래 걸리네유 ㅠㅠ 빨리 익숙해져서 마크다운 타속600 고수가 될테야

😎 구현 결과물

https://github.com/IN-SOPT-WEB/HyeonJiPARK/blob/week1/week1/WA.md

henization

까ㅏㅏㅏㅏㄹ끔한데 ????? 대박이야 핸지만지!!!!!!

henization · 2022-10-07T10:44:12Z

README.md

+
+# HyeonjiPARK 
+<p>아좌좌..</p>
+
+###  💻 과제
+
+| Week | 과제      | ☑️ | 링크 |
+| ---- | -------- | -- |---- |
+| 1주차 | TodoList | ☑️ | |
+| 1주차 | Hyeonlog | ☑️ | |
+| 1주차 | 웹접근성   |  | |
+
+</div>


오 ~~~~ 리드미에 이렇게 까지 !!!!! 야무져 ><

henization · 2022-10-07T10:48:03Z

week1/WA.md

+
+
+월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리는 웹이란 `'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'`이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다.  
+웹 개발을 시작하며 이러한 본질을 잊지 않기 위해서, 앞으로도 다양한 방식을 통한 접근성을 처음부러 고려하여 개발하는 습관을 들여야겠다고 생각했다.  


Good~~~~~접근성을 위한 개발의 네가지 개념들 너무 인상깊네요 ~ ~ 정리 너무 잘해놨다!!!

henization · 2022-10-07T10:48:32Z

week1/todoList/index.html

+</head>
+<body>
+    <header class="header">
+        <!-- <h2 class="header-title">TODOLIST</h2> -->


주석 처리한 부분 사용하지 않는다면 지워도 될거 같아용

henization · 2022-10-07T10:49:22Z

week1/todoList/index.html

+        <img src="./logo.png" class="header-logo" alt="로고">
+        <nav class="header__nav">


로고는 header-logo이고, nav는 header__nav인데 -와 __는 어떤 구별점을 갖고 사용한건가요??

엇........ 그러게요 왜 -로 썼지 ㅎㅎㅎ..... 😅

henization · 2022-10-07T10:50:37Z

week1/todoList/index.html

+                    <button class="todolist__delete-button">
+                        <span>-</span>
+                    </button>


button안에 span으로 감싸준 이유가 있을까용 ?.?

버튼 안에 이미지태그로 이미지를 넣으려다가,,, 텍스트로 바꾸면서 span으로 적었나바요 ㅎㅎㅎ.... 근데 안감싸도 되군뇨 ㅎ.ㅎ..

henization · 2022-10-07T10:54:11Z

week1/velog/index.html

+            <span class="material-icons header__lightmode">light_mode</span>
+            <span class="material-icons header__search">search</span>
+            <button class="header__write">새 글 작성</button>
+            <div class="header__profile">
+                <img src="./img/profile.jpeg" class="header__image" alt="프로필 이미지" />


오! 전 다 버튼이라고 생각했는데 어떤 기준으로 span, button, div로 구분지어 사용한 것인지 궁금해요!

헉 아무생각 없이 갈겼던거같슴다.......... 다 버튼으로 바꿔야겠어여....ㅎㅎ......

henization · 2022-10-07T10:55:04Z

week1/velog/index.html

+        <div class="nav__wrapper">
+            <ul class="nav__list">
+                <li class="nav__trending">
+                    <span class="material-icons">trending_up</span>
+                    <span>트렌딩</span>
+                </li>
+                <li class="nav__recent">
+                    <span class="material-icons">schedule</span>
+                    <span>최신</span>
+                </li>
+            </ul>
+            <button class="nav__dropdown">
+                <span>이번 주</span>
+                <span class="material-icons">arrow_drop_down</span>
+            </button>
+        </div>
+        <span class="material-icons nav__more">more_vert</span>


이 친구들도 어떤 기준으로 div와 span을 나누신건지 궁금해용!

henization · 2022-10-07T10:56:27Z

week1/velog/index.html

+                <div class="card__user">
+                    <img src="./img/profile.jpeg" class="user__image" alt="유저 이미지" />
+                    <span>by</span>
+                    <p class="user__name">박현지</p>


내용을 의미하는 p태그보다 사용자의 이름은 강조될 필요가 있다구 생각해서 b태그 혹은 strong 태그는 어떨까용??

오오 감사합니다!!!!!

henization · 2022-10-07T10:57:57Z

week1/velog/style.css

+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;


오 얘는 아이콘을 삽입하기 위해 필요한 친구인가용??

henization · 2022-10-07T10:58:25Z

week1/velog/style.css

+@media (min-width:1445px){
+    body{
+        max-width: 1444px;
+    }
+
+    .card{
+        width:22%;
+    }
+}
+
+@media (min-width: 1025px) and (max-width: 1444px) {
+    .card{
+        width:30%;
+    }
+}
+
+@media (min-width: 660px) and (max-width: 1024px) {
+    .card{
+        width:45%;
+    }
+}
+
+@media (max-width: 660px){
+    .card{
+        width:100%;
+    }
+}


야무지게 사용했네요 ~ ~ !!!! 짱짱

YOOJS1205 · 2022-10-07T13:22:42Z

우리 금잔디 7조 조장님 너무 고생하셨어요!
기획할 줄 아는 개발자라... 귀하군

NamjunKim12 · 2022-10-07T13:49:33Z

현지 기획도 잘하고 개발도 잘하고 못하는게 뭐야;;

Happhee

너무 야무진거아냐?!! ㅎㅎ 체고다 ㅎㅎ

Happhee · 2022-10-08T02:31:40Z

week1/velog/style.css

+    /* flex-grow: 1;
+    flex-shrink: 1; */


주석은 지워주고 올려쥬자용 ㅎㅎ

Happhee · 2022-10-08T02:33:40Z

week1/velog/index.html

+    </div>
+    </nav>
+
+    <section class="section">


밑에 card들이 나열되니까 section-cards 여도 될것가타!

오호 꼬마어!!!

Happhee · 2022-10-08T02:38:01Z

week1/todoList/index.html

+    <main class="todolist">
+        <section class="todolist__today box">
+            <h3 class="todolist-title">TODAY</h3>
+            <hr class="todolist-line">


hr는 주제가 달라지는 곳에 문단줄바꿈으로 사용하는거라!

여기서는 오늘 할일에 대한 주제로 아래 코드들이 동일하자나 그래서 적합하지가 아느니까 h3에 border-bottom을 주는건 오때애?!

오오옹 그렇구나!!!!! 꼬마어요옹ㅎㅎㅎㅎㅎ

Happhee · 2022-10-08T02:38:37Z

week1/todoList/index.html

+    </header>
+    <main class="todolist">
+        <section class="todolist__today box">
+            <h3 class="todolist-title">TODAY</h3>


이칭구도 어쨋든 블럭요소니까
todolist__title로 쓰는게 bem에 적합하게따!

헉 맞네!!!! 거마워영ㅎㅎㅎㅎ

Happhee · 2022-10-08T02:39:29Z

week1/todoList/style.css

+.todolist__item:not(:last-child) {
+    border-bottom: 1px solid #efefef;
+}


키야키야👍

YOOJS1205

하이

YOOJS1205 · 2022-10-07T13:16:03Z

week1/todoList/index.html

+    </header>
+    <main class="todolist">
+        <section class="todolist__today box">
+            <h3 class="todolist-title">TODAY</h3>


h3 태그를 사용한 이유가 궁금합니다!
폰트 사이즈 때문인가요~?

요호 h1 -h2 -h3 순서대로 써주는 것이 표준입니닺

헉 그렇군요!!! 폰트 사이즈에 따라 다르게 쓰는건줄 알았어요....

YOOJS1205 · 2022-10-07T13:16:50Z

week1/todoList/index.html

+            <hr class="todolist-line">
+            <ul class="todolist__lists">                
+                <li class="todolist__item">투두리스트 과제하기
+                    <button class="todolist__delete-button">


위에처럼 type 지정해주면 좋을 것 같아요!

오홍 그러네여!!!! 감사해용 ㅎㅎㅎㅎ

YOOJS1205 · 2022-10-07T13:18:47Z

week1/velog/index.html

+<body>
+    <header class="header">
+        <h1>hyeonlog</h1>
+        <div class="header__setting">


div 태그 대신 semantic한 태그를 사용해보는건 어떨까요?

nav 태그를 사용할 수 있을거같네여!!! 감사합니당!!

YOOJS1205 · 2022-10-07T13:21:48Z

week1/velog/style.css

+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */


여러 브라우저 접근성을 고려한게 너무 인상적입니다!

joohaem

넘 잘했다 !!! 마크다운 엄청 잘쓰네 현지🤩🤩

완전 깔끔하게 정리해놔서 보기 편했어,, 고생 많았어 !

seobbang

꺄아 너무 수고 많으셨습니당~!~🥰

seobbang · 2022-10-11T15:18:30Z

week1/todoList/style.css

+    bottom: 10px;
+
+    display: flex;
+    flex-direction: row;


flex-direction 기본값이 row라 설정하지 않아도 괜찮지 않을까용 ?! >_<

seobbang · 2022-10-11T15:19:22Z

week1/todoList/index.html

+            <button class="header__nav-button" type="button">ALL</button>
+        </nav>
+    </header>
+    <main class="todolist">


다음에는 저듀 요로코롬 main을 사용해봐야겠어요 -!-!

seobbang · 2022-10-11T15:22:37Z

week1/velog/index.html

+
+    <nav class="nav">
+        <div class="nav__wrapper">
+            <ul class="nav__list">


오 nav 부분에서 버튼들을 리스트로 사용하는 방식은 생각해보지 못한 것 같아요~! 새로운 방식 알아갑니당

seobbang · 2022-10-11T15:23:27Z

week1/velog/index.html

+
+    <section class="section">
+        <article class="card">
+            <img class="card__thumbnail" src="./img/thumb.png" alt="하늘">


alt도 써주는 디테일!!! 쨩 !!

seobbang · 2022-10-11T15:26:05Z

week1/velog/style.css

+
+    position: relative;
+    top: 0;
+    transition: all .25s ease-in;


오옷 ease-in 속성은 안써봤는데 덕분에 찾아보고 알아갑니당 !!><

iamphj3 and others added 12 commits October 5, 2022 14:01

세미나 실습

50e247a

todoList

27104cc

add .DS_Store

6ccbe7f

feat: 기본 과제 구현

5feaf17

feat: 심화 과제 media quary 구현

2c05764

style: 오타 수정

6827d08

docs: readme 작성

1f523f4

Update README.md

20da4b0

docs: 웹 접근성 생각 과제 작성 완료

0300e8b

fix: 반응형 레이아웃 수정

3070cf0

css: 새 글 작성 버튼 테두리, 파비콘 추가

4ebd424

add: 구현 결과물 이미지

d61d3ca

iamphj3 requested review from seobbang, YOOJS1205, henization and joohaem October 7, 2022 08:29

iamphj3 self-assigned this Oct 7, 2022

iamphj3 added 1주차 and removed 1주차 labels Oct 7, 2022

henization reviewed Oct 7, 2022

View reviewed changes

Happhee reviewed Oct 8, 2022

View reviewed changes

YOOJS1205 reviewed Oct 8, 2022

View reviewed changes

joohaem approved these changes Oct 9, 2022

View reviewed changes

seobbang reviewed Oct 11, 2022

View reviewed changes

iamphj3 merged commit 5b8e9bc into main Oct 15, 2022

iamphj3 deleted the week1 branch October 15, 2022 06:28



		월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리는 웹이란 `'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'`이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다.
		웹 개발을 시작하며 이러한 본질을 잊지 않기 위해서, 앞으로도 다양한 방식을 통한 접근성을 처음부러 고려하여 개발하는 습관을 들여야겠다고 생각했다.

		<img src="./logo.png" class="header-logo" alt="로고">
		<nav class="header__nav">

[ 1주차 기본/심화/생각 과제 ] ✅ TodoList, 💻 velog 클론코딩 , 📝 웹 접근성 #1

[ 1주차 기본/심화/생각 과제 ] ✅ TodoList, 💻 velog 클론코딩 , 📝 웹 접근성 #1

Conversation

iamphj3 commented Oct 7, 2022

✅ TodoList

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

💻 velog 클론코딩

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

📝 웹 접근성

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

henization left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YOOJS1205 commented Oct 7, 2022

NamjunKim12 commented Oct 7, 2022

Happhee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YOOJS1205 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joohaem left a comment

Choose a reason for hiding this comment

seobbang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment