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 #54

Merged
merged 1 commit into from
Feb 27, 2024
Merged

[이남경]Week2 #54

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
Empty file added faq.html
View file
Open in desktop
Empty file.
Binary file added images/.DS_Store
View file
Open in desktop
Binary file not shown.
70 changes: 70 additions & 0 deletions images/landing/_img.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.
28 changes: 28 additions & 0 deletions images/landing/_img1.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.
44 changes: 44 additions & 0 deletions images/landing/_img4.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.
3 changes: 3 additions & 0 deletions images/landing/akar-icons_facebook-fill.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.
3 changes: 3 additions & 0 deletions images/landing/akar-icons_twitter-fill.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.
10 changes: 10 additions & 0 deletions images/landing/akar-icons_youtube-fill.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.
3 changes: 3 additions & 0 deletions images/landing/ant-design_instagram-filled.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.
10 changes: 10 additions & 0 deletions images/landing/img2.svg
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

해당 파일 확장자를 .svg로 하신 이유가 있으실까요?

svg는 벡터 이미지를 사용할 때 정하는 확장자입니다 ! 수학적 연산처리로 그래픽을 나타내는 방법이며 낮은 용량과 깨지지 않는 장점이 있어요.
해당 이미지는 점과 선으로 이루어지기 어려운 이미지이며 벡터이미지 보다는 픽셀 이미지에 가까운 것 같습니다 !

또한, 단순이 img 라는 파일명 보다는 product-image-1, 혹은 introduce-product-image-1, landing-main-image-1과 같이 의미 있는 파일명으로 짓는 것이 어떨까요 ? =)

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions images/landing/img3.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.
Binary file added images/signin/.DS_Store
View file
Open in desktop
Binary file not shown.
22 changes: 22 additions & 0 deletions images/signin/Component 2.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.
12 changes: 12 additions & 0 deletions images/signin/Component 3.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.
15 changes: 15 additions & 0 deletions images/signin/logo.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.
10 changes: 10 additions & 0 deletions images/signup/Component 2.svg
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

파일명에는 띄어 쓰기 대신 -를 사용하시는 것을 권장드립니다 !
문자열로 표시할 때 "Component\ 2.svg" 이런식으로 표기해야 될 수도 있어서요.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/state=Default.png
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

파일 명에 =가 있습니다. 의도된 것일까요?

Copy link
Author

Choose a reason for hiding this comment

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

의도한건 아닌데 파일명에는 = 를 안쓰는게 좋은가요??

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/state=Selected.png
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.
137 changes: 137 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">
<link rel="font-style" type="text/css" href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'>

<title>Linkbrary</title>
</head>
<body>
<header>
<section class="header">
<a href="/">
<img class="header-logo" src="/images/signin/logo.svg" alt="Linkbrary-logo">
</a>
<nav>
<a href="/signin.html">
<input class="header-login" type="button" value="로그인">
</a>
</nav>
</section>
</header>
<main>
Comment on lines +13 to +26
Copy link
Collaborator

Choose a reason for hiding this comment

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

(예시입니당) 여기서 header가 맞는지 잘 모르겠어요 ㅠㅜ


<section class="main">
<h1 class="main-h1">
<span class="main-h1-gradient">세상의 모든 정보</span>를<br>
쉽게 저장하고 관리해 보세요
</h1>
<a href="/signup.html">
<input class="main-h1-button" type="button" value="링크 추가하기">
</a>
<img src="/images/landing/_img.svg" alt="landing-main-image">
Copy link
Collaborator

Choose a reason for hiding this comment

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

alt를 좀 더 구체적으로 작성해볼까요?

alt를 꼼꼼하게 작성했군요 ! 좋은 습관입니다.
다만, alt는 스크린 리더 사용자에 대한 보조 텍스트가 될 수 있으므로 "어떠한 이미지 인지"를 작성해주는 것이 좋아요 !

alt의 목적

  • 인터넷 연결이 끊겼을 때 대체되는 이미지
  • 스크린 리더 사용자를 위한 대체 텍스트
  • 이미지를 볼 수 없는 환경에서 이미지를 대체하기 위한 텍스트
    등 목적을 알게 된다면 alt를 어떻게 사용하시면 될지 알 수 있을 것 같아요.

다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:

tl;dr

  • Write Good Alt Text
  • Add alt text all non-decorative images.
  • Keep it short and descriptive, like a tweet.
  • Don’t include “image of” or “photo of”.
  • Leave alt text blank if the image is purely decorative
  • It's not necessary to add text in the Title field.

원문 보기

</section>

<section class="main1">
Copy link
Collaborator

Choose a reason for hiding this comment

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

class/id를 단순히 숫자를 열거하는 것보다 어떤 "목적"인지 작성하는게 어떨까요?

다음은 *BEM 컨벤션을 따른 목적을 내포한 네이밍 예시입니다:

Suggested change
<section class="main1">
<section class="landing-section__image--left">

만약, 1, 2와 같은 순서가 숫자로 들어가야 한다거나 디자인을 보았을 때 직관적으로 재사용 가능한 패턴들로 보이는데 각자 다른 고유한 스타일이 들어가야한다면, 스타일 구성이 잘못되었는지도 확인해보면 좋습니다.

BEM: CSS 클래스/아이디 네이밍 컨벤션 중 하나예요. 더 알아보기

<div class="main1-contents">
<div class="main1-text">
<h2 class="main1-h2">
<span class="main1-h2-gradient">원하는 링크</span>를<br>
저장하세요
</h2>
<p class="main1-text-normal">
나중에 읽고 싶은 글, 다시 보고 싶은 영상,
사고 싶은 옷, 기억하고 싶은 모든 것을
한 공간에 저장하세요.
</p>
</div>
<img class="main1-img" src="/images/landing/_img1.svg" alt="landing-sub-image-1">
</div>
</section>

<section class="main2">
<div class="main2-contents">
<img src="/images/landing/img2.svg" alt="landing-sub-image-2">
<div class="main2-text">
<h2 class="main2-h2">
링크를 폴더로<br>
<span class="main2-h2-gradient">관리</span>하세요
</h2>
<p class="main2-text-normal">
나만의 폴더를 무제한으로 만들고
다양하게 활용할 수 있습니다.
</p>
</div>
</div>
</section>

<section class="main3">
<div class="main3-contents">
<div class="main3-text">
<h2 class="main3-h2">
저장한 링크를<br>
<span class="main3-h2-gradient">공유</span>해 보세요.
</h2>
<p class="main3-text-normal">
여러 링크를 폴더에 담고 공유할 수 있습니다.
가족, 친구, 동료들에게 쉽고 빠르게 링크를
공유해 보세요.
</p>
</div>
<img src="/images/landing/img3.svg" alt="landing-sub-image-3">
</div>
</section>

<section class="main4">
<div class="main4-contents">
<img src="/images/landing/_img4.svg" alt="landing-sub-image-4">
<div class="main4-text">
<h2 class="main4-h2">
저장한 링크를<br>
<span class="main4-h2-gradient">검색</span>해 보세요
</h2>
<p class="main4-text-normal">
Copy link
Collaborator

Choose a reason for hiding this comment

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

text-normal과 같은 의미 있는 클래스명. 훌륭합니다 👍 이런식으로 지어주시면 더욱 좋을 것 같아요 ㅎㅎ

중요한 정보들을 검색으로 쉽게 찾아보세요.
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-contents">
<section class="footer-text1">
<p>
©codeit - 2023
</p>
</section>
<section class="footer-text2">
<a href="/privacy.html">
<p>Privacy Policy</p>
</a>
<a href="/faq.html">
<P>FAQ</P>
</a>
</section>

<section class="footer-sns">
<a href="https://www.facebook.com" target="_blank">
<img src="/images/landing/akar-icons_facebook-fill.svg" alt="facebook-logo">
</a>
<a href="https://www.twitter.com/" target="_blank">
<img src="/images/landing/akar-icons_twitter-fill.svg" alt="twitter-logo">
</a>
<a href="https://www.youtube.com" target="_blank">
<img src="/images/landing/akar-icons_youtube-fill.svg" alt="youtube-logo">
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="/images/landing/ant-design_instagram-filled.svg" alt="instagram-logo">
</a>
</section>
</div>
</footer>
</body>
</html>
Empty file added privacy.html
View file
Open in desktop
Empty file.
58 changes: 58 additions & 0 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style-signin.css">
<link rel="stylesheet" type="text/css" href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Linkbrary</title>
</head>
<body>
<main class="main">
<header>
<a href="/">
<img class="header-logo" src="/images/signin/logo.svg" alt="Linkbrary-logo">
</a>
<div>
<span class="header-none">회원이 아니신가요?</span>
<a class="header-deco" href="/signup.html">회원 가입하기</a>
</div>
</header>
<section class="contents">
<form action="http://localhost/login/php" method="POST">
<section class="input">
<section class="input-email">
<label class="label" for="이메일">이메일</label>
<input class="email" type="email" placeholder="[email protected]">
Copy link
Collaborator

Choose a reason for hiding this comment

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

<input>에 type 프로퍼티를 올바르게 설정하셨군요 👍 좋습니다.

</section>
<section class="input-password">
<label class="label" for="비밀번호">비밀번호</label>
<div class="input-binder">
<input class="password" type="password">
<!-- <img src="/images/eye-off.png" alt="eye-off"> -->
<i class="fas fa-eye" style="color: #4a4a4a;"></i>
</div>
</section>
</section>
<p class="login">
<input class="button" type="submit" value="로그인">
Copy link
Collaborator

Choose a reason for hiding this comment

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

오호 좋아요 form 안에 input태그로 적절하게 설정하셨군요 ! 👍👍👍

</p>
</form>
<div class="social-login">
<span>소셜 로그인</span>
<div class="social-icons">
<a href="https://www.google.co.kr/" target="_blank">
<img src="/images/signup/Component 2.svg" alt="google-logo"></a>
<a href="https://www.kakaocorp.com/page/" target="_blank">
<img src="/images/signin/Component 3.svg" alt="kakao-logo"></a>
</div>
</div>
</section>
</main>
</body>
</html>
Loading
Loading