[임지혜] sprint1 #87
[임지혜] sprint1 #87
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
id가 register_content인 부분에 피그마에 나와있는 width로 작성했더니 글자가 의도한 것과는 다르게 나와서 임의로 width를 작성해 주었는데 어떤 식으로 수정해야 하는지 잘 모르겠습니다!로컬에서 지혜님 미션을 실행시켜서 확인해봤는데 피그마 의도대로 잘 나타나는 것처럼 보입니다 ! 혹시 제가 놓친게 있다면 DM으로 말씀주세요 ! |
|
| @@ -0,0 +1,140 @@ | |||
| <!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 마케팅 관련 기사
lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.
- 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
- 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
- lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.
<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기
| class="header_logo" | ||
| /> | ||
| </a> | ||
| <a href="login.html" class="login_btn">로그인</a> |
There was a problem hiding this comment.
(심화/생각해보기/제안) login은 '기능'을 의미해요. 스타일 이름은 "어떤 스타일인지"를 목표로 네이밍을 작성해보면 어떨까요?
| <a href="login.html" class="login_btn">로그인</a> | |
| <a href="/login.html" class="button button-primary">로그인 </a> |
만약, 현재 button-login과 같은 스타일의 "장바구니에 담기" 라는 버튼이 존재한다면 클래스 이름이 어떻게 될까요?
button-login 클래스로 작성한다면 login이라는 "기능"을 목적으로 하는 클래스 이름을 넣게 될거예요. 혹은 중복된 스타일과 다른 클래스 이름인 button-add-wish와 같은 클래스 이름을 가지게 돼요. 이는 재사용성을 저하시킬거예요.
차라리 해당 클래스가 "어떤 스타일을 포함하는가?"에 목적을 두어 네이밍을 한다면 더욱 재사용하기 용이할거라고 생각해서 제안드립니다 😊
priamry: 주로 브랜드의 주요 컬러를 의미합니다 ! 😊 판다마켓의 경우 파란색이죠 !
| class="image" | ||
| /> | ||
| <div class="contents"> | ||
| <p class="title">Hot item</p> |
There was a problem hiding this comment.
<p> 태그는 단락을 나타냅니다 !
HTML <p> 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
예를 들어 다음과 같은 값이 <p>태그에 적절할 수 있어요 😊:
Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.
차라리 h 시리즈나 크게 의미가 없다고 생각한다면 span 혹은 div로 대체할 수 있습니다 =)
| <div class="footer_icon"> | ||
| <a href="https://facebook.com" target="_blank" | ||
| ><img src="images/logo/facebook_logo.svg" alt="facebook_logo" | ||
| /></a> | ||
| <a href="https://x.com" target="_blank" | ||
| ><img src="images/logo/twitter_logo.svg" alt="twitter_logo" | ||
| /></a> | ||
| <a href="https://youtube.com" target="_blank" | ||
| ><img src="images/logo/youtube_logo.svg" alt="youtube_logo" | ||
| /></a> | ||
| <a href="https://instagram.com" target="_blank" | ||
| ><img src="images/logo/instagram_logo.svg" alt="instagram_logo" | ||
| /></a> | ||
| </div> |
There was a problem hiding this comment.
(제안/선택)요소들이 순서 없는 목록을 의미한다면 <ul>과 <li>로도 나타낼 수 있습니다 !
<ul class="footer-social">
<li>
<a target="_blank" href="https://www.facebook.com/">
<img src="images/ic_facebook.svg" alt="페이스북" />
</a>
</li>
<li>
<a target="_blank" href="https://www.twitter.com/">
<img src="images/ic_twitter.svg" alt="트위터" />
</a>
</li>
<li>
<a target="_blank" href="https://www.youtube.com/">
<img src="images/ic_youtube.svg" alt="유튜브" />
</a>
</li>
<li>
<a target="_blank" href="https://www.instagram.com/">
<img src="images/ic_instagram.svg" alt="인스타그램" />
</a>
<li>
</ul>MDN: HTML
<ul>요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
li 태그의 기본 스타일을 제거하고 싶다면 다음과 같이 작성할 수 있습니다 ! { list-style: none; }
| #search_content { | ||
| width: 293px; | ||
| height: 200px; | ||
| } |
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는 특정 요소에만 적용되므로 유연성이 떨어지고, 재사용을 하지 못합니다.
| #register_content { | ||
| width: 337px; | ||
| height: 200px; | ||
| } |
There was a problem hiding this comment.
(의견)해당 스타일은 불필요해 보여요 !
지워보셔도 컨텐츠에 width의 유무와 상관없이 같은 디스플레이를 볼 수 있을거예요.
오히려, 글이 수정되게 되어 더 길어진다면 해당 스타일도 함께 수정해야 하므로 유지보수에 불리할 수 있어요.
| h2 { | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| line-height: 140%; | ||
| color: #374151; | ||
| } | ||
|
|
||
| p { | ||
| font-weight: 500; | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| color: #374151; | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| section { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| article { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 988px; | ||
| height: 444px; | ||
| margin: 138px auto; | ||
| gap: 64px; | ||
| border-radius: 12px; | ||
| background-color: #fcfcfc; | ||
| } |
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;
}
|
과제 하시느라 정말 수고하셨습니다. 지혜님 !! 😊😊 프로젝트 전까지 꾸준히 과제가 진행되었음 합니다. 🥺 |
2 participants
요구사항
기본
심화
배포 링크
https://panda-market-sprint1.netlify.app/
멘토에게