[ 1주차 기본/심화/생각 과제 종합 ] #2
Conversation
Edit : Think.md
Refactor : Mystore code
| </div> | ||
| <div class="todo"> | ||
| <input id="samso" class="heart" type="checkbox"> | ||
| <label for="samso">삼겹살에 쏘주는 진리지⏰</label> |
Week1-0401/Todo.html
Outdated
| <img src="https://cdn.icon-icons.com/icons2/1659/PNG/512/3844435-home-house_110321.png" /> | ||
| <div>달력</div> | ||
| </button> | ||
| <button> | ||
| <img src="https://cdn-icons-png.flaticon.com/512/880/880590.png" /> |
There was a problem hiding this comment.
요 부분은 웹 접근성 면에서 가장 중요한 부분이라서 꼭 넣어주어야한다고하더라고용!
Week1-0401/Todo.html
Outdated
| </section> | ||
| </main> | ||
| <footer> | ||
| <button> |
There was a problem hiding this comment.
button 의 기본타입이 button 이어서 비워둔건데 혹시 어떤거로 하는게 좋을까요? submit 이나 reset 은 아닌거같구,,,
보통 type="button" 이렇게 해두나요?
There was a problem hiding this comment.
@Chanwoo-Jeong button의 기본 타입은 submit이에용!! 그리고 웹 접근성을 고려했을 때도 버튼의 타입을 명시해주는 게 좋다고 합니당 ㅎㅎ
There was a problem hiding this comment.
아하 그렇군요! 배워갑니다! 감사합니다!
| ## - 이를 위해 어떤 개발을 해야 할까? | ||
| 랜더링 속도를 빠르게 하기 위해서는 웹브라우저의 랜더링 과정을 이해하고 성능측정을 통해 무거운 작업들을 어떻게 효율적으로 처리할 수 있는지 등에 대한 고민을 해야한다. <br/> | ||
| 가령 브라우저 랜더링의 순서 DOM CSSOM Render Tree 등을 이해하고 불필요하거나 중복되는 랜더링 작업을 줄여보려 할 수도 있다. <br/> | ||
| 또한 최신 브라우저 기능 html tag css 을 이용하는 것도 좋은 방법이다. |
There was a problem hiding this comment.
사실 아직 웹 최적화를 고려할만큼의 실력은 아닌거같아서 많이 공부해보지 않아 내용이 좀 부족합니다! ㅎㅎ
다만 유튜브 보다가 https://youtu.be/sJ14cWjrNis 이 자료가 가장 와닿는거 같아서 적어보았습니다!
Week1-0401/MyStore.html
Outdated
|
|
||
| <body> | ||
| <header> | ||
| <div class="logo">🐣찬우의 포켓몬 잡화점</div> |
Week1-0401/Todo.html
Outdated
| </div> | ||
| <div class="todo"> | ||
| <input id="diet" class="heart" type="checkbox"> | ||
| <label for="diet">술조그만 먹고 다이어트를 해야한다구</label> |
There was a problem hiding this comment.
사실 술이 문제가 아니라 운동을 안하는게 문제일지도,,,, ㅎㅎ
| </div> | ||
| <div class="todo"> | ||
| <input id="mogako" class="heart" type="checkbox"> | ||
| <label for="mogako">모각코🔥</label> |
| padding: 1rem; | ||
| margin: 0.5rem; | ||
| height: fit-content; | ||
| box-shadow: 3px 3px 3px hsl(0deg 0% 0% /0.25); |
There was a problem hiding this comment.
저도 찾아보다가 이건 뭐지 하고 써본거 같네요!
| height: 550px; | ||
| margin: 2rem 1.5rem; |
There was a problem hiding this comment.
큰 의미는 없고 이번에 px rem em 공부를 하면서 다양하게 적용해 본 것 같네요!
|
|
||
| } | ||
|
|
||
| /* 메인 투두리스트 영역 */ |
There was a problem hiding this comment.
투두 section 은 너비를 넘어가면 다음행으로 세트가 넘어감과 더불어 일정 높이를 넘어서면 scroll 이 생기며 scroll 바도 커스텀 해보았습니다.
요기서 너비를 넘어가면 세트가 넘어가는 부분은 혹시 어떻게 구현하신걸까용?!?!?!?!!
There was a problem hiding this comment.
아 그 투두 section 의 넓이는 고정되어있고 넓이를 넘어서면 flex-wrap : wrap 처리를 해두었습니다.
그래서 TodayTodo , 개발은 재밌어 카테고리는 한 행에 나란히 있지만 "감성하루할일" 카테고리는 너비가 넓어 혼자 차지하고 있습니다. 그다음 카테고리가 아래 행으로 내려갔구요!
정리하면 flex-wrap: wrap 을 통해 구현하였습니다!
꼼꼼히 리뷰 달아주셔서 감사합니다!
|
금잔디조는 아니지만 지나가다 봤는데... 하트 아이콘 클릭하면 색 채워지는 건 어떻게 구현하신 건가요??!!! 그리고 디자인 진짜 너무 예뻐요! + 앗 코드리뷰 내용 보다가 알았는데 checked라는 걸 사용하신거군요 label이랑 ::before 이런걸로 구현하신거 너무 신기하네요..! 배워갑니다!! |
| display: flex; | ||
| position: relative; | ||
| flex-direction: column; | ||
| width: 450px; | ||
| height: 100%; | ||
| margin: 0 auto; | ||
| box-sizing: border-box; | ||
| background: linear-gradient(#9198e5, #f2c4c4, #f5f3f4); | ||
| } | ||
|
|
||
| header { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| padding: 1rem; | ||
| font-size: 2.8rem; | ||
| color: white; |
There was a problem hiding this comment.
css 속성 순서 통일해주면 놓친 부분이 무엇인지 쉽게 알 수 있고, 코드리뷰 하기도 좋겠죠?!
There was a problem hiding this comment.
뒤죽박죽 섞여서 저도 못찾아서 화가 납니다! ㅋㅋㅋㅋㅋ 다음 작성때는 한번 통일해볼게요...!
Week1-0401/Todo.css
Outdated
| grid-template-columns: repeat(7, 1fr); | ||
| } | ||
|
|
||
| main #calendar #calendar-content #day-Week .day { |
There was a problem hiding this comment.
그러게요...? 찾기 쉬우라고 몸통 main !!! 이런의미였는데....
지금 보니 main 은 없어도 충분히 찾기 쉽기도 하고 오히려 의미없는 선택자네요...! 빼보겠슴다!
Week1-0401/MyStore.css
Outdated
| header menu { | ||
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| } | ||
|
|
||
| header menu a { | ||
| margin: 0 10px; | ||
| } | ||
|
|
||
| header menu a:hover { | ||
| color: plum; | ||
| } |
There was a problem hiding this comment.
흠,,,, 이 질문에 대해 명쾌하게 생각해본적이 없네요...
css 무지해서
일단은 강력하게 자식만 지정하고 싶을 때만 자식 선택자를 쓰고
그렇지 않다면 보통 저렇게 사용하는 편이거든요...!
조금 더 관련자료를 찾아봐야겠네요!
Week1-0401/MyStore.html
Outdated
| <div class="category"> | ||
| <input id="All" type="checkbox"> | ||
| <label for="All">전체</label> | ||
| </div> |
There was a problem hiding this comment.
요것두 사실 div 보다는 p태그가 시멘틱스러운 태그 일것같네요!
There was a problem hiding this comment.
class, id의 첫문자 대문자 지양해야 합니둥!참고해주세요!
There was a problem hiding this comment.
시멘틱 태그를 사용했어야 했는데 div 지옥이네요.... 수정해볼게요!
그러게요 왜 id class 를 저렇게 썻을까요... ㅠㅠ 소문자 수정! 감사합니다!
Week1-0401/MyStore.html
Outdated
| <label for="Meun1">진화1</label> | ||
| </div> | ||
| <div class="category"> | ||
| <input id="Meun2" type="checkbox"> |
There was a problem hiding this comment.
사실 menu1, menu2,menu3이라는게 직관적이진않죠..웹접근성을 따져볼때 과연 좋은 id인가? 라는 생각이 들어요
There was a problem hiding this comment.
생각없이 id 주다가 저렇게 되어버렸네요! 감사합니다 수정할게요!
There was a problem hiding this comment.
저 위
기가막힌 애니메이션에 놀랐구요...!! ㅎㅅㅎ // 감사합니다😊
궁금한건 혹시 커밋할때 First, Make 요런 규칙은 어디서 적용시킨걸까?!! ㅎㅅㅎ
글고 파일명은 소문자를 사용하니 참고바랍니다!!!div 지옥 리팩토링 꼭하십쇼!
넘넘 고생해써요✨
이거에 대한 대댓을 어떻게 다는지 몰라 여기에 남깁니다.
저 커밋 규칙은 예전에 하던 분들이랑 맞췃던 커밋메시지인데 습관적으로 나와서 마구 뒤죽박죽 섞였네요.
웹팟장님이 노션에 적어주신 커밋 메시지로 다음부턴 통일시켜보겠습니다!
파일명은 jsx만 쓰다가 html css 확장자를 너무 오랜만에 써버려서 저런 오류를 범했네요 ㅋㅋㅋㅋㅋㅋ 감사합니다.
(div 지옥 탈출하자!!!)
이 많은 인원들 코드리뷰 해주시는 웹팟장님 너무너무 감사합니다! 항상 파이팅입니다!!!!!😊
| background-color: #f8f8f8; | ||
| padding: 20px; | ||
| box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); | ||
| z-index: 1; |
There was a problem hiding this comment.
그 아마 z-index같은 경우 애니메이션 효과랑 그 앞 카드 컨텐트 사이드 홈바와의 관계때문에 그럴거야!
| color: #333; | ||
| } | ||
|
|
||
| #hamberger { |
|
|
||
| display: grid; | ||
| grid-gap: 20px; | ||
| grid-template-columns: repeat(6, 250px); |
| @media screen and (max-width: 1800px) { | ||
| #cardSection { | ||
| grid-template-columns: repeat(5, 250px); | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 1600px) { | ||
| #cardSection { | ||
| grid-template-columns: repeat(4, 250px); | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 1300px) { | ||
| #cardSection { | ||
| grid-template-columns: repeat(3, 250px); | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width:1100px) { | ||
| #cardSection { | ||
| grid-template-columns: repeat(2, 250px); | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 900px) { | ||
| #cardSection { | ||
| grid-template-columns: repeat(1, 1fr); | ||
| padding: 0 150px; | ||
| } | ||
| } |
There was a problem hiding this comment.
미디어 쿼리 분기를 넘 잘했다..! 나는 마지막 줄에만 썼는데 이렇게 세부적으로 나눈 거 넘 잘했다고 생각해!
| @keyframes rotation_border { | ||
| 0% { | ||
| transform: rotateZ(0deg); | ||
| } | ||
|
|
||
| 0% { | ||
| transform: rotateZ(360deg); | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
좀 많이 힘들었어 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
Week1-0401/Todo.html
Outdated
| <div id="calendar-content"> | ||
| <div id="day-Week"> | ||
| <div class="day">월</div> | ||
| <div class="day">화</div> | ||
| <div class="day">수</div> | ||
| <div class="day">목</div> | ||
| <div class="day">금</div> | ||
| <div class="day">토</div> | ||
| <div class="day">일</div> | ||
| </div> | ||
| <div id="todo-week"> | ||
| <div class="dayBox"> | ||
| <div class="heart">❤️ | ||
| <div class="count">5</div> | ||
| </div> | ||
| <div>27</div> | ||
| </div> |
| </div> | ||
| </section> | ||
| <section id="todolist"> | ||
| <div class="category"> |
| <div class="category"> | ||
| <div class="category-title blue"> | ||
| <div class="title">개발은재밌어</div> | ||
| <button type="button">+</button> |
| <label for="diet">술조그만 먹고 다이어트를 해야한다구</label> | ||
| </div> | ||
| <div class="todo"> | ||
| <input id="samso" class="heart" type="checkbox"> |
There was a problem hiding this comment.
이거는 개인적인 의견이지만 type은 input 바로 옆에 붙여서 input type="checkbox" 이렇게 쓰는 게 더 좋은 것 같아요! 왜냐하면 input에 정말 여러가지 타입이 있는데, 이 input이 어떤 역할을 하는 input인지 한 번에 알 수 있으니까요!!
| 1. 뭔가 생각과제를 단순히 구글을 배끼는 것보다 조금 더 효율적으로 공부할 수 있는 공부법을 찾아봐야겠다,,,, | ||
| 2. 차후 조금 더 추가 업데이트 예정...! |
There was a problem hiding this comment.
좋다좋아! 최적화 방법이 정말정말 다양해서 공부하기 방대하더라고~ 계속해서 같이 공부해보쟈공! 그리고 정말 말 그대로 생각과제니까 오빠의 경험이나 생각을 녹여주면 더 흥미로울 것 같옹~
| background-color: #f8f8f8; | ||
| box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); | ||
| padding: 1rem; | ||
| } |
There was a problem hiding this comment.
나도 피드백 받았던 부분인데! px랑 rem을 혼용하는 이유가 있으까?? 왜냐면 난 특별한 이유가 없었어서 앞으로 절대단위 말고 상대단위로 최대한 통일시켜야곘다!! 라고 다짐햇거든!
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋㅋㅋ 이번에 공부하면서 섞인거같아 다음부터는 나도 rem 으로 통일하려고!
| border: 2px solid #ccc; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); | ||
| } |
There was a problem hiding this comment.
글고 요것도 내가 다른 분들 코드 보면서 나 스스로 고쳐야겠다고 다짐했던건데 css 속성 순서를 통일하는게 나스스로 나중에 코드 고칠때도 편리할거구, 협업할때 더할 나위 없이 유용할 것 같어! 나도 앞으로 그러려구!! 그리고 지수언니는 보니까 추가로 속성 분류마다 개행을 한번씩 줬더라고?! (width,margin,padding 등 우르르, 한줄띄우고, text 관련, 한줄 띄우고, background 관련 뭐 요런식으로!) 이 부분도 한번 참고해보면 좋을 것 가타~~
| grid-template-columns: repeat(1, 1fr); | ||
| padding: 0 150px; | ||
| } | ||
| } |
There was a problem hiding this comment.
미디어 쿼리 장인이시네여 긍데 이 경우엔 카드 열이 줄어들 때마다 각각 media를 설정해서 새로운 레이아웃을 지정해주기 보다, wrap으로 처리해서 알아서 item들이 다음줄로 넘어가게 만들고, 마지막에 한줄로 변했을 때는 가운데 정렬이 되어야한다는 조건이 있었으니까 그때만 media 써서 가운데 정렬 조건 추가해주는 간결한 방법도 잇다!
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 편한 방법을 두고 돌아가는 미디어 쿼리 하지만 공부했으니 만족해! 좋아요!
| transform: rotateZ(360deg); | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
안이 애니메이션 간지 머야;; 혼자 벌써 어디까지 나아가잇는거야;; 나도 데려가 같이가
| text-align: center; | ||
|
|
||
| /* 글자지켜! */ | ||
| word-break: keep-all; |
There was a problem hiding this comment.
오 대박 나는 글자 잘리는거 막으려고 overflow:hidden 이랑 글자지켜! 하기위해서 각 태그를 inline-block으로 설정해줬었는데!! 진짜 '단어뽀개지지않게 지키기 위한 속성'이 있었구나ㅋㅋㅋ짱신기 배워가유
There was a problem hiding this comment.
결국 flex-wrap으로 바꿧어 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
| <div class="JJim"> | ||
| <div class="favorite"> | ||
| <input id="poketmon3" class="heart" type="checkbox"> | ||
| <label for="poketmon3"></label> |
There was a problem hiding this comment.
아니 좀 웃기긴한데 ㅋ ㅋ ㅋㅋㅋㅋ ㅋ pokemon이랑 poketmon이랑 섞여잇음 ㅋㅋ 근데 나도 뭐가 맞는지 몰라서 찾아봣는데 pokemon이래 ㅋㅎㅋ 요런 철자 혼용은 나중에 js나 css에서 찾을 때 골칫거리가 될 수 있으니께릉 통일하는게 조을듯
There was a problem hiding this comment.
왜이러지 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 보이면 수정할게!
| align-items: center; | ||
| border-radius: 30px; | ||
|
|
||
| } |
|
|
||
| <div class="category"> | ||
| <h2 class="category-title blue"> | ||
| <div class="title">개발은재밌어</div> |
There was a problem hiding this comment.
좀 슬퍼지는 물음인걸? ㅋㅋㅋㅋㅋㅋㅋㅋ 그래도 재미없지..ㄴ 않...아 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
| <input id="deploy" class="heart" type="checkbox"> | ||
| <label for="deploy">프로젝트 무조건 </label> |
| 특히 사용자와 긴밀한 상호작용을 요구하는 프론트엔드는 빠르고 부드러운 환경이 유저의 ux에 큰 영향을 미친다. | ||
|
|
||
| 📌추신 : | ||
| 1. 뭔가 생각과제를 단순히 구글을 배끼는 것보다 조금 더 효율적으로 공부할 수 있는 공부법을 찾아봐야겠다,,,, |
✨ MyStore 구현 기능 명세
- 구현 결과물
PoketMonStrore.mp4
- 기본 과제
header , nav, card section으로 나누어 구현합니다.✔️space-between를 사용합니다.✔️- position : fixed 를 통해 구현
전체, 분류1, 분류2, 분류3총4가지로 구현됩니다.✔️flex 또는 grid를 사용하여 배치합니다. ✔️상품제목, 해시태그 목록, 이미지, 하트 찜 누르기가 들어있습니다.✔️- overflow:hidden ; word-break: keep-all; 를 통해 구현
- 단순히 overflow:hidden으로만 처리하면 태그가 아예 안보이는게 아니라 보이다가 중간에 hidden 처리됩니다.
이를 해결하기 위해 너비에 맞지 않을때 단어를 어떻게 처리해야하는지를 지정해줌으로써 (word-break: keep-all; = 단어단위로 인식)태그 자체가 보이지 않도록 구현했습니다.
- 심화 과제
단 . 마지막 한줄 정렬시 가운데로 상품 카드 레이아웃이 변경됩니다.✔️
- 생각 과제
Think.md에 작성 ✔️
🌼 PR Point
header 바에 있는 전체 , 새상품 추가 , 찜목록을 처음에는 노출시킨 후 브라우저 너비가 1000px 이하로 줄어들면 햄버거 버튼생성으로 반응형으로 작업하였습니다.
차후 찜버튼을 누르면 찜목록페이지에서 확인할 수 있어야하는 것 까지 고려해 찜버튼을 input checkbox와 label 을 결합하여 찜데이터를 이용할 수 있도록 구성하였습니다.
왼쪽 카테고리 네비게이션도 position : sticky를 통해 scroll을 따라다니게 구현하였습니다.
단조로운 css가 싫어 카드 주변에 에니메이션 효과를 줘보았습니다.
🥺 소요 시간, 어려웠던 점
(덕분에 z-index보다 중요한 것은 부모요소의 depth를 꼭 확인해야한다는 교훈을 얻었습니다.)
✨ WebTodoMate 구현 기능 명세
- 구현 결과물
TodoMate.mp4
- 기본 과제
header,main (section , section),footer로 나누어 구현합니다. ✔️grid가운데 정렬로 구현합니다. ✔️색상이 다르게표시됩니다. ✔️- css class 선택자를 통해 다른 색을 주도록 구현하였습니다
카테고리+할일리스트가 세트로 넘어갑니다 ✔️-flex-wrap: wrap; 을 통해 구현하였습니다.
- 심화 과제
- 생각 과제
Think.md에 작성 ✔️
🌼 PR Point
🥺 소요 시간, 어려웠던 점
3시간 정도 소요
어려웠던 점은 딱히 없었습니다.
다양한 기기로 확인해보니 화면이 조금 깨지더군요.... 보완해보겠습니다.🔥