회원가입 과제 피드백 부탁드립니다.

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ CSS 정렬

해결된 질문

작성

안녕하세요!

회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데

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;
}

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! hyunah10님!

코드를 보기 좋게 잘 작성하신 것 같아요!^^
항상 시작보다, 끝 마무리가 중요한 것 아시죠?!
꼭 끝까지 포기하지 말고 같이 완강해봐요! ㅎㅎ

radio 버튼의 색을 변경하시기 위해서는 accent-color를 활용하시면 됩니다!
중복을 제거하는것! 물론 좋아요!
다만, 중복을 제거하더라도 가독성을 해친다면 추천드리진 않아요!^^
지금은 CSS 단위로 중복 제거를 연습하시겠지만, 뒷 부분에 가서는 input+css를 하나의 쌍으로 만들고 이를 "컴포넌트"라고 부르게 됩니다!
그리고 이 "컴포넌트"를 중복되지 않게 만드는 실력을 많이 쌓아 주시면 좋을 것 같아요!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. hyunah10님께서 작성하신 회원가입 페이지 코드를 리뷰해드리겠습니다. 문자열에 있는 Figma에서의 라디오 버튼 색상 변경과 CSS 코드 구조 개선에 관한 질문도 함께 답변드릴게요.

Figma 처럼 라디오 버튼의 기본 색상을 회색으로 변경
- accent-color 속성을 사용하여 라디오 버튼의 색상을 변경할 수 있습니다. 이미 CSS에서 accent-color: #D2D2D2;을 사용하고 계신데, 이 속성이 지원되지 않는 브라우저에서는 원하는 색상이 적용되지 않을 수 있습니다. 그런 경우에는 JavaScript 등을 사용하여 커스텀 스타일의 라디오 버튼을 구현할 수도 있습니다.
CSS 코드 구조 개선
- CSS 코드에서 많은 스타일이 중복되고 있는 경우, 공통된 스타일을 별도로 정의하여 코드가 더 간결하고 유지보수가 쉽도록 만드는 것이 좋습니다.
- 예를 들면, .inputEmail과 .input의 공통 속성을 합칠 수 있습니다.

   .input, .inputEmail {
       width: 100%;
       border: none;
       border-bottom: 1px solid #CFCFCF; /* 공통 부분 */
   }

   .inputEmail {
       border-bottom-color: #0068FF; /* 개별 스타일 */
   }

이러한 방법으로 코드의 중복을 줄이고 가독성을 증가시킬 수 있습니다.

추가로 회원가입 관련 디자인과 CSS 구현에 대한 더 많은 정보를 얻고 싶으시다면, 다음 링크를 참조하시면 유사한 토픽의 게시물에서 팁과 트릭을 얻으실 수 있습니다:

CSS정렬 - 회원가입 과제 코드 공유
최다니엘님의 질문에서는 회원가입 페이지의 구성, CSS 속성의 사용 예제 등을 관련된 이미지를 통해 공유하고 있습니다. 이는 스타일링의 기초를 재검토하시는 데에 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

회원가입 과제 피드백 부탁드립니다.