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

Merged
merged 5 commits into from
Feb 25, 2024
Merged

[이현승] Week2 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0a5779f
testing
waterkail Feb 21, 2024
d0a31ba
testing2
waterkail Feb 21, 2024
05918a6
홈페이지, 로그인, 회원가입 완성
waterkail Feb 23, 2024
25fe7d4
near-end
waterkail Feb 23, 2024
1e048f3
add faq and privacy html
waterkail Feb 23, 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
136 changes: 136 additions & 0 deletions 2Weekly Mission/Index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Linkbrarystyle.css" rel="stylesheet" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

일반적인 html, css 파일명은 주로 케밥 케이스를 많이 쓰는 것 같아요. (찾아보기: 'kebab case', 'snake case', 'camel case')

아래는 작성해주신 코드를 케밥 케이스로 변경한 예시이고 파일명이 꼭 이래야한다는 절대적인 정답은 아닙니다!

Suggested change
<link href="Linkbrarystyle.css" rel="stylesheet" />
<link href="linkbrary-style.css" rel="stylesheet" />

파일명까지 포함해서 의견 드리자면,
css 파일 자체가 스타일링을 한다는 것을 의미하기 때문에 'style' 이라는 단어가 파일명에 굳이 포함되지 않아도 될 것 같아요.
작성하신 것처럼 서비스의 명칭을 사용하여 linkbrary.css 로 작성하거나 홈페이지(index.html)를 의미하는 index.css, home.css 등으로도 작성해볼 수 있을 것 같네요 😀

<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Abel&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Acme&display=swap"
rel="stylesheet"
/>
<title>Linkbrary</title>
Copy link
Collaborator

Choose a reason for hiding this comment

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

타이틀 잘 지정해주셨네요 👍🏽

</head>
<body>
<header class="gnb">
Copy link
Collaborator

Choose a reason for hiding this comment

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

gnb 는 Global Navigation Bar 의 약자로 사이트 내 주요 페이지로 이동할 수 있는 링크들의 집합을 의미하는데요,
(참고: 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런))

시안으로 봤을 때는 헤더에 네비게이션이 포함된 형태가 아니기 때문에 'gnb' 라는 클래스명과는 어울리지 않는 것 같습니다
'header' 클래스를 동일하게 사용해도 좋을 것 같아요 :)

<div class="logoin">
Copy link
Collaborator

Choose a reason for hiding this comment

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

  1. 오타 주의해주세요! (login 을 의미하신거겠죠?) -> 사소한 오타 때문에 버그 생기기 쉽고 의외로 찾기 힘들어서 고생하기도 합니다

  2. 해당 영역 봤을 때 로고와 로그인 버튼 (헤더의 모든 영역) 을 포함하고 있어 login 이라고 네이밍 하는 게 맞을까? 하는 생각이 듭니다.
    해당 영역을 포괄하는 단어를 사용하는 게 좋을 것 같아요.
    아래 사용하신 container 나 wrapper 등을 잘 활용해봐도 좋을 것 같습니다

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

logo와 login 버튼이 같이 들어가 있는 부분이라서 클래스를 logoin으로 지었습니다.

<img src="landing/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.

alt 태그는 접근성 관점에서 중요한데요, 보다 정보를 전달할 수 있는 내용으로 작성해주시는 게 좋습니다

첫번째 멘토링 시간에 공유드렸던 자료들 시간내서 꼭 한 번 보시면 도움 되실 거에요!

alt 작성한 부분들 전체적으로 어떻게 개선하면 좋을지 고민해보세요 🙂

<a href="./signin.html" class="cta">로그인</a>
</div>
</header>
<main>
<div class="content1">
<div class="container1">
<h2>
<span>세상의 모든 정보</span>를<br />
Copy link
Collaborator

Choose a reason for hiding this comment

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

디자인 상 강조가 되어있는데요, html 에서도 의미상 강조를 하고 싶다면 em 태그를 활용해봐도 좋을 것 같습니다!
(찾아보기: em, b, strong 태그 차이)

쉽게 저장하고 관리해 보세요
</h2>
<a href="./signup.html" class="cta link">링크 추가하기</a>
<div class="image-box1">
<img src="./landing/image 25.png" alt="소개 이미지" />
</div>
</div>
</div>
<div class="content2">
<div class="frame">
<div class="ad-text">
<h3>
<span class="adText-deco1">원하는 링크</span>를<br />
저장하세요
</h3>
<p>
나중에 읽고 싶은 글, 다시보고 싶은 영상, 사고 싶은 옷, 기억하고 싶은 모든 것을 한 공간에 저장하세요.
</p>
</div>
<div class="ad-image">
<div class="image1"><img src="landing/1번 이미지.PNG" alt="1번이미지"></div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

  1. png 확장자는 소문자로 작성해주세요~! (다른 부분들은 그렇게 되어있네요)
  2. 태그마다 줄 바꿈해서 작성해주세요 -> 여기 말고 동일하게 작성된 부분들 같이 수정 부탁드립니다!
Suggested change
<div class="image1"><img src="landing/1번 이미지.PNG" alt="1번이미지"></div>
<div class="image1">
<img src="landing/1번 이미지.png" alt="1번이미지">
</div>

</div>
</div>
</div>
<div class="content2">
<div class="frame">
<div class="ad-image">
<div class="image2"><img src="landing/디스크립션 없는 팝업 1.png" alt="2번이미지"></div>
</div>
<div class="ad-text">
<h3>
링크를 폴더로<br />
<span class="adText-deco2">관리</span>하세요
</h3>
<p>나만의 폴더를 무제한으로 만들고 다양하게 활용할 수 있습니다.</p>
</div>
</div>
</div>
<div class="content2">
<div class="frame">
<div class="ad-text">
<h3>
저장한 링크를<br />
<span class="adText-deco3">공유</span>해 보세요.
</h3>
<p>
여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게
쉽게 빠르게 링크를 공유해 보세요.
</p>
</div>
<div class="ad-image ad3">
<div class="image3">
<img src="landing/폴더 공유하기 팝업 1.png" alt="이미지 3">
</div>
</div>
</div>
</div>
<div class="content2">
<div class="frame">
<div class="ad-image ad4">
<div class="image4">
<img src="landing/스크린샷 2023-03-17 오후 3.22 1.png" alt="4번 이미지">
</div>
</div>
<div class="ad-text">
<h3>저장한 링크를<br /><span class="adText-deco4">검색</span>해 보세요</h3>
<p>중요한 정보를 검색으로 쉽게 찾아보세요.</p>
</div>
</div>
</main>
<footer>
<div class="under-bar">
<div>©codeit - 2023</div>
<div class="Ugrid1">
<a href="./privacy.html">Privacy Policy</a>
<a href="./faq.html">FAQ</a>
</div>
<div class="Ugrid2">
<a href="https://www.facebook.com/" target="_blank">
<img src="./landing/akar-icons_facebook-fill.svg" alt="페이스북" />
</a>
<a href="https://twitter.com/" target="_blank">
<img src="./landing/akar-icons_twitter-fill.svg" alt="트위터X" />
</a>
<a href="https://www.youtube.com/" target="_blank">
<img src="./landing/akar-icons_youtube-fill.svg" alt="유튜브" />
</a>
<a href="https://www.instagram.com/" target="_blank">
<img
src="./landing/ant-design_instagram-filled.svg"
alt="인스타그램"
/>
</a>
</div>
</div>
</footer>
</body>
</html>
Loading
Loading