[김교연] Sprint3 #70
[김교연] Sprint3 #70
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
최대한 태블릿과 모바일에 화면에 맞춰 코드를 수정했지만 어려운 부분이 있어서 완벽하게 피그마 시안대로 하지 못했습니다.괜찮습니다 ! 작성주신 코드 기반으로 도움되실 수 있도록 꼼꼼히 피드백 해볼게요 ㅎㅎㅎ |
| @@ -1,3 +1,5 @@ | |||
| @import url("../color.css"); | |||
There was a problem hiding this comment.
오호 ~! 스타일을 재사용하셨군요 !
피드백을 잘 수용하셨네요 ㅎㅎㅎ 훌륭합니다 👍👍
| main { | ||
| margin-top: 70px; | ||
| background-color: #ffffff; | ||
| background-color: var(--white); |
| .login_content, | ||
| .btn_login2, | ||
| .sns_login_content { | ||
| width: calc(100% - 32px); |
There was a problem hiding this comment.
margin으로도 대체할 수 있지 않을까요?
margin-left: 16px, margin-right: 16px과 같이요 ! 😊
There was a problem hiding this comment.
컬러 정리가 정말 깔끔하네요 !
사용하기 너무 좋아보여요. 각 색상을 단계별로 나타내셨군요 ! 👍👍
| header > nav { | ||
| padding: 0 24px; | ||
| } |
There was a problem hiding this comment.
header나 nav는 페이지에 여러번 사용될 수 있어요 !
이 또한 클래스로 스타일을 지정하는게 어떨까 제안드립니다 😊
하단은 이 전 피드백입니다:
클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !
좀 더 자세히 🤔
유지보수가 어려워질 수 있어요.
특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.
태그 의미를 명확히 부여하기 어려워요.
스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.
만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?
<p class="error-message">오류가 발생했습니다.</p>물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.
예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:
p {
margin: 0;
}그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:
.paragraph {
font-size: 16px;
color: #333;
}
.highlight {
background-color: yellow;
}| 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, |
There was a problem hiding this comment.
오호 ~ 프리티어를 적용하셨나봐요? 😊👍
포매팅이 깔끔하군요 !
|
수고하셨습니다 교연님 ! |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
메인화면
로그인
회원가입
멘토에게