Conversation
|
커밋 단위를 짧게 해서, 리뷰하기 편하네요. 커밋 메시지도 직관적입니다. |
커밋 단위를 잘게 나누셨군요 ! 👍
또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 |
| { | ||
| "liveServer.settings.port": 5501 | ||
| } |
There was a problem hiding this comment.
.gitignore를 작성해보시는게 어떨까요?
macos의 압축 과정에서 흔히 .DS_Store 파일이 들어가는 경우가 있습니다.
해당 파일은 프로젝트와 무관하므로 .gitignore에 다음과 같이 작성하시면 git의 추적을 무시할 수 있습니다.
.DS_Store
| @@ -0,0 +1,96 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
There was a problem hiding this comment.
lang="ko" 속성을 사용해보는건 어떨까요?
| <html> | |
| <html lang="ko"> |
lang 속성은 Search bot이 탐색할 때 해당 문서가 어떠한 언어로 작성되어있는지 파악할 때 사용될 수 있습니다.
따라서 적절한 lang을 설정하시는걸 권장드립니다. 😊
lang의 기본 값은 '알 수 없음'입니다. 따라서 적절한 값의 lang 속성을 꼭 꼭 ! 설정해주시는걸 권장합니다 !
lang에 대해서 자세히 보기
SEO 마케팅 관련 기사
tl;dr
lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.
- 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
- 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
- lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.
<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기
| <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> |
There was a problem hiding this comment.
프리티어를 사용해보시는거 어떨까요 ?
| <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
| <img src="images/Img_home_01.png" alt="판다마켓 메인1"> | ||
| <div class="content-box"> | ||
| <h2 class="content-name">Hot item</h2> | ||
| <h1>인기 상품을<br/>확인해 보세요</h1> |
| <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> |
There was a problem hiding this comment.
section을 사용해보는게 어떨까요?
| <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> 시리즈로 작성해보세요 😊
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "pretendard", sans-serif; | ||
| } |
There was a problem hiding this comment.
해당 코드들은 global.css를 만드신 후 옮기셔도 될 것 같습니다 😊
| a { | ||
| text-decoration: none; | ||
| } |
There was a problem hiding this comment.
해당 코드는 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;
}| } | ||
|
|
||
| .btn { | ||
| background-color: #3692ff; |
There was a problem hiding this comment.
컬러 팔레트를 사용해보시는건 어떨까요?
컬러는 따로 선언해두시고 재사용 해보시는건 어떨까요?
컬러 팔레트는 color.css 혹은 global.css에서 정의하는게 일반적입니다 !
컬러 팔레트는 다음과 같이 정의할 수 있습니다:
* {
--primary: #6D6AFE;
--red: #FF5B56;
--black: #111322;
--white: #FFFFFF;
--gray-100: #3E3E43;
--gray-200: #9FA6B2;
--gray-300: #CCD5E3;
--gray-400: #E7EFFB;
--gray-500: #F0F6FF;
}
|
굳굳 ! 좋습니다. 예원님. |
요구사항
기본
심화
멘토에게