Skip to content
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

Jump to bottom

[1주차] 김동혁 미션 제출합니다. #2

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

[1주차] 김동혁 미션 제출합니다. #2

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3744f29
feat: :sparkles: todo리스트 디자인 및 틀 설정
ddhelop Mar 11, 2024
1c1d7ff
feat: todoList 항목추가, 삭제, 완료 기능 구현
ddhelop Mar 12, 2024
316c6a7
test: 배포 테스트
ddhelop Mar 12, 2024
b54ecd5
feat: 할 일 삭제 시 애니메이션 추가
ddhelop Mar 13, 2024
95ffb1a
fix: '추가' 버튼 크기 조정
ddhelop Mar 13, 2024
f5d4b19
fix: 할일 체크 시 로컬스토리지에 저장되지 않는 버그 수정
ddhelop Mar 13, 2024
0266528
feat: 모바일(768px이하) 스타일
ddhelop Mar 14, 2024
daf9717
fix: 폰트 크기 조정
ddhelop Mar 14, 2024
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
8 changes: 8 additions & 0 deletions icon/check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 17 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand All @@ -8,7 +8,22 @@
</head>

<body>
<div class="container"></div>
<div class="wrapper">
<div class="header">✓ To Do</div>
Copy link

Choose a reason for hiding this comment

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

semantic 태그가 사용되었으면 더 좋았을 것 같아요!

Copy link
Member Author

Choose a reason for hiding this comment

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

semantic 태그를 사용해서 리팩토링 해볼게요 감사합니다.!!

Comment on lines +11 to +12
Copy link

Choose a reason for hiding this comment

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

Suggested change
<div class="wrapper">
<div class="header">✓ To Do</div>
<body>
<header>
<h1>To Do</h1>
</header>

Copy link

Choose a reason for hiding this comment

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

div 태그 대신 해당 페이지에서 가장 중요한 제목인만큼 header태그로 감싸는건 어떨까요?

그리고 내부의 내용은 좀더 중요도를 줘서 h1으로 다시 감싸보았어요 ㅎㅎ

Copy link
Member Author

Choose a reason for hiding this comment

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

시멘틱 태그 활용, 그리고 h1태그 이용 습관화 해야겠어요. 감사합니다.

<div class="todoContainer">
<h1 class="title">오늘 할 일</h1>
<p id="todayDate"></p>
Comment on lines +13 to +15
Copy link

Choose a reason for hiding this comment

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

div 태그를 많이 쓰셨더라구요!

KEY QUESTIONS로 알아본 웹 접근성을 위해서 시맨틱 태그를 적극적으로 활용해보시면 어떨까요?
여기서는 <section>태그를 사용해보세요! 이 태그는 독립적으로 배포 및 재사용할 수 있는 독립형 콘텐츠에 사용된답니당!😊

참고할 수 있는 시맨틱 태그 공식문서 달아둘게요 > <


<!-- input container -->
<div class="WriteForm">
Copy link

Choose a reason for hiding this comment

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

저는 html 태그의 id, class 속성으로 주로 케밥케이스를 사용하는데요!

kebab-case란?
하이픈으로 단어를 연결하는 표기법

참고만 하면 될 것 같아요 ㅎㅎ

그치만 시작이름으로 영문 대문자, 숫자, 특수문자는 쓰지 않는다고 해요 !

<div class="writeTodoForm">
<img src="./icon/check.svg" class="check_icon" />
Copy link

@songess songess Mar 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

svg를 사용해 훨씬 깔끔한 거 같아요!

Copy link

Choose a reason for hiding this comment

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

맞아요 😆 여기서 alt 태그로 이미지 속성값을 넣어주면 더 좋아요 !

우리는 웹 접근성을 위해서 코드를 짤때 시각장애인을 위해 화면을 읽어주는 기능인 '스크린리더'를 고려해주어야 하는데요,

스크린 리더는 img 태그에 대해 이런 특징을 가진다고 해요!

  1. alt 태그를 명시해두지 않으면 src값을 읽어주고
  2. alt= "" 라고 명시하면 해당 이미지를 읽지 않고 넘어가고
  3. alt= "이미지를 나타내는 단어" 라고 명시하면 '이미지를 나타내는 단어' 를 읽어준답니다 > <

<input type="text" class="TodoInput" placeholder="할 일 추가" />
<button class="submitBtn">추가하기</button>
</div>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
11 changes: 10 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
//CEOS 19기 프론트엔드 파이팅🔥 ദ്ദി˶ˊᵕˋ˵)
// 오늘 날짜
const today = new Date();
const options = {
month: "long",
day: "numeric",
weekday: "long",
};
const dateString = today.toLocaleDateString("ko-KR", options);
Comment on lines +2 to +8
Copy link

Choose a reason for hiding this comment

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

toLocalDateString과 options를 사용해 날짜표시를 이렇게 할 수 있군요. 배워갑니다!

Copy link
Member

Choose a reason for hiding this comment

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

이 방법은 저도 배워갑니다...!!


document.getElementById("todayDate").innerText = dateString;
114 changes: 113 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,113 @@
/* 본인의 디자인 감각을 최대한 발휘해주세요! */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Comment on lines +1 to +5
Copy link

Choose a reason for hiding this comment

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

전체 선택자를 사용하셨네요 ! 좋은 것 같아요 ㅎㅎ

그런데 box-sizing 처럼 간단한 속성을 적용하는 경우 실제 브라우저 로딩 속도에 영향을 미치지 않지만,
서버와 사이트 접속자의 물리적 거리가 수천에서 수만 킬로미터 이상 떨어져 있고 전체 선택자에 과도한 속성을 적용할 경우 로딩 속도에 영향을 미칠 수도 있다고 하네요 !!

그래서 저의 경우 프로젝트를 시작할 때 reset.css를 적용해두고 시작하는데요 😃

[reset.css]
css가 없이 html만 있던 시절 기본적인 태그에는 적당한 서식이 붙어 있었는데요, 이후 css가 생기면서 이 서식은 css의 기본 default서식이 되었다고 해요.
그런데 이것은 브라우저마다 서로 다른 서식을 갖게 되면서 브라우저의 스타일을 하나로 통일해야 하는 선행작업이 필요해졌는데요, 그것을 reset.css가 해주는거라고 생각하시면 된답니다!

한마디로, 브라우저의 기본요소의 디자인을 모두 없애는 것으로 주로 아래처럼 모두 0으로 만드는 방법을 통해 브라우저의 서식을 하나로 통일을 시키는 것이에요!

  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;

참고하기 좋은 블로그 하나 첨부할게요 😃

Copy link
Member Author

Choose a reason for hiding this comment

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

항상 전체 선택자로 이용했는데 reset.css을 이용할 수도 있네요. 감사합니다.


body {
background-color: #252423;
}
h1 {
font-size: 18px;
color: #e9ecef;
font-weight: 500;
margin: 0;
}

.wrapper {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;

align-items: center;
}
Comment on lines +49 to +56
Copy link

Choose a reason for hiding this comment

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

css 속성 정말 많죠...😂 그래서 저도 처음에는 이 속성을 썼었나 안썼었나 많이 헷갈렸어요! 지금보다 훨씬 속성이 많아진다면 정말 복잡해지겠죠?

분명히 속성을 써 내려가는 순서는 정해진 우선순위가 없고, 올바른 작성법이라고 권고하는 규칙도 없어요! 그래서 순전히 스타일시트를 작성하는 사람 편한대로 쓰는거는 저도 맞다고 생각하는데요,
하지만 여러 불편함을 이유로 저는 mozilla에서 추천하는 css 속성 순위를 두고 작성하기 시작했어요!

이렇게 하면 아래와 같은 이점이 있더라고요

1. 특정 속성을 찾기 훨씬 쉽다
2. 다른 사람과 함께 작업해야 한다거나, 혹은 다른 사람이 만든 CSS를 판독한다거나 할 때 좋다

그런데 매번 순서를 고려해서 짜는게 어려으니 stylelint를 적용하시는걸 추천드려요😆 단축키 한번이면 뒤죽박죽 작성한 속성들을 순서대로 알아서 정렬해주는 이점이 있답니다! 그외에도 정렬 extenstion은 많으니 참고할 수 있는 블로그를 달아드릴게요 >.<

Copy link
Member Author

Choose a reason for hiding this comment

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

stylelint 처음들어보는 개념이라 생각못했네요. 순서들을 알아서 정렬해주는 거 필요했는데 리팩토링 시 이용해봐야겠어요. 감사합니다.

.header {
width: 100%;
height: 6vh;
background-color: #1b1a19;

color: #e9ecef;
text-align: left;
padding-left: 45px;
line-height: 6vh;
font-size: 1.1rem;
border-bottom: 1px solid #484644;
Comment on lines +62 to +67
Copy link

Choose a reason for hiding this comment

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

단위는 px, rem 통일해주는 것이 좋을 것 같아요 😆

}

.todoContainer {
width: 50%;
min-height: 95vh;
background-color: #1b1a19;
padding: 30px;
border-radius: 5px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

#todayDate {
font-size: 10px;
color: gray;
margin: 6px 0 0 1px;
}
.WriteForm {
width: 100%;
border-radius: 10px;
margin-top: 20px;
display: flex;
flex-direction: column;
background-color: #252423;
}

.writeTodoForm {
width: 100%;
height: 52px;
display: flex;
flex-direction: row;
Copy link

Choose a reason for hiding this comment

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

flex-direction은 디폴트가 row라서 안 적어도 된답니당

align-items: center;
padding: 0 15px 0 15px;
Copy link

Choose a reason for hiding this comment

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

Suggested change
padding: 0 15px 0 15px;
padding: 0 15px;

/* border-bottom: 1px solid #8e8986; */
Copy link

Choose a reason for hiding this comment

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

여기도 주석 삭제..! > <

}
.InputFront {
width: 15%;
height: 50px;
}
.TodoInput {
width: 100%;
height: 50px;
background-color: #252423;
outline: none;
Copy link

Choose a reason for hiding this comment

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

outline 이라는 속성도 있군요 👍

border: none;
color: #e9ecef;
padding: 10px;
}
.TodoInput::placeholder {
color: #788bff; /* Placeholder 텍스트 색상 변경 */
}
.check_icon {
width: 20px;
height: 20px;
margin: 0 15px 0 0px;
fill: #788bff;
}

.SubmitTodo {
width: 100%;
height: 43px;
display: flex;
align-items: center;
justify-content: right;
padding-right: 5px;
}
.submitBtn {
cursor: pointer;
background-color: #252423;
border: 1px solid #8e8986;
width: 60px;
height: 30px;
border-radius: 10px;
font-size: 12px;
color: #8e8986;
}
.submitBtn:hover {
background-color: #3c3a39;
}