[최예원] Sprint1 #22
There are no files selected for viewing
This file contains 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,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5501 | ||
| } | ||
|
There was a problem hiding this comment.
|
Binary file not shown.
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.
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 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> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
There was a problem hiding this comment.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <html> | |
| <html lang="ko"> |
lang 속성은 Search bot이 탐색할 때 해당 문서가 어떠한 언어로 작성되어있는지 파악할 때 사용될 수 있습니다.
따라서 적절한 lang을 설정하시는걸 권장드립니다. 😊
lang의 기본 값은 '알 수 없음'입니다. 따라서 적절한 값의 lang 속성을 꼭 꼭 ! 설정해주시는걸 권장합니다 !
lang에 대해서 자세히 보기
SEO 마케팅 관련 기사
tl;dr
lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.
- 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
- 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
- lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.
<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기
Comment on lines
+2
to
+7
There was a problem hiding this comment.
프리티어를 사용해보시는거 어떨까요 ?
Suggested change
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>판다마켓</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://kit.fontawesome.com/2ea727bd4f.js" crossorigin="2ea727bd4f"></script> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>판다마켓</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://kit.fontawesome.com/2ea727bd4f.js" crossorigin="2ea727bd4f"></script> |
사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.
보편적으로 많이 사용되는 툴은 prettier입니다 !
Prettier: https://prettier.io/
prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗
macos 경우
option+shift+f
windows의 경우alt+shift+f
Comment on lines
+40
to
+60
There was a problem hiding this comment.
section을 사용해보는게 어떨까요?
Suggested change
| <div id="right" class="content"> | |
| <div class="content-box"> | |
| <h2 class="content-name">Search</h2> | |
| <h1>구매를 원하는<br/>상품을 검색하세요</h1> | |
| <p class="content-description"> | |
| 구매하고 싶은 물품은 검색해서<br/>쉽게 찾아보세요 | |
| </p> | |
| </div> | |
| <img src="images/Img_home_02.png" alt="판다마켓 메인2"> | |
| </div> | |
| <div class="content"> | |
| <img src="images/Img_home_03.png" alt="판다마켓 메인3"> | |
| <div class="content-box"> | |
| <h2 class="content-name">Register</h2> | |
| <h1>판매를 원하는<br/>상품을 등록하세요</h1> | |
| <p class="content-description"> | |
| 어떤 물건이든 판매하고 싶은 상품을<br/>쉽게 등록하세요 | |
| </p> | |
| </div> | |
| </div> | |
| <section id="right" class="content"> | |
| <div class="content-box"> | |
| <h2 class="content-name">Search</h2> | |
| <h1>구매를 원하는<br/>상품을 검색하세요</h1> | |
| <p class="content-description"> | |
| 구매하고 싶은 물품은 검색해서<br/>쉽게 찾아보세요 | |
| </p> | |
| </div> | |
| <img src="images/Img_home_02.png" alt="판다마켓 메인2"> | |
| </section> | |
| <section class="content"> | |
| <img src="images/Img_home_03.png" alt="판다마켓 메인3"> | |
| <div class="content-box"> | |
| <h2 class="content-name">Register</h2> | |
| <h1>판매를 원하는<br/>상품을 등록하세요</h1> | |
| <p class="content-description"> | |
| 어떤 물건이든 판매하고 싶은 상품을<br/>쉽게 등록하세요 | |
| </p> | |
| </div> | |
| </section> |
다음은 MDN의 <section>에 대한 설명 중 첫 문장입니다.
The
<section>HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
<section>HTML 요소는 문서의 일반적인 독립형 섹션을 나타내며 이를 나타내는 더 구체적인 의미 요소가 없습니다. 섹션에는 거의 예외를 제외하고 항상 제목이 있어야 합니다.
<section /> 태그 내에 제목에 해당하는 부분이 있다면 <h> 시리즈로 작성해보세요 😊
This file contains 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,164 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "pretendard", sans-serif; | ||
| } | ||
|
Comment on lines
+1
to
+9
There was a problem hiding this comment. 해당 코드들은
|
||
|
|
||
| header { | ||
| height: 70px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 0 200px; | ||
| background-color: #ffffff; | ||
| } | ||
|
|
||
| header .logo { | ||
| width: 153px; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| } | ||
|
Comment on lines
+24
to
+26
There was a problem hiding this comment. 해당 코드는
|
||
|
|
||
| .btn { | ||
| background-color: #3692ff; | ||
|
There was a problem hiding this comment. 컬러 팔레트를 사용해보시는건 어떨까요?컬러는 따로 선언해두시고 재사용 해보시는건 어떨까요? * {
--primary: #6D6AFE;
--red: #FF5B56;
--black: #111322;
--white: #FFFFFF;
--gray-100: #3E3E43;
--gray-200: #9FA6B2;
--gray-300: #CCD5E3;
--gray-400: #E7EFFB;
--gray-500: #F0F6FF;
} |
||
| color: #ffffff; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| border-radius: 8px; | ||
| padding: 12px 20px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .banner { | ||
| background-color: #cfe5ff; | ||
| display: flex; | ||
| align-items: center; | ||
| height: 540px; | ||
| } | ||
|
|
||
| #top { | ||
| background-image: url(images/Img_home_top.png); | ||
| background-size: cover; | ||
| background-position: center; | ||
| display: flex; | ||
| align-items: center; | ||
| background-repeat: no-repeat; | ||
| background-position: 80% bottom; | ||
| background-size: 55%; | ||
| } | ||
|
|
||
| .banner-box { | ||
| width: 1200px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 56px; | ||
| color: #374151; | ||
| } | ||
|
|
||
| .banner-box .btn { | ||
| background-color: #3692ff; | ||
| color: #ffffff; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 20px; | ||
| font-weight: 700; | ||
| border-radius: 999px; | ||
| padding: 16px 124px; | ||
| margin-top: 34px; | ||
| } | ||
|
|
||
| .container { | ||
| width: 1200px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .content { | ||
| padding: 138px 0; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .content img { | ||
| width: 588px; | ||
| margin-right: 64px; | ||
| } | ||
|
|
||
| .content h2 { | ||
| color: #3692ff; | ||
| font-size: 18px; | ||
| line-height: 25.2px; | ||
| font-weight: 700; | ||
| margin-bottom: 12px; | ||
| } | ||
|
|
||
| .content-description { | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| margin-top: 24px; | ||
| color: #374151; | ||
| } | ||
|
|
||
| #right { | ||
| text-align: right; | ||
| } | ||
|
|
||
| #right img { | ||
| margin-left: 64px; | ||
| } | ||
|
|
||
| #right .content-box { | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| #bottom { | ||
| background-image: url(images/Img_home_bottom.png); | ||
| background-size: cover; | ||
| background-position: center; | ||
| display: flex; | ||
| align-items: center; | ||
| background-repeat: no-repeat; | ||
| background-position: 80% bottom; | ||
| background-size: 55%; | ||
| } | ||
|
|
||
| footer { | ||
| background-color: #111827; | ||
| color: #9ca3af; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 32px 200px 108px 200px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .footer-menu { | ||
| display: flex; | ||
| gap: 30px; | ||
| } | ||
|
|
||
| .footer-menu a { | ||
| color: #E5E7EB; | ||
| } | ||
|
|
||
| .sns { | ||
| display: flex; | ||
| gap: 12px; | ||
| } | ||
|
|
||
| .sns img { | ||
| width: 20px; | ||
| } | ||
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.
혹시 해당
setting은 의도된 것일까요? 👀