Conversation
There was a problem hiding this comment.
예진님, 이번 미션도 잘 마무리해주셨네요! 💯
큰 부분은 아니지만, html 구조를 조금 더 단순화 시킬 수 있을 거 같습니다 :) 그 것 말고는 깔끔하게 잘 해주셨습니다~
로그인 페이지와 회원가입 페이지의 스타일이 겹치는게 많아서 css파일을 하나로 통합했는데 정석대로 한다면 공통되는 부분이 많을때
css파일을 통합하나요, 아니면 페이지 당 하나씩 css파일을 만드는건가요?
-> 정답은 없습니다! ㅎ 개발자 개인 취향이나 팀 개발 문화에 따라 많이 달라질 수 있는 부분입니다. 가령 지금 처럼 코드량이 적은 경우, 파일 하나로 관리하다가 나중에 추가 사항이 더 발생하고 페이지가 커지면서 관리하기가 힘들어지면 두 개로 나누는 방법도 있겠죠! 나누는 시점과 방법은 그 때 또 다시 판단하셔야 할 거구요 :)
css파일에서 작성해 나가는 암묵적인(?) 순서가 있나요? 예를들어 html의 코드 순서대로 css를 작성한다는거요.. 놓친 스타일이 있거나 추가 하고 싶은 스타일이 있을때 css파일 가장 밑에 추가하니 나중에 스타일을 확인하려고 했을 때 왔다갔다 하려니까 궁금했습니당..ㅎㅎ
-> 특별히 없습니다 🤣 하지만 너무 걱정하지 않으셔도 괜찮습니다! 위 질문도 포함된 이야기인데, 나중에는 페이지 전체에 대한 스타일을 하나의 css 파일에 넣는 경우가 많이 없을 거에요 :) 한 곳에서 작성하시는 스타일 양이 많이 줄어드는거죠! css파일을 아예 안 쓰는 경우도 있구요ㅎ
더 좋은 코드를 위해 고민하시는 모습이 보기 좋습니다 👍
| </head> | ||
| <body> | ||
| <a href="/"><img src="image/logo_large.png" alt="로그인 로고" class="sign-logo"></a> | ||
| <form class="sign-form"> | ||
| <div class="sign-form-label"> |
There was a problem hiding this comment.
크게 상관은 없지만.. 굳이 div로 감싸지 않고 label에 직접 스타일을 주셔도 될 거 같습니다 :)
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Login</title> | ||
| <link rel="stylesheet" href="sign.css"> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> |
There was a problem hiding this comment.
as는 preload를 지정했을 때만 사용됩니다 :) 다시 한 번 확인해주세요!
https://developer.mozilla.org/ko/docs/Web/HTML/Element/link#%ED%8A%B9%EC%84%B1
| <a href="/"><img src="image/logo_large.png" alt="로그인 로고" class="sign-logo"></a> | ||
| <form class="sign-form"> | ||
| <div class="sign-form-label"> | ||
| <label for="login-email">이메일</label> |
| box-sizing: border-box; | ||
| } | ||
|
|
||
| :root { |
| } | ||
|
|
||
| :root { | ||
| --gray900 : #111827; |
There was a problem hiding this comment.
앱 전체에서 공통으로 사용될 가능성이 크다면, 파일을 따로 분리하셔서 관리하시는 것도 좋습니다 :)
요구사항
기본
로그인 페이지, 회원가입 페이지 공통
로그인 페이지
회원가입 페이지
심화
주요 변경사항
스크린샷
멘토에게
css파일을 통합하나요, 아니면 페이지 당 하나씩 css파일을 만드는건가요?