Basic 류정훈 sprint3 #81
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
커밋 타입도 한 번 고려해보세요 !tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. |
메인 페이지에서 그림의 크기를 어떻게 바꿔야 할지 모르겠어서 좌우 너비는 양끝에 닿게 한채로 상하 너비만 한도를 주었는데 이렇게 하면 되는것이 맞는지 아니면 그냥 페이지의 크기 자체를 바꾸었어야 했을지 잘 모르겠네요..엇.. 혹시 질문에 대해 잘 이해가 안되는데 혹시 DM이나 줌으로 대화가 가능할까요? 😢😢 |
피그마 디자인에 맞게 설계한것 같은데 줄바꿈이 어색한 부분이 있는데 뭐가 문제였을까요이것도 PR에 기재해주신 사항과 카카오톡 이미지로 첨부주신 배포된 사이트를 기준으로 봤을 때 어떤게 어색하다는지 잘 이해가 되지 않습니다 ! 😢😢 |
| <meta property="og:type" content="website"> | ||
| <meta property="og:title" content="판다마켓"> | ||
| <meta property="og:description" content="일상의 모든 물건을 거래해보세요."> | ||
| <meta property="og:image" content="https://sprint-mission.netlify.app/img/Img_home_top.png"> | ||
| <meta property="og:url" content="https://sprint-mission.netlify.app/"> |
There was a problem hiding this comment.
훌륭합니다 ~! 메타 태그를 적절히 설정하셨네요 👍👍
| header{ | ||
| margin-top: 24px; | ||
| } |
There was a problem hiding this comment.
(제안) 만약 스타일 선택자 목적이라면 태그보다는 class를 선택자로 사용하는게 어떨까요?
클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !
좀 더 자세히 🤔
유지보수가 어려워질 수 있어요.
특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.
태그 의미를 명확히 부여하기 어려워요.
스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.
만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?
<p class="error-message">오류가 발생했습니다.</p>물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.
예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:
p {
margin: 0;
}그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:
.paragraph {
font-size: 16px;
color: #333;
}
.highlight {
background-color: yellow;
}해당 피드백은 이 전에도 드렸었으나 혹시 몰라 첨부드립니다.
하나의 DOM에서 여러 header가 존재할 수 있으므로 제안드려 봅니다 ~! 😉
| main{ | ||
| width: 100%; | ||
| margin :32px auto; | ||
| padding-left: 16px; | ||
| padding-right: 16px; | ||
| max-width: 432px; | ||
| } |
There was a problem hiding this comment.
혹시 아직 프리티어가 적용되지 않으셨을까요?
| main{ | |
| width: 100%; | |
| margin :32px auto; | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| max-width: 432px; | |
| } | |
| main{ | |
| width: 100%; | |
| margin: 32px auto; | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| max-width: 432px; | |
| } |
사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.
보편적으로 많이 사용되는 툴은 prettier입니다 !
Prettier: https://prettier.io/
prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗
macos 경우
option+shift+f
windows의 경우alt+shift+f
만약 프리티어 적용이 어려우시면 DM주세요 ~! 😉
There was a problem hiding this comment.
다운로드는 받았는데 실행을 따로 해야하나보네요..
| #tbt1{ | ||
| margin:0; | ||
| width: 100%; | ||
| font-size: 32px; | ||
| } | ||
| #itembtn{ | ||
| width: 240px; | ||
| height: 48px; | ||
| font-size: 18px; | ||
| line-height: 17px; | ||
| } |
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는 특정 요소에만 적용되므로 유연성이 떨어지고, 재사용을 하지 못합니다.
위 코멘트의 경우에도 이 전에 같은 피드백을 드린 적 있으나 혹시 몰라 첨부드립니다 !
이 후 만약 같은 패턴이 보여질 경우 정훈님께서 현재 정황을 판단하기로 아이디와 태그에 직접 스타일링 하는 것이 더 낫다고 판단하셨다고 생각하고 같은 피드백은 삼가도록 하겠습니다 🫡🫡
| gap:12px; | ||
| } | ||
| /*태블릿*/ | ||
| @media(min-width : 768px) and (max-width : 1199px){ |
There was a problem hiding this comment.
굿굿 ~ 태블릿, PC 별로 미디어 쿼리를 잘 적용하셨네요 👍👍
| #bn{ | ||
| order:3; | ||
| } |
There was a problem hiding this comment.
bn은 어떤걸 의미할까요?
줄임말 보다는 의도를 명확히 전달해보는건 어떨까요?
물론 btn, pw 등 편의를 위해서 사용되기도 하나, 명확한 클래스 이름을 사용하시는게 더욱 의도된 바를 전달하기 쉽습니다.
이는 "닌자 코드"에 해당하는 문법입니다:
약어 사용하기
팀에 한 글자 짜리 변수나 모호한 변수명을 사용하지 못하게 하는 제약이 있다면 약어를 쓰는 기지를 발휘하세요. 변수명은 짧을수록 좋으니까요.
예시:
list → lst.
userAgent → ua.
browser → brsr.
등등…
모든 걸 줄여서 당신의 코드를 읽을 가치가 있는 직감이 뛰어난 개발자만 유지보수를 담당 할 수 있게 해 놓읍시다.
위 문서는 "이렇게 해라 !"가 아니라, "이를 지양하자 !"라는 것으로 작성된 문서 내용입니다. 😊
물론 oAuth(Open Authorization), sms(Short Message Service) 와 같이 내용이 길어서 통상적으로 줄임말을 사용하는 경우도 있기는 하기에 무조건 풀 텍스트를 사용하자 라는 차원은 아님을 전달드립니다. 😊
There was a problem hiding this comment.
회사 연혁같은걸 영어로 뭐라 부르는지 몰라서 검색한 후 앞글자만 따서 명명한것으로 기억하고 있습니다.
|
수고하셨습니다 정훈님 ~! 자바스크립트에서는 어떤 모습을 보여주실지 기대가 됩니다 ! 코멘트에 대해 궁금한 점이 있으시다면 편하게 DM주세요 ~! 😉 |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게