[1주차 기본과제] 4번과제 #4
Conversation
| <i class="fa-solid fa-heart" style="color: pink"></i> 테라스에서 | ||
| 커피마시기 | ||
| </p> |
There was a problem hiding this comment.
| <p class="list_content"> | |
| <i class="fa-solid fa-heart" style="color: pink"></i> 테라스에서 | |
| 커피마시기 | |
| </p> | |
| <p class="list_content"> | |
| <i class="fa-solid fa-heart" style="color: pink"></i> 테라스에서 | |
| <span>커피마시기</span> | |
| </p> |
으로 하고 .list_content 에 display: flex, align-items:center 하면 정렬델것가튼디!
There was a problem hiding this comment.
div를 하나 만들고 태그와 아이콘을 따로 넣은 뒤에 flex 부여하고 align-item을 center줬어야 했는데 한번 이렇게 만들었더니 고치는 법을 도통 모르겠습니다. 요거에 대한 내 의견!
| <!--2번째 리스트--> | ||
| <article class="todo_list"> | ||
| <div class="list_title" style="background-color: orange"> |
There was a problem hiding this comment.
style이 요기 들어가잇는이유느?! 편하게가려고~?!ㅋㅎㅋㅎㅋㅎ
| <div class="list_title" style="background-color: brown"> | ||
| <h3 class="list_title_name">Urgent!</h3> | ||
| <button><i class="fa-solid fa-circle-plus"></i></button> |
| <i class="fa-solid fa-heart" style="color: pink"></i> 테라스에서 | ||
| 커피마시기 | ||
| </p> | ||
| <p class="list_content"><i class="fa-solid fa-heart"></i> 풋살하기</p> |
There was a problem hiding this comment.
또, 실수한 부분이 있는데 할일 카테고리 안에 할일 리스트를 만들 때, 태그 안에다가 아이콘을 넣었는데, 이렇게 했더니 아이콘이 살짝 글자보다 아래로 내려와서 굉장히 거슬립니다.
어엉! 나더 이거 너가 원하는게 이게 맞는지 모르겠는데 아이콘 위치만 맞추는게 맞다묜 요렇게 어뗘?
4th_assginment.css 에
.list_content i { position: relative; left: -5px; top: -1px; }
이렇게 추가해줬더니 하트 아이콘 위치만 움직이도라고!
| @@ -0,0 +1,149 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| </p> | ||
| <p class="list_content"> | ||
| <i class="fa-solid fa-heart" style="color: pink"></i> SOPT과제 | ||
| </p> |
| <button><i class="fa-solid fa-circle-plus"></i></button> | ||
| </div> | ||
| <p class="list_content"> | ||
| <i class="fa-solid fa-heart"></i> 유튜브보기 |
There was a problem hiding this comment.
전체적으로 진짜 시멘틱하게 쓰려고 노력한 것 같아서 정말 멋졌어용..! 나는 안될 것 같은 건 div 남발하게 되던데... 디테일하게 고려하고 짠 게 느껴졌어 역시 뉴식스 메인댄서 허니 ~~짱
✨ 구현 기능 명세
header,main (section , section),footer로 나누어 구현합니다.grid가운데 정렬로 구현합니다.색상이 다르게표시됩니다.카테고리+할일리스트가 세트로 넘어갑니다🌼 PR Point
🥺 소요 시간, 어려웠던 점
4h평소에 그리드를 거의 사용을 안해봤어서 그리드를 이용해서 캘린더를 만들 때 이리저리 계속 헤매다가 시간을 너무 많이 썼습니다.
또, 실수한 부분이 있는데 할일 카테고리 안에 할일 리스트를 만들 때, 태그 안에다가 아이콘을 넣었는데, 이렇게 했더니 아이콘이 살짝 글자보다 아래로 내려와서 굉장히 거슬립니다. 생각해보니 그냥 div를 하나 만들고 태그와 아이콘을 따로 넣은 뒤에 flex 부여하고 align-item을 center줬어야 했는데 한번 이렇게 만들었더니 고치는 법을 도통 모르겠습니다. absolute 부여하고 이동시키려고 해봤는데 안움직이네요...?
다음부터는, 반복되는 HTML이 있을 때는 일단 하나만 만든뒤에 CSS 다 적용해보고 괜찮으면 복사해서 여러개 쓰는 방식으로 하겠습니다..
🌈 구현 결과물