회원가입 과제 피드백 부탁드립니다.
안녕하세요!
회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데
figma 처럼 라디오버튼의 기본 색상을 회색으로 변경할 수 있을까요?
css 파일에서 반복되어 사용되는 속성, 값들이 있는데 이런 값들은 공통적으로 사용하는 것이 구조적으로 좋을까요?
예) 아래 코드에서 .inputEmail과 .input에 설정하는 css 값들이 유사하지만 분리해서 작성
아래는 과제 관련 코드입니다! 미리 답변 감사합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="./02-signup.css" rel="stylesheet">
</head>
<body>
<div class="background">
<div class="signup">
<h2 id="title">회원 가입을 위해<br>정보를 입력해주세요<br></h2>
<div>
<span><br>* 이메일<br><br></span>
<input class="inputEmail" type="text">
</div>
<div>
<span><br>* 이름<br><br></span>
<input class="input" type="text">
</div>
<div>
<span><br>* 비밀번호<br><br></span>
<input class="input" type="password">
</div>
<div>
<span><br>* 비밀번호 확인<br><br></span>
<input class="input" type="password">
</div>
<br><br>
<div class="radioGender">
<div>
<input type="radio" name="gender">여성
</div>
<div>
<input type="radio" name="gender">남성
</div>
</div>
<br><br>
<div>
<input class="agreement" type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
</div>
<br>
<hr id="line">
<br>
<div>
<button class="signupBtn">가입하기</button>
</div>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.background {
width: 670px;
height: 960px;
border-radius: 20px;
border: 1px solid #AACDFF;
box-shadow: 7px 7px 39px 0px #0068FF40;
display: flex;
justify-content: center;
align-items: center;
}
.signup {
width: 470px;
display: flex;
flex-direction: column;
}
.signup span {
color: #797979;
}
.inputEmail {
width: 100%;
border: none;
border-bottom: 1px solid #0068FF;
}
.input {
width: 100%;
border: none;
border-bottom: 1px solid #CFCFCF;
}
.radioGender {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
accent-color: #D2D2D2;
}
.agreement {
font-size: 14px;
}
.signupBtn {
width: 100%;
height: 75px;
border-radius: 10px;
border: 1px solid #0068FF;
background: #FFFFFF;
color: #0068FF;
font-size: 18px;
}
#title {
font-size: 32px;
color: #0068FF;
}
#line {
width: 100%;
height: 1px;
border: none;
background-color: #E5E5E5;
}답변 2
1
안녕하세요! hyunah10님!
코드를 보기 좋게 잘 작성하신 것 같아요!^^
항상 시작보다, 끝 마무리가 중요한 것 아시죠?!
꼭 끝까지 포기하지 말고 같이 완강해봐요! ㅎㅎ
radio 버튼의 색을 변경하시기 위해서는 accent-color를 활용하시면 됩니다!
중복을 제거하는것! 물론 좋아요!
다만, 중복을 제거하더라도 가독성을 해친다면 추천드리진 않아요!^^
지금은 CSS 단위로 중복 제거를 연습하시겠지만, 뒷 부분에 가서는 input+css를 하나의 쌍으로 만들고 이를 "컴포넌트"라고 부르게 됩니다!
그리고 이 "컴포넌트"를 중복되지 않게 만드는 실력을 많이 쌓아 주시면 좋을 것 같아요!^^
1
안녕하세요, 인프런 AI 인턴입니다. hyunah10님께서 작성하신 회원가입 페이지 코드를 리뷰해드리겠습니다. 문자열에 있는 Figma에서의 라디오 버튼 색상 변경과 CSS 코드 구조 개선에 관한 질문도 함께 답변드릴게요.
Figma 처럼 라디오 버튼의 기본 색상을 회색으로 변경
accent-color속성을 사용하여 라디오 버튼의 색상을 변경할 수 있습니다. 이미 CSS에서accent-color: #D2D2D2;을 사용하고 계신데, 이 속성이 지원되지 않는 브라우저에서는 원하는 색상이 적용되지 않을 수 있습니다. 그런 경우에는 JavaScript 등을 사용하여 커스텀 스타일의 라디오 버튼을 구현할 수도 있습니다.
CSS 코드 구조 개선
- CSS 코드에서 많은 스타일이 중복되고 있는 경우, 공통된 스타일을 별도로 정의하여 코드가 더 간결하고 유지보수가 쉽도록 만드는 것이 좋습니다.
- 예를 들면,
.inputEmail과.input의 공통 속성을 합칠 수 있습니다.
- CSS 코드에서 많은 스타일이 중복되고 있는 경우, 공통된 스타일을 별도로 정의하여 코드가 더 간결하고 유지보수가 쉽도록 만드는 것이 좋습니다.
.input, .inputEmail {
width: 100%;
border: none;
border-bottom: 1px solid #CFCFCF; /* 공통 부분 */
}
.inputEmail {
border-bottom-color: #0068FF; /* 개별 스타일 */
}
이러한 방법으로 코드의 중복을 줄이고 가독성을 증가시킬 수 있습니다.
추가로 회원가입 관련 디자인과 CSS 구현에 대한 더 많은 정보를 얻고 싶으시다면, 다음 링크를 참조하시면 유사한 토픽의 게시물에서 팁과 트릭을 얻으실 수 있습니다:
- CSS정렬 - 회원가입 과제 코드 공유
최다니엘님의 질문에서는 회원가입 페이지의 구성, CSS 속성의 사용 예제 등을 관련된 이미지를 통해 공유하고 있습니다. 이는 스타일링의 기초를 재검토하시는 데에 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
32
1
댓글 기능 구현 중 질문드립니다.
0
63
1
쿠폰코드 발급
0
127
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
84
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
75
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
68
2
학습자료가 안열립니다.
0
47
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
58
0
기존강의 구매자, 업데이트 끝인가요?
0
107
3
업데이트 버전 수강
0
87
2
완벽한 프론트엔드
0
135
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
80
1
graphql 접속이 안됩니다.
0
99
2
const, let 사용 질문 드립니다.
0
69
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
121
2
styled.span / styled.input "CSS 자동완성"
0
46
1
쿠폰 발급 관련
0
165
2
서버 502 error
0
246
2
쿠폰 다시 부탁드려도 될가여?
0
139
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
181
2
2분 44초 질문
0
127
3
문의드립니다.
0
90
2