[김현진] Sprint22 스프린트 미션 1, 2 #21
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
|
Collaborator
There was a problem hiding this comment. png 이미지의 경우에는 고해상도 모니터를 고려해서 저장할 때 크기를 보통 2~3배 정도 키워서 저장합니다. 따라서, 경우에 따라 svg 이미지로 저장하는 게 용량이 더 작을 때가 있어요. svg 포맷은 이미지가 절대 깨지지 않고, 선명하죠. 지금처럼 간단한 그림 이미지나 아이콘같은 경우에는 svg가 더 효율적일 때가 많습니다. 이미지가 흐릿하게 보이는 경우, 웹 서비스의 전문성과 신뢰도에 영향을 끼칠 수 있어서 중요해요. 각 이미지를 다운 받아보시고, 용량 크기를 비교해보세요. 그리고 복잡한 이미지의 경우에는 png를 사용해야 할 때도 있을텐데, 이럴 땐 어떻게 해결하는지도 찾아보시면 좋을 것 같습니다. 🤓 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
|
Collaborator
There was a problem hiding this comment. 이렇게 작은 크기의 아이콘 이미지는 png로 사용할 경우 고해상도 모니터에서는 다소 흐릿하게 보일 수 있어요. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>판다마켓</title> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" href="./style.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <nav class="container"> | ||
| <div class="logo-box"> | ||
| <a href="/"> | ||
| <img src="./images/logo/panda_logo.png" alt="판다마켓 로고"> | ||
| </a> | ||
| <a href="./primary/login.html" class="btn btn-login">로그인</a> | ||
| </div> | ||
| </div> | ||
|
Comment on lines
+11
to
+18
Collaborator
There was a problem hiding this comment. 여는 태그와 닫는 태그가 다릅니다. 🧐 |
||
| </header> | ||
| <main> | ||
| <section class="landing section01"> | ||
| <div class="overlap-box"> | ||
| <img src="./images/bg/desktop_01.png" alt="랜딩페이지 첫 화면 배경이미지"> | ||
|
Collaborator
There was a problem hiding this comment. 대체 텍스트를 잘 채워주셨어요. 다만, 일반적인 스크린 리더는 alt 속성의 텍스트 + 이미지로 읽어요. 따라서 대체 텍스트는 "~이미지", "~사진"이라는 단어는 빼고 핵심 내용만 채워주셔도 됩니다. 아래 링크에서 The alt attribute should typically: 부분을 참고하시면 좋아요. |
||
| <div class="over-txt"> | ||
| <p>일상의 모든 물건을<br>거래해 보세요</p> | ||
| </div> | ||
| <div class="over-btn"> | ||
| <a href="./sub/items.html" class="btn btn-more">구경하러 가기</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="landing section02"> | ||
| <div class="wrap"> | ||
| <img src="./images/bg/img_home_01.png" alt="Hot item 인기상품을 확인해 보세요."> | ||
| <div class="landing-text-right"> | ||
| <p>Hot item</p> | ||
| <p>인기 상품을<br>확인해 보세요</p> | ||
| <span>가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</span> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="landing section03"> | ||
| <div class="wrap"> | ||
| <div class="landing-text-left"> | ||
| <p>Search</p> | ||
| <p>구매를 원하는<br>상품을 검색하세요</p> | ||
| <span>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</span> | ||
| </div> | ||
| <img src="./images/bg/img_home_02.png" alt="Search 구매를 원하는 상품을 검색하세요."> | ||
| </div> | ||
| </section> | ||
| <section class="landing section04"> | ||
| <div class="wrap"> | ||
| <img src="./images/bg/img_home_03.png" alt="Register 판매를 원하는 상품을 등록하세요."> | ||
| <div class="landing-text-right"> | ||
| <p>Register</p> | ||
| <p>판매를 원하는<br>상품을 등록하세요</p> | ||
| <span>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</span> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="landing section05"> | ||
| <div> | ||
| <img src="./images/bg/desktop_05.png" alt="믿을 수 있는 판다마켓 중고 거래."> | ||
| </div> | ||
| </section> | ||
| <main> | ||
|
|
||
|
|
||
| <footer> | ||
| <div class="footer-content wrap"> | ||
| <div> | ||
| <span>©codeit - 2024</span> | ||
| </div> | ||
| <div class="info"> | ||
| <a href="./primary/privacy.html">Privacy Policy</a> | ||
| <a href="./primary/faq.html">FAQ</a> | ||
| </div> | ||
| <div class="icons"> | ||
| <a href="https://www.facebook.com" target="_blank"> | ||
| <img src="./images/icon/ic_facebook.png" alt="페이스북 바로가기"> | ||
| </a> | ||
| <a href="https://x.com" target="_blank"> | ||
| <img src="./images/icon/ic_twitter.png" alt="트위터 바로가기"> | ||
| </a> | ||
| <a href="https://www.youtube.com/" target="_blank"> | ||
| <img src="./images/icon/ic_youtube.png" alt="유튜브 바로가기"> | ||
| </a> | ||
| <a href="https://www.instagram.com" target="_blank"> | ||
| <img src="./images/icon/ic_instagram.png" alt="인스타그램 바로가기"> | ||
| </a> | ||
| </div> | ||
|
Comment on lines
+78
to
+91
Collaborator
There was a problem hiding this comment. 좀 더 의미있는 태그인 |
||
|
|
||
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>판다마켓-FAQ</title> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" href="./style.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <section class="landing section01"> | ||
| FAQ | ||
| </section> | ||
|
|
||
| </body> | ||
| </html> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>판다마켓-로그인</title> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" href="../style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="login-container"> | ||
|
Collaborator
There was a problem hiding this comment. 해당 박스는 가로 뿐만 아니라 세로도 가운데 정렬이 되어야해요. |
||
| <div class="login-box"> | ||
| <!-- 로고 --> | ||
| <div class="login-logo"> | ||
| <a href="../index.html"> | ||
| <img src="../images/logo/panda_logo.png" alt="판다마켓 로고"> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- 인풋 영역 --> | ||
| <div class="login-input"> | ||
| <label for="email">이메일</label> | ||
| <input type="text" name="email" id="email" placeholder="이메일을 입력해주세요"> | ||
| <div> | ||
| <label for="password">비밀번호</label> | ||
| <input type="password" name="password" id="password" placeholder="비밀번호를 입력해주세요"> | ||
| <img src="../images/icon/btn_visibility_off.png" alt="비밀번호 가리기" class="toggle-icon"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- 로그인 버튼 --> | ||
| <div class="login-button"> | ||
| <a href="#" class="btn btn-big-login">로그인</a> | ||
| </div> | ||
|
Comment on lines
+19
to
+33
Collaborator
There was a problem hiding this comment. 각 입력 필드와 버튼을 그룹화 할 수 있는 |
||
|
|
||
| <!-- 간편 로그인 --> | ||
| <div class="easy-login"> | ||
| <span>간편 로그인하기</span> | ||
| <div> | ||
| <a href="https://www.google.com/" class="easy-icon"> | ||
| <img src="../images/icon/ic_google.png" alt="구글 간편로그인"> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/" class="easy-icon"> | ||
| <img src="../images/icon/ic_kakao.png" alt="카카오 간편로그인"> | ||
| </a> | ||
|
Comment on lines
+39
to
+44
Collaborator
There was a problem hiding this comment. 
우리가 reset.css와 같이 미리 스타일 속성들을 초기화하는 이유가 여기에 있어요. 브라우저만의 기본 스타일(사용자 에이전트 스타일시트)에 대해서 학습해 보시면 좋을 것 같아요. 🧐 |
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- 회원가입 링크 --> | ||
| <div class="sign-link"> | ||
| <p>판다마켓이 처음이신가요? | ||
| <a href="../primary/signup.html">회원가입</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>판다마켓-프라이버시</title> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" href="./style.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <section class="landing section01"> | ||
| 프라이버시 | ||
| </section> | ||
|
|
||
| </body> | ||
| </html> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>판다마켓-회원가입</title> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" href="../style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="login-container mt-1"> | ||
| <div class="login-box"> | ||
| <!-- 로고 --> | ||
| <div class="login-logo"> | ||
| <a href="../index.html"> | ||
| <img src="../images/logo/panda_logo.png" alt="판다마켓 로고"> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- 인풋 영역 --> | ||
| <div class="login-input"> | ||
| <div> | ||
| <label for="email">이메일</label> | ||
| <input type="text" name="email" id="email" placeholder="이메일을 입력해주세요"> | ||
| </div> | ||
| <div> | ||
| <label for="name">닉네임</label> | ||
| <input type="text" name="name" id="name" placeholder="닉네임을 입력해주세요"> | ||
| </div> | ||
| <div> | ||
| <label for="password">비밀번호</label> | ||
| <input type="password" name="password" id="password" placeholder="비밀번호를 입력해주세요"> | ||
| <img src="../images/icon/btn_visibility_off.png" alt="비밀번호 가리기" class="toggle-icon"> | ||
| </div> | ||
| <div> | ||
| <label for="check-password">비밀번호 확인</label> | ||
| <input type="password" name="check-password" id="check-password" placeholder="비밀번호를 다시 한 번 입력해주세요"> | ||
| <img src="../images/icon/btn_visibility_on.png" alt="비밀번호 오픈" class="toggle-icon"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- 로그인 버튼 --> | ||
| <div class="login-button"> | ||
| <a href="#" class="btn btn-big-login">회원가입</a> | ||
| </div> | ||
|
|
||
| <!-- 간편 로그인 --> | ||
| <div class="easy-login"> | ||
| <span>간편 로그인하기</span> | ||
| <div> | ||
| <a href="https://www.google.com/" class="easy-icon"> | ||
| <img src="../images/icon/ic_google.png" alt="구글 간편로그인"> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/" class="easy-icon"> | ||
| <img src="../images/icon/ic_kakao.png" alt="카카오 간편로그인"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- 회원가입 링크 --> | ||
| <div class="sign-link"> | ||
| <p>이미 회원이신가요? | ||
| <a href="../primary/login.html">로그인</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
텍스트, 배경과 함께 이미지를 통으로 사용하셨군요. 이렇게 통째로 이미지를 사용하는 경우에는 어떤 장단점이 있을까요? 현진님이 생각하시는 장점과 단점을 정리해서 다음 미션 때 학습 포인트에 내용을 채워주시면 좋을 것 같아요. 🤓