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

Merged
merged 1 commit into from
Feb 27, 2024
+559 −0
Merged

[이상우]week2 #59

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
28 changes: 28 additions & 0 deletions Card 1.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.
29 changes: 29 additions & 0 deletions Card-1.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.
36 changes: 36 additions & 0 deletions Card.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.
17 changes: 17 additions & 0 deletions Frame 2608782.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.
9 changes: 9 additions & 0 deletions content2.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.
9 changes: 9 additions & 0 deletions content3.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 content4.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.
107 changes: 107 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Linkbrary</title>
</head>
<body>
<header>
<div class="hi">
<div class="wrap">
<img src="logo.svg">
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 속성에 의미 있는 텍스트를 넣어주세요!
스크린 리더기에 읽히는 것을 고려하여 작성해주시면 네이밍하시는데 도움이 되실 거에요.

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 값을 추가해주어야 합니다.
브라우저 렌더링 시 레이아웃의 크기를 미리 계산할 수 있어서 성능에도 유리합니다.

<button class="login_button"><span class="login_font">로그인</span></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을 찾아 지정해주세요! 참고

Copy link
Collaborator

Choose a reason for hiding this comment

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

button태그와 a태그의 차이점에 대해서 알고 계실까요?
button 태그는 페이지 이동이 없는 단순 이벤트 처리를 위한 태그이고 a태그는 페이지 이동이 있는 링크 역할을 하고 있습니다.
어떤 태그가 적절할지 고민하여 수정해주세요!

</div>
</div>
</header>
<main>
<div class="main_title"><span class="colorful1">세상의 모든 정보</span>를<br>쉽게 저장하고 관리해 보세요</div>
<button class="link_button"><span class="link_font">랑크 추가하기</span></button>
<div class="main_box">
Copy link
Collaborator

Choose a reason for hiding this comment

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

main 박스 직접 구현하시느라 시간 많이 소요하셨을 것 같네요!
직접 구현하시면서 고민하는 것도 도움이 되셨을 거에요.
요런 부분은 피그마에 있는 이미지 그대로 사용하시면 되니 다음 작업부터는 참고해주세요!
(이미지로 교체 해주시면 될 것 같습니다!)

<div class="serch_bar"><img src="serch_logo.svg"><span class="serch_font">링크를 검색해 보세요</span></div>
<div class="mini_button">
<div>
<button>전체</button>
<button>즐겨찾기</button>
<button>폴더명</button>
</div>
<p class="folder_plus">폴더추가 +</p>
</div>
<ol class="stations">
<li class="station">
<img src="">
<img class="star" src="star.svg">
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를 사용해서 크기나 색상을 변경하기 쉬우니 아이콘이나 로고 같은 부분에서 많이 사용합니다.
색상을 변경할 수 있으니 다크모드를 대응할 때 이미지를 교체하지 않고도 색상만 변경해서 대응할 수 있겠죠? 참고

</li>
<li class="station">
<img class="background_img" src="">
<img class="star" src="star.svg">
</li>
<li class="station">
<img src="">
<img class="star" src="star.svg">
</li>
<li class="station">
<img src="">
<img class="star" src="star.svg">
</li>
<li class="station">
<img src="">
<img class="star" src="star.svg">
</li>
<li class="station">
<img src="">
<img class="star" src="star.svg">
</li>
</ol>
</div>
<div class="contents">
<div class="content1">
<div class="content1_title">
<p class="content_main"><span class="colorful2">원하는 링크를</span><br>저장하세요</p>
<p class="content_sub">나중에 읽고 싶은 글, 다시 보고 싶은 영상,<br>
사고 싶은 옷, 기억하고 싶은 모든 것을<br>
한 공간에 저장하세요.</p>
</div>
<div class="content_box">
<img class="content1_img" src="Card 1.svg">
<img class="content1_img" src="Card.svg">
<img class="content1_img" src="Card-1.svg">
</div>
</div>
<div class="content2">
<div class="content_box">
<img class="content2_img" src="content2.svg">
</div>
<div class="content2_title">
<p class="content_main">링크를 폴더로<br><span class="colorful3">관리</span>하세요</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

p 태그보다는 헤딩 태그 혹은 강조를 나타내는 태그를 사용하면 더 의미가 맞을 것 같습니다~!

<p class="content_sub">나만의 폴더를 무제한으로 만들고<br>다양하게 활용할 수 있습니다.</p>
</div>
</div>
<div class="content3">
<div class="content3_title">
<p class="content_main">저장한 링크를<br><span class="colorful4">공유</span>해보세요.</p>
<p class="content_sub">여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 쉽고 빠르게 링크를<br>
공유해 보세요.
</p>
</div>
<div class="content_box">
<img class="content3_img" src="content3.svg">
</div>
</div>
<div class="content4">
<div class="content_box">
<img class="content4_img" src="content4.svg">
</div>
<div class="content2_title">
<p class="content_main">저장한 링크를<br><span class="colorful4">검색</span>해보세요</p>
<p class="content_sub">중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
</div>
</div>
</div>
</main>
<footer>
<img class="foot" src="Frame 2608782.svg">
</footer>
</body>
</html>
15 changes: 15 additions & 0 deletions 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.
4 changes: 4 additions & 0 deletions serch_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 star.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.
251 changes: 251 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
* {
box-sizing: border-box;
}

.wrap {
display: flex;
padding: 20px 200px;
justify-content: space-between;
gap: 8px;
}

.hi {
Copy link
Collaborator

Choose a reason for hiding this comment

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

hi 보다는 좀 더 의미있는 클래스명이 좋을 것 같습니다~! (e.g. header_wrap)

position: sticky;
top: 0;
overflow: auto;
z-index: 2;
width: 100%;
}

.login_button {
border-radius: 8px;
background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%));
display: flex;
width: 128px;
padding: 16px 20px;
justify-content: center;
align-items: center;
}

.login_font {
color: var(--Grey-Light, #F5F5F5);
font-family: Pretendard;
font-size: 18px;
font-weight: 600;
line-height: normal;
}

.main_title {
text-align: center;
font-family: Pretendard;
font-size: 64px;
font-weight: 700;
line-height: 80px;
margin: 70px 0 40px;
}

.colorful1 {
background: linear-gradient(91deg, #6D6AFE 17.28%, #FF9F9F 74.98%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.link_button {
display: flex;
width: 350px;
padding: 16px 20px;
justify-content: center;
align-items: center;
Copy link
Collaborator

Choose a reason for hiding this comment

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

padding으로 높이를 잡았기 때문에 align_items는 없어도 상관 없을 것 같아요~!

margin: 0 auto;
border-radius: 8px;
background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%));
}

.link_font {
color: var(--Grey-Light, #F5F5F5);
font-family: Pretendard;
font-size: 18px;
font-weight: 600;
}

.main_box {
width: 1118px;
height: 659px;
flex-shrink: 0;
border-radius: 25px;
background: linear-gradient(180deg, rgba(196, 196, 196, 0.00) 67.68%, #F0F6FF 94.76%);
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
margin: 90px auto;
padding: 1px;
}

.serch_bar {
display: flex;
justify-content: flex-start;
width: 1060px;
padding: 15px 16px;
border-radius: 10px;
background: #F5F5F5;
margin: 40px auto;
}

.serch_font {
margin: 0 0 0 10px;
color: #666666;
font-family: Pretendard;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}

.mini_button {
display: flex;
justify-content: space-between;
align-items: center;
}

.folder_plus {
font-family: Abel;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.3px;
}

.stations {
display: grid;
grid-template: 320px 320px / repeat(3, 320px);
gap: 36px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

무조건 축약형을 쓰기 보다는 필요한 값만 사용하는 것이 유지보수에 도움이 된답니다!
gap 속성이 어떤 속성의 축약형인지 알아보시면 좋을 것 같아요!

list-style: none;
}

.station {
box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.16);
border-radius: 15px;
position: relative;
}


.star {
position: absolute;
top:15px;
right:15px;
}

.contents {
width: 100%;
display: flex;
flex-direction: column;
padding: 120px 461px 50px 461px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

padding의 좌우가 같다면 아래와 같이 축약형으로 작성할 수 있습니다!
padding: 120px 461px 50px;

justify-content: center;
align-items: center;
}

.content1 {
display: flex;
gap: 50px;
}

.content2 {
display: flex;
gap: 50px;
}

.content3 {
display: flex;
gap: 50px
}

.content4 {
display: flex;
gap: 50px;
}

.content_box {
width: 550px;
height: 450px;
border-radius: 15px;
background: #F0F6FF;
position: relative;
}

.content1_img {
display: flex;
flex-direction: column;
overflow: hidden;
justify-content: space-between;
box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.16);
}

.colorful2 {
background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.colorful3 {
background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Pretendard;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.3px;
}

.colorful4 {
background: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Pretendard;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.content_main {
font-family: Pretendard;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.3px;
}

.content_sub {
color: #6B6B6B;
font-family: Abel;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}

.content2_img {
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 부분은 굳이 absolute로 이미지의 위치를 잡지 않아도 될 것 같습니다!

position: absolute;
top: 121px;
right: 77px;
bottom: 77px;
left: 77px;
}

.content3_img {
position: absolute;
top: 121px;
right: 77px;
bottom: 77px;
left: 77px;
}

.foot {
width: 100%;
margin-top: 120px;
}
Loading