Skip to content

modified1 #1

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.

Sign up for GitHub

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

Open
eunseobb wants to merge 1 commit into
base: master
Choose a base branch
from
Open

modified1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions myTodo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ body {
width: 1.5rem;
height: 1.5rem;
margin: 0.5rem 0.5rem;
border-radius: 50px;
border-radius: 5px;

@NaamuKim NaamuKim Jan 1, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rem과 px를 섞어서 사용하시는 이유가 있을까요?

rem을 사용하면 어떤 부분이 좋을까요?

현재 기준이 되는 rem은 몇px일까요?

기준이 되는 rem을 10px로 바꾸면 계산하기 편하지는 않을까요?

스크린샷 2023-01-01 오후 11 02 09
모바일 화면에선 이런 화면을 보게 되는데 어떻게 하면 모바일 화면에서도 보기 좋게 스타일링할 수 있을까요?

스크린샷 2023-01-01 오후 11 03 19
이모지를 가운데 배치하기 위해서 사용할 수 있는 여러 방법이 있습니다!
그 중 하나로 박스를 flex 박스로 만들어 justify-content : center align-items : center 를 사용하실 수 있습니다.

border: 1px solid lightgray;
cursor: pointer;
text-align: center;
Expand All @@ -89,14 +89,15 @@ body {

.delBtn {
display: flex;
justify-content: flex-end;
justify-content: center;
opacity: 1;
width: 2rem;
height: 2rem;
font-size: 1.5rem;
text-align: center;
font-weight: lighter;
cursor: pointer;
align-items: center;
}

.leftItems {
Expand Down
2 changes: 1 addition & 1 deletion myTodo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const showList=()=>{
const delBtnElem = document.createElement('button');
delBtnElem.classList.add('delBtn');
delBtnElem.addEventListener('click', ()=> deleteTodo(todo.id));
delBtnElem.innerHTML='🗑';
delBtnElem.innerHTML='❌';

@NaamuKim NaamuKim Jan 1, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

checkbox와 삭제버튼은 비슷하게 생긴 UI잖아요?
스크린샷 2023-01-01 오후 10 47 06

이를 하나의 reaction같은 div로 묶고 해당 div에 flex 속성을 넣어주면 자동으로 가로배치가 됩니다!
예시 코드를 첨부하겠습니다.

        const reactionBox = document.createElement('div');
        reactionBox.className='reactionBox'
        const checkElem = document.createElement('div');
        checkElem.classList.add('checkbox');
        checkElem.addEventListener('click', ()=>completeTodo(todo.id));
        checkElem.innerHTML='😶'

        const delBtnElem = document.createElement('button');
        delBtnElem.classList.add('delBtn');
        delBtnElem.addEventListener('click', ()=> deleteTodo(todo.id));
        delBtnElem.innerHTML='❌';

        reactionBox.appendChjild(checkElem);
        reactionBox.appendCHild(delBtnElem);

.reactionBox{
  display : flex;
}

@NaamuKim NaamuKim Jan 1, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그리고 지금 전체적으로 코드가 정렬이 일관적으로 안돼있는데 혹시 vscode 사용하고 계시면
prettier 라이브러리 적용하시면 저장할 때마다 같은 형식으로 코드 정렬되게끔 설정할 수 있습니다.
참고하실 글 첨부하겠습니다.
https://record22.tistory.com/112



if(todo.complete){
Expand Down
9 changes: 3 additions & 6 deletions myTodolist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,9 @@
<input type="text" class="whattodo" placeholder="해야 할 일을 입력해주세요.">
</div>

<ul class="todolist">

</ul>
<div class="todoBottom">
<div class="leftItems"> </div>
</div>
<ul class="todolist"></ul>

@NaamuKim NaamuKim Jan 1, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스네임은 어떤 부분은 camelCase고 어떤 부분은 소문자인것보다 형식을 일관성있게 만들면 className실수로 html파일을 왔다갔다 할 일이 줄어들 수 있을 것 같습니다😊

<div class="leftItems"> </div>

Comment on lines +23 to +24

@NaamuKim NaamuKim Jan 1, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

공백과 줄바꿈은 모두 컴퓨터가 읽어야하는 리소스입니다.
불필요한 공백과 줄바꿈을 자제해주세요!

물론 클린코드를 위한 줄바꿈은 찬성입니다!

전 개인적으로 html 같은 태그로 작성된 html 사이에 줄바꿈은 필요한 이유가 많지 않은 것 같습니다


</div>
</body>
Expand Down