Conversation
|
수고 하셨습니다 송아님 ! 위클리 미션 하시느라 수고 많으셨습니다 ! |
commit message가 중구난방일 때commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
그럼 커밋을 언제 해야 할까요?저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:
관련하여 읽으시면 좋은 아티클을 추천드릴게요:tl;dr관련 변경 사항 커밋 자주 커밋 미완성 작업을 커밋하지 마십시오 커밋하기 전에 코드를 테스트하세요 또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 |
| @@ -0,0 +1,94 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
lang="ko" 속성을 사용해보는건 어떨까요?
| <html lang="en"> | |
| <html lang="ko"> |
lang 속성은 Search bot이 탐색할 때 해당 문서가 어떠한 언어로 작성되어있는지 파악할 때 사용될 수 있습니다.
따라서 적절한 lang을 설정하시는걸 권장드립니다. 😊
lang의 기본 값은 '알 수 없음'입니다. 따라서 적절한 값의 lang 속성을 꼭 꼭 ! 설정해주시는걸 권장합니다 !
lang에 대해서 자세히 보기
SEO 마케팅 관련 기사
tl;dr
lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.
- 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
- 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
- lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.
<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기
| #footer .foot-menu a { | ||
| color: var(--gray200); | ||
| } | ||
| #footer .foot-menu a:hover { |
| background: var(--gray900); | ||
| } | ||
| #footer .container { | ||
| display: grid; |
There was a problem hiding this comment.
그리드 처음 사용하시면 어려우셨을텐데, 잘 적용하셨네요 =) 👍
| </div> | ||
| <div class="text-box"> | ||
| <p class="blue-text">Search</p> | ||
| <h2>구매를 원하는 <br class="tbtb">상품을 검색하세요</h2> |
There was a problem hiding this comment.
tbtb가 어떤 의미일까요?
클래스명이나 변수명, 그리고 아이디 등 통상적으로 사용하는 용어로 짓는게 좋습니다 !
| <header id="header"> | ||
| <div class="container"> | ||
| <nav id="nav"> | ||
| <a href="/" id="logo"><img src="/images/logo_icon.png" alt="판다마켓 로고"><img src="/images/logo_text.png" alt="판다마켓 로고"></a> |
| line-height: 1.2; | ||
| } | ||
|
|
||
| :root { |
| 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; | ||
| } | ||
| html { | ||
| scroll-behavior: smooth; | ||
| } | ||
| body { | ||
| font-size: 16px; | ||
| line-height: 1; | ||
| box-sizing: border-box; | ||
| font-family: 'Pretendard'; | ||
| } | ||
| 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; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| color: #333; | ||
| display: inline-block; | ||
| } | ||
| p { | ||
| line-height: 1.2; | ||
| } |
There was a problem hiding this comment.
reset.css를 적용하셨군요 ! 훌륭합니다.
reset.css는 모든 환경에서 일관된 스타일을 출력하기 위하여 개발자가 커스텀하게 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;
}그리고 global과 관련된 css는 global.css로 옮기셔도 될 것 같아요.
지금 제가 포커스한 것 외에는 모두 global.css에 옮기시는게 적합해보입니다 !
reset.css의 "목표는 모든 브라우저 환경에서 일관적인 스타일을 보여주는 것" 이니까요 😊
요구사항
메인 화면 index.html에서 시맨틱태그가 적절히 활용되었는지 확인바랍니다.
기본
심화
주요 변경사항
스크린샷
멘토에게