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

[박성재]Week2 #50

Merged
merged 1 commit into from
Feb 26, 2024
Merged

[박성재]Week2 #50

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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
122 changes: 122 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
Copy link
Collaborator

Choose a reason for hiding this comment

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

lang 속성에는 알맞은 언어를 넣어주세요~!

<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Linkbrary</title>
</head>
<body>
<header>
<div class="header-box">
<a href="/index.html">
<img class="logo" src="svgs/logo.svg" alt="logo" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

img를 사용하실 때는 width, height 값을 추가해주어야 합니다.
브라우저 렌더링 시 레이아웃의 크기를 미리 계산할 수 있어서 성능에도 유리합니다.

웹페이지 성능 측정 지표인 CLS와도 관련 있으니 참고해주세요~!

</a>
<a href="signin.html">
Copy link
Collaborator

Choose a reason for hiding this comment

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

a 태그 하나로도 로그인 버튼은 구현할 수 있을 것 같아요. 태그를 어떻게 하면 최소화할 수 있을지 고민해보시면 좋을 것 같습니다!

<div class="button white" style="width: 128px">
<span class="button-log">로그인</span>
</div>
</a>
</div>
</header>
<main>
<section class="big-sec">
<div class="l-container">
<span class="big-title black">
Copy link
Collaborator

Choose a reason for hiding this comment

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

span태그보다 좀 더 의미 있는 태그를 사용해보시는게 어떨까요?
디자인 가이드를 보시고 페이지의 heading 구조를 먼저 고민해보시는 것을 추천드립니다!

<span class="rainbow">세상의 모든 정보</span>를<br />
쉽게 저장하고 관리해 보세요
</span>
<a href="signup.html">
<div class="button white" style="width: 350px">링크 추가하기</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

인라인 스타일은 사용은 지양해주세요!

</a>
<img src="svgs/first.svg" alt="first" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

img 태그의 alt 속성에는 의미 있는 텍스트를 넣어주세요!
스크린 리더기에 읽히는 것을 고려하여 작성해주시면 네이밍하시는데 도움이 되실 거에요.

</div>
</section>
<section class="small-sec">
Copy link
Collaborator

Choose a reason for hiding this comment

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

section 태그를 사용할 때는 자손 요소로 헤딩 태그를 추가해주어야 합니다. 참고

<div class="s-container">
<div class="word-box">
<span class="small-title black">
Copy link
Collaborator

Choose a reason for hiding this comment

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

강조를 위해서라면 span 태그 말고 다른 태그를 사용할 수 있을 것 같습니다.
혹은 헤딩태그로도 사용할 수 있을 테고요! span 태그보다는 의미 있는 태그를 적극적으로 사용해보시길 권장드려요!

<span class="title1-color">원하는 링크</span>를 <br />저장하세요
</span>
<span class="paragraph gray-3">
나중에 읽고 싶은 글, 다시 보고 싶은 영상,<br />
사고 싶은 옷, 기억하고 싶은 모든 것을<br />
한 공간에 저장하세요.
</span>
</div>
<img src="svgs/second.svg" alt="second" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

svg, png를 각각 어떤 상황에서 사용하면 좋을 고민해보시면 좋을 것 같아요!
보통 svg는 css를 사용해서 크기나 색상을 변경하기 쉬우니 아이콘이나 로고 같은 부분에서 많이 사용합니다.
색상을 변경할 수 있으니 다크모드를 대응할 때 이미지를 교체하지 않고도 색상만 변경해서 대응할 수 있겠죠? 참고

</div>
</section>
<section class="small-sec">
<div class="s-container">
<img src="svgs/third.svg" alt="third" />
<div class="word-box">
<span class="small-title black">
링크를 폴더로<br />
<span class="title2-color">관리</span>하세요
</span>
<span class="paragraph gray-3">
나만의 폴더를 무제한으로 만들고<br />
다양하게 활용할 수 있습니다.
</span>
</div>
</div>
</section>
<section class="small-sec">
<div class="s-container">
<div class="word-box">
<span class="small-title black">
저장한 링크를<br />
<span class="title3-color">공유</span>해 보세요
</span>
<span class="paragraph gray-3">
여러 링크를 폴더에 담고 공유할 수 있습니다.<br />
가족, 친구, 동료들에게 쉽고 빠르게 링크를<br />
공유해 보세요.
</span>
</div>
<img src="svgs/fourth.svg" alt="fourth" />
</div>
</section>
<section class="small-sec">
<div class="s-container">
<img src="svgs/fifth.svg" alt="fifth" />
<div class="word-box">
<span class="small-title black">
저장한 링크를<br />
<span class="title4-color">검색</span>해보세요
</span>
<span class="paragraph gray-3">
중요한 정보들을 검색으로 쉽게 찾아보세요.
</span>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-box white">
<div>
<span class="gray-3">©codeit - 2023</span>
</div>
<div class="help">
<a href="">Privacy Policy</a>
<a href="">FAQ</a>
</div>
<div class="social">
<a href="https://www.facebook.com/" target="_blank"
Copy link
Collaborator

Choose a reason for hiding this comment

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

target 속성 추가하여 새 창에서 뜰 수 있도록 하신 점 잘하셨습니다👍

><img src="svgs/facebook.svg" alt="facebook"
/></a>
<a href="https://www.twitter.com/" target="_blank"
Copy link
Collaborator

Choose a reason for hiding this comment

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

실제 이미지의 높이와 a 태그의 높이에 차이가 있는데요. inline 요소의 특성으로 인해 발생하는 이슈 입니다.
a태그의 높이를 아이콘의 크기와 동일하게 맞출 수 있도록 수정해보시겠어요?

><img src="svgs/twitter.svg" alt="twitter"
/></a>
<a href="https://www.youtube.com/" target="_blank"
><img src="svgs/youtube.svg" alt="youtube"
/></a>
<a href="https://www.instagram.com/" target="_blank"
><img src="svgs/insta.svg" alt="instagram"
/></a>
</div>
</div>
</footer>
</body>
</html>
73 changes: 73 additions & 0 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signin</title>
</head>
<body>
<div class="signin">
<div class="signin-form">
<div class="signin-logo">
<a href="index.html"><img src="svgs/logo.svg" alt="logo" /></a>
<div class="question black">
<span>회원이 아니신가요?</span>
<a href="signup.html" class="primary">회원 가입하기</a>
</div>
</div>
<form>
<label for="email">이메일</label>
Copy link
Collaborator

Choose a reason for hiding this comment

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

for 속성을 사용해서 input 과 연결하신 점 잘하셨습니다! 😊

<input
id="email"
name="email"
type="email"
placeholder="[email protected]"
/>
<label for="password">비밀번호</label>
<div class="password">
<input id="password" name="password" type="password" />
<i class="fa-solid fa-eye" id="togglePassword"></i>
Copy link
Collaborator

Choose a reason for hiding this comment

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

클릭 가능한 요소로 감싸면 어떨까요?
클릭 가능한 요소가 아닌데 클릭 이벤트를 넣게 되면 키보드로 해당 버튼에 접근할 수 없는 접근성 이슈가 발생합니다.
클릭 가능하다면 마우스를 오버했을 때 포인터 처리도 필요할 것 같습니다~!
작업을 완료하신 후에 키보드 를 통해서 포커스를 이동해 보거나 마우스를 직접 오버하여 확인해보시는 습관을 들이시면 도움이 되실거에요!

</div>
<button class="signin-but white">로그인</button>
Copy link
Collaborator

Choose a reason for hiding this comment

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

button태그를 사용할 때는 기본적으로 type 속성을 작성해야합니다. 용도에 맞는 type을 찾아 지정해주세요! 참고

</form>
<div class="social-login gray-4">
<span>소셜 로그인</span>
<div class="social-images">
<a href="https://www.google.com/"
><img src="svgs/google.svg" alt="google"
/></a>
<a href="https://www.kakaocorp.com/page/"
><img src="svgs/kakao.svg" alt="kakao"
/></a>
</div>
</div>
</div>
</div>
<script>
Copy link
Collaborator

Choose a reason for hiding this comment

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

회원가입 페이지와 로그인 페이지에서 사용하는 기능이 겹치는 것 같은데 js도 스타일 파일처럼 분리해서 작성하는 것이 어떨까요?

const togglePassword = document.getElementById("togglePassword");
const passwordInput = document.getElementById("password");

togglePassword.addEventListener("click", function () {
const type =
passwordInput.getAttribute("type") === "password"
? "text"
: "password";
passwordInput.setAttribute("type", type);

// 아이콘 클래스 토글
if (type === "text") {
Copy link
Collaborator

Choose a reason for hiding this comment

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

아이콘 토글 클래스 처리는 굳이 자바스크립트로 하지 않고 input의 타입만 변경해준 후에 css의 형제선택자인 + 를 이용하면 css만으로도 해결할 수 있을 것 같습니다.

 input[type="password"] + .togglePassword  {

}

input[type="text"] + .togglePassword {

}

togglePassword.classList.remove("fa-eye");
togglePassword.classList.add("fa-eye-slash");
} else {
togglePassword.classList.remove("fa-eye-slash");
togglePassword.classList.add("fa-eye");
}
});
</script>
</body>
</html>
82 changes: 82 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signup</title>
</head>
<body>
<div class="signin">
<div class="signin-form">
<div class="signin-logo">
<a href="index.html"><img src="svgs/logo.svg" alt="logo" /></a>
<div class="question black">
<span>회원이 아니신가요?</span>
<a href="signin.html" class="primary">로그인 하기</a>
</div>
</div>
<form>
<label for="email">이메일</label>
<input
id="email"
name="email"
type="email"
placeholder="[email protected]"
/>
<label for="password">비밀번호</label>
<div class="password">
<input id="password" name="password" type="password" />
<i class="fa-solid fa-eye togglePassword"></i>
</div>
<label for="password">비밀번호 확인</label>
<div class="password">
<input id="password" name="password" type="password" />
<i class="fa-solid fa-eye togglePassword"></i>
</div>
<button class="signin-but white">회원가입</button>
</form>
<div class="social-login gray-4">
<span>다른 방식으로 가입하기</span>
<div class="social-images">
<a href="https://www.google.com/"
><img src="svgs/google.svg" alt="google"
/></a>
<a href="https://www.kakaocorp.com/page/"
><img src="svgs/kakao.svg" alt="kakao"
/></a>
</div>
</div>
</div>
</div>
<script>
const togglePasswords = document.querySelectorAll(".togglePassword");
const passwordInputs = document.querySelectorAll(
'input[type="password"]'
);

togglePasswords.forEach(function (togglePassword, index) {
togglePassword.addEventListener("click", function () {
const type =
passwordInputs[index].getAttribute("type") === "password"
? "text"
: "password";
passwordInputs[index].setAttribute("type", type);

// 아이콘 클래스 토글
if (type === "text") {
togglePassword.classList.remove("fa-eye");
togglePassword.classList.add("fa-eye-slash");
} else {
togglePassword.classList.remove("fa-eye-slash");
togglePassword.classList.add("fa-eye");
}
});
});
</script>
</body>
</html>
Loading
Loading