Conversation
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <header id="header"> |
There was a problem hiding this comment.
스타일링만을 위한 선택자는 class를 권장해요.
- id 는 보통 개발작업시 요소 선택을 위한 방편으로 많이 사용해요.
- id 선택자는 class보다 우선순위가 높아 id에 속한 스타일을 class로 덮어쓸 수 없어 유지보수와 확장성에 불리할 수 있어요.
- id는 페이지 내에서 고유해서 재사용에 좋지 않지만, class는 재사용 가능해요.
There was a problem hiding this comment.
다른 페이지로 이동하기 쉽도록 상단에 링크를 두는 요소는 nav태그가 더 좋을 것 같아요.
header태그는 콘텐츠의 제목이나 소개 또는 탐색하는 영역에 사용해요.
| <header id="header"> | ||
| <div class="emp"></div> | ||
| <div class="hd_inner"> | ||
| <div class="logo"><a href="/"><img src="img/logo.png" alt=""></a></div> |
There was a problem hiding this comment.
태그가 달라질 때 줄바꿈이 있으면 보기 편할 것 같아요.
There was a problem hiding this comment.
alt 들어갈 단어에 고민이 생길 때 참고하면 좋아요.
| a {color: #374151; text-decoration: none;} | ||
|
|
||
| /* common */ | ||
| .ab {display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; box-shadow: none; font: inherit; color: inherit; cursor: pointer; outline: none;} |
There was a problem hiding this comment.
ab라는 이름을 보면 어떤 의미인지 알기 힘든데, 어떤 의미인지 알기 쉬운 이름이면 좋을 것 같아요.
| <li><a href="/faq">FAQ</a></li> | ||
| </ul> | ||
| <ul class="ft_icon"> | ||
| <li><a href="https://www.facebook.com" target="_blank"><img src="img/ic_facebook.svg" alt=""></a></li> |
There was a problem hiding this comment.
_blank 설정할 때 noopener, noreferrer 설정도 고려하면 좋아요. (참고)
| @@ -0,0 +1,55 @@ | |||
| * {margin: 0; padding: 0; box-sizing: border-box;} | |||
| body {font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} | |||
There was a problem hiding this comment.
Pretendard 폰트가 적용될 수 있도록 설정해 주세요.
(font-family 작성한 순서대로 우선해서 적용하고 먼저 나온 설정이 없는 경우 다음 대체할 폰트가 적용되는 방식입니다.)
| @@ -0,0 +1,55 @@ | |||
| * {margin: 0; padding: 0; box-sizing: border-box;} | |||
| body {font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} | |||
| body {font-size: 12px; line-height: 1.3333; color: #374151; } | |||
There was a problem hiding this comment.
* {
box-sizing: border-box;
}
body {
margin: ~;
color: ~;
...
}
요소 별로, css 속성 별로 줄바꿈 또는 빈줄로 구분해주면 가독성에 좋아요.
| /* common */ | ||
| .ab {display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; box-shadow: none; font: inherit; color: inherit; cursor: pointer; outline: none;} | ||
| .inp {display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; box-shadow: none; font: inherit; color: inherit;} | ||
| .btn_sml {display: block; width: 128px; padding: 12px 20px; background-color: #3692FF; border-radius: 8px; color: #F3F4F6; font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center; transition: all 0.2s;} |
| <section class="main_bgbox main_visual"> | ||
| <div class="bgbox_inner"> | ||
| <div class="cont"> | ||
| <div class="tit">일상의 모든 물건을 <br>거래해 보세요</div> |
There was a problem hiding this comment.
개발/프로덕트에서 일반적으로 줄여서 사용하는 단어(button -> btn, click to action -> cta, error -> err 등)가 아닌 경우엔 그냥 단어 자체를 써주는게 이해하기 좋아요.
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
파일의 마지막에 빈 줄이 포함되는 것이 좋아요.
동작에 문제가 있는 건 아니지만 잠재적 문제를 없애기 위함 입니다. (참고)
사용하는 에디터에서 end of line 또는 eol이라는 키워드로 설정할 수 있어요
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게