[임용균] Sprint3 #46
Merged
[임용균] Sprint3 #46
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
|
스프리트 미션 하시느라 수고 많으셨어요. |
kiJu2
reviewed
Jan 18, 2025
Comment on lines
+48
to
+55
| <div class="feature"> | ||
| <img src="images/home/feature2-image.png"/> | ||
| <div class="feature-content"> | ||
| <h2>Search</h2> | ||
| <h1>구매를 원하는 <span class="break-on-desktop"><br /></span>상품을 검색하세요</h1> | ||
| <p class="feature-description"> | ||
| 구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요 | ||
| </p> |
Collaborator
There was a problem hiding this comment.
<h1> 태그는 문서에 하나만 넣는게 어떨까요?
Suggested change
| <div class="feature"> | |
| <img src="images/home/feature2-image.png"/> | |
| <div class="feature-content"> | |
| <h2>Search</h2> | |
| <h1>구매를 원하는 <span class="break-on-desktop"><br /></span>상품을 검색하세요</h1> | |
| <p class="feature-description"> | |
| 구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요 | |
| </p> | |
| <div class="feature"> | |
| <img src="images/home/feature2-image.png"/> | |
| <div class="feature-content"> | |
| <h2>Search</h2> | |
| <h3>구매를 원하는 <span class="break-on-desktop"><br /></span>상품을 검색하세요</h3> | |
| <p class="feature-description"> | |
| 구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요 | |
| </p> |
이하 MDN 발췌
페이지 당 하나의 <h1>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <h1>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <h1>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 SEO에도 더 적합합니다.
Comment on lines
+84
to
+97
| <div id="socialMedia"> | ||
| <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="images/social/facebook-logo.svg" width="20" /> | ||
| </a> | ||
| <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="images/social/twitter-logo.svg" width="20" /> | ||
| </a> | ||
| <a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="images/social/youtube-logo.svg" width="20" /> | ||
| </a> | ||
| <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"> | ||
| <img src="images/social/instagram-logo.svg" width="20" /> | ||
| </a> | ||
| </div> |
Collaborator
There was a problem hiding this comment.
(제안/선택)요소들이 순서 없는 목록을 의미한다면 <ul>과 <li>로도 나타낼 수 있습니다 !
<ul class="footer-social">
<li>
<a target="_blank" href="https://www.facebook.com/">
<img src="images/ic_facebook.svg" alt="페이스북" />
</a>
</li>
<li>
<a target="_blank" href="https://www.twitter.com/">
<img src="images/ic_twitter.svg" alt="트위터" />
</a>
</li>
<li>
<a target="_blank" href="https://www.youtube.com/">
<img src="images/ic_youtube.svg" alt="유튜브" />
</a>
</li>
<li>
<a target="_blank" href="https://www.instagram.com/">
<img src="images/ic_instagram.svg" alt="인스타그램" />
</a>
<li>
</ul>MDN: HTML
<ul>요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
li 태그의 기본 스타일을 제거하고 싶다면 다음과 같이 작성할 수 있습니다 ! { list-style: none; }
| <img src="images/logo/logo.svg" /> | ||
| </a> | ||
|
|
||
| <form method="post"> |
Comment on lines
+23
to
+24
| <label for="email">이메일</label> | ||
| <input id="email" name="email" type="email" placeholder="이메일을 입력해 주세요" /> |
Collaborator
There was a problem hiding this comment.
input과 label이 적절하게 연결되었습니다 👍
kiJu2
approved these changes
Jan 18, 2025
Comment on lines
+23
to
+24
| <label for="email">이메일</label> | ||
| <input id="email" name="email" type="email" placeholder="이메일을 입력해 주세요" /> |
Collaborator
There was a problem hiding this comment.
프로퍼티들도 적절하군요 !
고려해볼 수 있을만한 것은 name과 required도 고려해볼 수 있겠네요 ㅎㅎ
name:name은<form>을 사용해서 추 후submit을 사용하여 접근할 때 사용될 수 있습니다.required:required는<form>내부에서 서식을 작성하지 않았을 때 브라우저에서 유저에게 피드백을 줄 수 있습니다.
Collaborator
There was a problem hiding this comment.
또한 <input>에 대한 속성과 관련하여
<input>에는 용이한 속성들이 상당히 많습니다 !
- 숫자의 범위를 지정하는
max,min - 글자 수를 제한하는
maxLenght,minLenght - 그 외 의외의
type들date,email,file,image...
제공되는 유용한 속성들을 모르고 개발하게 되면 자바스크립트로 만들게 되는 경우도 있어요.
예를 들어서 max라는 속성을 모르면 input 값이 입력되었을 때 값에 대한 유효성 검사를 하고 input에 값을 넣어주는 번거로운 일도 할 수도 있어요.
(제가 처음 개발할 때 그랬습니다... 🥲)
특히 리액트로 넘어가게되면 javascript가 html 접근하는 허들이 낮아지면서 위와 같은 사례가 종종 보여요.
그래서 **특히 input과 관련하여서는 꼭 한번 즈음 mdn 공식 문서를 처음부터 끝까지 러프하게라도 읽어보시는걸 추천드려요.
Comment on lines
2
to
15
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>판다마켓 - 회원가입</title> | ||
| <link rel="icon" href="images/logo/favicon.ico" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" | ||
| /> | ||
| <link rel="stylesheet" href="styles/global.css" /> | ||
| <link rel="stylesheet" href="styles/sign.css" /> | ||
| </head> | ||
| <body> |
Collaborator
There was a problem hiding this comment.
프리티어를 사용해보시는거 어떨까요 ?
Suggested change
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>판다마켓 - 회원가입</title> | |
| <link rel="icon" href="images/logo/favicon.ico" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" | |
| /> | |
| <link rel="stylesheet" href="styles/global.css" /> | |
| <link rel="stylesheet" href="styles/sign.css" /> | |
| </head> | |
| <body> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>판다마켓 - 회원가입</title> | |
| <link rel="icon" href="images/logo/favicon.ico" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" | |
| /> | |
| <link rel="stylesheet" href="styles/global.css" /> | |
| <link rel="stylesheet" href="styles/sign.css" /> | |
| </head> | |
| <body> |
사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.
보편적으로 많이 사용되는 툴은 prettier입니다 !
Prettier: https://prettier.io/
prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗
macos 경우
option+shift+f
windows의 경우alt+shift+f
Comment on lines
+48
to
+62
| #copyright { | ||
| order: 3; | ||
| flex-basis: 100%; | ||
| color: #9ca3af; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #footerMenu, #socialMedia { | ||
| display: flex; | ||
| gap: 30px; | ||
| } | ||
|
|
||
| #socialMedia { | ||
| gap: 12px; | ||
| } |
Collaborator
There was a problem hiding this comment.
(제안) 단순히 스타일을 위한 선택자라면 id보다는 class를 추천드립니다 ! 📌
클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !
그래서 왜 ? 🤔
id는 고유해요.
- HTML 문서에서 동일한 id를 가진 요소는 존재할 수 없습니다. 따라서 같은 스타일을 여러 요소에 적용하려면 class를 사용하는 것이 더 적합합니다.
class는 여러 요소에 재사용 가능하기 때문에 반복적인 스타일에 적합합니다.
id의 CSS 우선순위가 높습니다.
id선택자의 우선순위는class보다 높아요.
이는 CSS를 유지보수하거나 재정의할 때 예기치 않은 문제를 일으킬 수 있어요.id: 우선순위 100class: 우선순위 10
- 필요 이상으로 높은 우선순위를 가진
id를 사용하면, 나중에 스타일을 덮어쓰기가 어려워질 수 있지요.
재사용성 및 유지보수성
class는 재사용 가능하므로 동일한 스타일을 여러 요소에 쉽게 적용할 수 있습니다.id는 특정 요소에만 적용되므로 유연성이 떨어지고, 재사용을 하지 못합니다.
Comment on lines
+79
to
+86
| button { | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
| font: inherit; | ||
| color: inherit; | ||
| appearance: none; | ||
| } |
Collaborator
There was a problem hiding this comment.
혹시 스타일을 reset 시키기 위한 용도일까요?
그렇다면 reset.css를 적용해볼 수 있습니다:
(제안/선택) 기본 스타일을 초기화하고 싶다면 reset.css도 좋은 방법이 될 수 있어요 ! 😊
브라우저마다 기본 스타일이 미묘하게 다른거 알고 계셨나요?
https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do
이처럼 브라우저마다 스타일이 다른 경우 일관된 스타일을 제공할 수 있도록 reset.css를 작성하기도 한답니다 !
그대로 사용하셔도 좋고, 참고해도 좋은 Eric meyer의 reset.css는 다음과 같습니다:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Collaborator
|
수고하셨습니다 용균님 ! |
ozen0718
force-pushed
the
Basic-임용균-sprint3
branch
from
dcf80db to
da928f9
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
-PC: 1200px 이상
-Tablet: 768px 이상 ~ 1199px 이하
-Mobile: 375px 이상 ~ 767px 이하
-375px 미만 사이즈의 디자인은 고려하지 않습니다.
랜딩 페이지
로그인, 회원가입 페이지 공통
심화
주요 변경사항
스크린샷
멘토에게