-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[YooN] 3/5(수)까지 작업할 PR #2
[YooN] 3/5(수)까지 작업할 PR #2
Conversation
@SangYoonLee1231 PR을 main 브랜치로 보내셨어요~ |
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.
기본 설정들이 잘 잡힌것 같으니 이 구조에서 개발해보세요.
index.html
Outdated
</div> | ||
<!-- Task Card --> | ||
<div class="task-card"> | ||
<div class="task-card__title">Task 1</div> |
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.
heading 태그 사용도 고려~
index.html
Outdated
<img | ||
class="column__header-right-icon" | ||
src="./icons/plus.png" | ||
alt="add task" |
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.
alt를 쓸거면 조금더 친절한 설명으로.
index.html
Outdated
<!-- Header --> | ||
<header class="header"> | ||
<div class="header__logo"> | ||
<span class="header__logo-name">TASKIFY</span> |
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.
여기도 heading태그 사용해도 될듯
앗 감사합니다! 제 브랜치로 수정했습니다 :) |
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.
정적인 화면 구성이 어느정도 됐군요. 수고했어요.
<!-- Task Card --> | ||
<!-- <div class="task-card"> | ||
<div class="task-card__left"> | ||
<div class="task-card__title">Task 1</div> | ||
<div class="task-card__description">Description 1</div> | ||
<div class="task-card__author">author by YooN</div> | ||
</div> | ||
<div class="task-card__right"> | ||
<img | ||
class="task-card__right-delete-icon" | ||
src="./icons/delete.png" | ||
width="14px" | ||
alt="edit task" | ||
/> | ||
<img | ||
class="task-card__right-modify-icon" | ||
src="./icons/pen.png" | ||
width="14px" | ||
alt="delete task" | ||
/> | ||
</div> | ||
</div> --> |
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.
사용하지 않는 코드는 지워버리세요.
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
padding: 14.5px 16px; |
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.
디자인에 소수점이 있었나봐요?
가급적 소수점은 피하는것이 좋아요.
display: flex; | ||
flex-direction: column; |
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.
레이아웃 관련된 비슷한 스타일이 자주 등장하면
레이아웃 클래스를 만들어서 사용하는 것도 좋죠.(유틸리티 클래스 )
justify-content: space-between; | ||
align-items: center; | ||
padding: 14.5px 16px; | ||
font-size: 16px; |
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.
em 과 rem도 공부해보세요.
<h2 class="task-card__description">Description 1</h2> | ||
<h3 class="task-card__author">author by YooN</h3> |
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.
h1은 페이지에 보통 한개 있는것이 좋고요.
h2,h3는 제목이라는 뜻인데 지금 내용이 제목 맞나요?
작업 목록
메인 UI 구현
메뉴(히스토리) 구현
새로운 카드 등록 기능 구현
카드 이동
카드 삭제
카드 수정
카드 정렬