[ 1주차 기본/심화/생각 과제 ] 웨비들의 냠냠 창업, WEB TODOMATE #1
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| :root { | ||
| --main-pink-color: rgb(248, 222, 226); | ||
| --dark-pink-color: rgb(255, 115, 138); | ||
| --main-puple-color: rgb(234, 206, 235); | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
|
|
||
| background-color: var(--main-pink-color); | ||
| } | ||
|
|
||
| /* header */ | ||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| height: 6rem; | ||
| } | ||
|
|
||
| .header h1 { | ||
| font-size: 2rem; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /** main **/ | ||
|
|
||
| /* calender section */ | ||
|
|
||
| .calender { | ||
| display: grid; | ||
| grid-template-columns: repeat(7, 1fr); | ||
| grid-template-rows: 1fr 1fr 1fr; | ||
| place-items: center; | ||
|
|
||
| width: 21rem; | ||
| height: 9rem; | ||
|
|
||
| padding: 0.2rem 0.5rem; | ||
|
|
||
| border-radius: 1rem; | ||
|
|
||
| background-color: white; | ||
|
Comment on lines
+36
to
+48
|
||
| box-shadow: 0.125rem 0.188rem 0.313rem gray; | ||
| } | ||
|
|
||
| .calender span { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: relative; | ||
| } | ||
|
|
||
| .calender time { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. 태그쓰는 거 너무 정돈되어 있고 깔끔하다,,,, |
||
| .calender span > img { | ||
| width: 2.3rem; | ||
| height: 2.3rem; | ||
| } | ||
|
Comment on lines
+63
to
+66
There was a problem hiding this comment. 2.3rem이면 root font-size가 16px이고 16x2.3 px로 36.8px정도의 크기인건가?? There was a problem hiding this comment. 정답!! 근데 실제로 디자인을 받아서 구현할 때는 px로 받게 되는데 그래서 우리가 개발할 땐 html { font-size:62.5%; }이렇게 설정하고 구현하면 아주 편리하다는 점! |
||
|
|
||
| .calender span > p { | ||
| position: absolute; | ||
|
|
||
| font-size: 0.8rem; | ||
| font-weight: bold; | ||
|
|
||
| color: white; | ||
| } | ||
|
|
||
| /* todolist section */ | ||
|
There was a problem hiding this comment. 나도 이런식으로 주석을 잘 활용해서 다음 과제는 팀원들이 잘 알아볼 수 있게 해볼게! |
||
| .todo__list { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: wrap; | ||
|
|
||
| height: 19rem; | ||
|
|
||
| margin-top: 1.3rem; | ||
| } | ||
|
|
||
| .todo__category { | ||
| margin: 0.5rem 0; | ||
| } | ||
|
|
||
| .todo__category h2 { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| width: 6rem; | ||
| height: 2.2rem; | ||
| margin: 0.5rem 0; | ||
|
|
||
| border-radius: 0.5rem; | ||
|
|
||
| font-size: 1.3rem; | ||
| font-weight: bold; | ||
|
|
||
| text-shadow: 0.063rem 0.063rem 0.125rem rgb(61, 61, 61); | ||
| color: white; | ||
| box-shadow: 0.125rem 0.125rem 0.125rem gray; | ||
| } | ||
|
|
||
| .todo__category li { | ||
| display: flex; | ||
| align-items: flex-start; | ||
|
|
||
| width: 11rem; | ||
| font-weight: bold; | ||
|
|
||
| word-break: keep-all; | ||
|
|
||
| margin: 1rem 0; | ||
| } | ||
|
|
||
| .todo__category svg { | ||
| width: 1rem; | ||
| height: 1rem; | ||
|
|
||
| margin-right: 0.3rem; | ||
|
|
||
| fill: white; | ||
| } | ||
|
|
||
| .todo__category svg.done { | ||
| fill: var(--dark-pink-color); | ||
|
There was a problem hiding this comment. 웅웅 svg에 사용할 수 있는 fill 속성이야!! 색상 지정이라고 보면 될 것 같오 ㅎㅎ |
||
| } | ||
|
|
||
| .sopt { | ||
| background-color: #eeeecc; | ||
| } | ||
| .ewha { | ||
| background-color: #bbddbb; | ||
| } | ||
| .study { | ||
| background-color: #ccddee; | ||
| } | ||
|
|
||
| /* footer */ | ||
| .footer { | ||
| position: fixed; | ||
| bottom: 0; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| width: 100%; | ||
| height: 4rem; | ||
|
|
||
| background-color: var(--main-puple-color); | ||
| } | ||
|
|
||
| footer button { | ||
| width: 6rem; | ||
| height: 2.2rem; | ||
|
|
||
| margin: 0 0.5rem; | ||
|
|
||
| border: none; | ||
| border-radius: 0.5rem; | ||
|
|
||
| background-color: white; | ||
|
|
||
| font-size: 1.2rem; | ||
| font-weight: bold; | ||
|
|
||
| cursor: pointer; | ||
|
|
||
| box-shadow: 0.063rem 0.125rem 0.125rem gray; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| <!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="style.css" /> | ||
| <link rel="stylesheet" href="../reset.css" /> | ||
| <title>To Do Mate</title> | ||
| </head> | ||
| <body> | ||
| <header class="header"> | ||
| <h1>WEB TO DO MATE</h1> | ||
| </header> | ||
|
|
||
| <main> | ||
| <section class="calender"> | ||
| <time>월</time> | ||
| <time>화</time> | ||
| <time>수</time> | ||
| <time>목</time> | ||
| <time>금</time> | ||
| <time>토</time> | ||
| <time>일</time> | ||
|
|
||
| <span> | ||
| <img src="icon/heart.svg" alt="하트 아이콘" /> | ||
| <p>6</p> | ||
| </span> | ||
| <span> | ||
| <img src="icon/heart.svg" alt="하트 아이콘" /> | ||
| <p>2</p> | ||
| </span> | ||
| <span> | ||
| <img src="icon/heart.svg" alt="하트 아이콘" /> | ||
| <p>4</p> | ||
| </span> | ||
| <span> | ||
| <img src="icon/heart.svg" alt="하트 아이콘" /> | ||
| <p>7</p> | ||
| </span> | ||
| <span> | ||
| <img src="icon/heart.svg" alt="하트 아이콘" /> | ||
| <p>1</p> | ||
| </span> | ||
| <span> | ||
| <img src="icon/heart.svg" alt="하트 아이콘" /> | ||
| <p>3</p> | ||
| </span> | ||
| <span> | ||
| <img src="icon/heart.svg" alt="하트 아이콘" /> | ||
| <p>2</p> | ||
| </span> | ||
| <time>3</time> | ||
|
|
||
| <time>4</time> | ||
| <time>5</time> | ||
| <time>6</time> | ||
| <time>7</time> | ||
| <time>8</time> | ||
| <time>9</time> | ||
| </section> | ||
| <section class="todo__list"> | ||
| <section class="todo__category"> | ||
|
There was a problem hiding this comment. section 안에 article이 아닌 section으로 묶은 이유가 있나여?! There was a problem hiding this comment. 흠.. 각 카테고리 목록이 할 일이라는 section 밖으로 독립적으로 구분해 배포하거나 재사용할 수 있는 구획이 아닌 것 같아서 |
||
| <h2 class="sopt">솝트</h2> | ||
| <ul> | ||
| <li> | ||
| <svg | ||
|
|
||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="48" | ||
| viewBox="0 96 960 960" | ||
| width="48" | ||
| class="done" | ||
| > | ||
| <path | ||
| d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z" | ||
| /> | ||
| </svg> | ||
|
Comment on lines
+66
to
+76
There was a problem hiding this comment. svg파일을 따로 만들어서 inline style로 넣지 않고 파일로 관리하면 더 좋을 것 같아! 아니면 혹시 다른 이유가 있었으면 알려주라! There was a problem hiding this comment. 원래 svg 따로 관리하면서 리액트에서는 이거 자체를 export 해서 컴포넌트로 가져왔어서, fill 속성을 건드릴 수 있었는데 |
||
| 1차 세미나 복습 | ||
| </li> | ||
| <li> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="48" | ||
| viewBox="0 96 960 960" | ||
| width="48" | ||
| class="done" | ||
| > | ||
| <path | ||
| d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z" | ||
|
There was a problem hiding this comment. svg는 png, jpg처럼 하나의 이미지 포맷이야! 다운 받았을 때 거기 있는 svg 코드를 그대로 가져온거랍니동 There was a problem hiding this comment. svg 는 jpg, png같은 이미지 포맷이야! svg 다운 받아서 그 코드 그대로 가져온거랍니동! |
||
| /> | ||
| </svg> | ||
| 1차 과제 | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <section class="todo__category"> | ||
| <h2 class="ewha">학교</h2> | ||
|
There was a problem hiding this comment. 약간 음 모랄까 요런 sopt, ewha 어떻게 보면 id 처럼 유일한 속성일수도 잇겟다!! 클래스를쓸지id를 사용할지는 서혀니의 판단에 맡겨!! There was a problem hiding this comment. 오호 ~! 무슨 말인지 딱 알겠다!! 이 클래스를 여러 태그에서 사용하게 될 수도 있을 것 같아서 JS 코딩하면서 잘 고민해볼게 ㅎㅎ |
||
| <ul> | ||
| <li> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="48" | ||
| viewBox="0 96 960 960" | ||
| width="48" | ||
| > | ||
| <path | ||
| d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z" | ||
| /> | ||
| </svg> | ||
| 졸프 발표 준비 | ||
| </li> | ||
| <li> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="48" | ||
| viewBox="0 96 960 960" | ||
| width="48" | ||
| class="done" | ||
| > | ||
| <path | ||
| d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z" | ||
| /> | ||
| </svg> | ||
| 1차 보고서 작성 | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <section class="todo__category"> | ||
| <h2 class="study">스터디</h2> | ||
| <ul> | ||
| <li> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="48" | ||
| viewBox="0 96 960 960" | ||
| width="48" | ||
| > | ||
| <path | ||
| d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z" | ||
| /> | ||
| </svg> | ||
| 웹심화 스터디 킥오프 | ||
| </li> | ||
| <li> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="48" | ||
| viewBox="0 96 960 960" | ||
| width="48" | ||
| > | ||
| <path | ||
| d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z" | ||
| /> | ||
| </svg> | ||
| JS 스터디 | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer class="footer"> | ||
| <button type="button">달력</button> | ||
| <button type="button">MY</button> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
자주 쓰는 컬러 저렇게 미리 명시해 놓는 거 너무 좋은 거 같아!!
react에서만 했어서 이번엔 생각도 못했는데, 하나 배워가용 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아니 진짜 나 왜 루트 쓸 생각을 모태찌???? 진짜 왕천재;;;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이렇게 하면 중복되는 코드를 없앨 수 있어서 확실히 좋을 것 같아!