• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

input 태그 / flex 정렬

23.02.08 23:23 작성 조회수 1.48k

0

안녕하세요. 취업을 목표로 공부하고 있는 코린이 입니다.

섹션2 CSS 파트의 "회원가입" 화제 과제를 하는 중에, 며칠동안 코드를 계속 수정하고 고쳐도

(아직 제 실력으로는) 해결이 어려운 부분들이 있어 질문을 남기게 되었습니다.

저는 맥북을 사용하고, chrome으로 구현하고 있습니다.

 

<input> 관련

input[type="radio"] {
    appearance: none;
    border-radius: 50%;

    width: 20px;
    height: 19.95px;

    background-color: #ebebeb;
    border: 1px solid #d2d2d2;
}

<input type="radio" ~>

위의 input 태그의 외형을 CSS로 변경할 때 (특히, 배경 색상)

코드가 반영이 안되는 부분이 있어 인터넷 검색을 하다보니,

appearance: none;

을 지정해 줘야 한다는 것을 알게 되었습니다.

이 부분에서, 'input 태그에 class 또는 id를 적용시킬 때 항상 appearance를 적용해야 하는지'

궁금합니다.

 

나머지는 다했는데... / <div> 속 <input>의 flex 정렬

과제의 90%는 구현했습니다.. 그런데

회원가입 과제.png

부모박스를 <div>로 지정하고

자식 박스에 <input> 태그가 포함되었을 때,

position: flex;

justify-content: row/column;

와 같은 flex 정렬 코드가 반영이 되지 않고 있습니다.

 

최대한 자력으로 해결해보려고 노력하고 있지만, 아직 제 실력이 부족하여

며칠을 고민해도 쉽게 해결하지 못하고 있습니다...

선생님의 고견이 절실한 순간입니다.

 

완강하는 그날까지!

html

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>회원가입</title>
  <link href="./02-signup_실습.css" rel="stylesheet">
</head>
<body>
  <!-- 회색 배경 -->
  <div class="Graybg">

    <!-- 회원가입 배경 -->
    <div class="SignUpbg">

      <!-- Group5 -->
      <div class="Group5">

        <!-- 회원가입을 위해~ -->
        <div class="Title">
          회원가입을 위해<br>
          정보를 입력해주세요
        </div>

        <!-- Group1 -->
        <div class="Group1">
          <div class="Textbox">* 이메일</div>
          <div class="vector1"></div>
        </div>

        <!-- Group2 -->
        <div class="Group1">
          <div class="Textbox">* 이름</div>
          <div class="vector2"></div>
        </div>

        <!-- Group3 -->
        <div class="Group1">
          <div class="Textbox">* 비밀번호</div>
          <div class="vector2"></div>
        </div>

        <!-- Group4 -->
        <div class="Group1">
          <div class="Textbox">* 비밀번호 확인</div>
          <div class="vector2"></div>
        </div>

        <!-- 성별 -->
        <div class="gender">
          <!-- 여성 -->
          <div class="genderBox">
            <div><input type="radio"></div>
            <div>여성</div>
          </div>
          <!-- 남성 -->
          <div class="genderBox">
            <div><input type="radio"></div>
            <div>남성</div>
          </div>
        </div>
          
          
        <!-- 체크박스 -->
        <div class="checkBox">
          <input type="checkbox">
          <div class="genderText">
            이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
          </div>
        </div>
          
        <!-- 선 -->
        <div class="line"></div>

          <!-- 가입 버튼 -->
        <button>
          <div class="signUpText">가입하기</div>
        </button>
      </div>
    </div>
  </div>
</body>
</html>

CSS

.Graybg {
    position: absolute;
    width: 1920px;
    height: 1080px;

    background-color: #FFFFFF;

    border: 1px dotted black;

    display: flex;
    justify-content: center;
    align-items: center;
}

.SignUpbg {

    width: 670px;
    height: 960px;

    background: #FFFFFF;
    border: 1px solid #AACDFF;
    box-shadow: 7px 7px 39px
        rgba(0, 104, 255, 0.25);
    border-radius: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.Group5 {
    width: 470px;
    height: 818px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.Title {
    box-sizing: border-box;

    width: 466px;
    height: 94px;

    font-family: 'Noto Sans CJK KR';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 47px;

    color: #0068FF;
}

.Group1 {
    width: 466px;
    height: 80px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



/* 성별 */
.gender {
    width: 140px;
    height: 23.94px;

    position: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    border: 1px dotted black;
        
}

.genderBox {
    width: 60px;
    height: 23.94px;

    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    border: 1px dotted black;
}

input[type="radio"] {
    appearance: none;
    border-radius: 50%;

    width: 20px;
    height: 19.95px;

    background-color: #ebebeb;
    border: 1px solid #d2d2d2;
}

.genderText {
    font-family: 'Noto Sans CJK KR';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    
    color: #000000;
}

/* 성별 */

/* 체크박스 */
.checkBox {
    position: flex;
    flex-direction: row;
    align-items: center;

    width: 454px;
    height: 21.06px;

        font-family: 'Noto Sans CJK KR';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;

    border: 1px dotted black;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.checkBoxText {
    width: 419px;
    height: 21px;

    font-family: 'Noto Sans CJK KR';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    
    color: #000000;
}

/* 체크박스 */

.vector1 {
    width: 466px;
    height: 0px;

    border: 1px solid #0068FF;
}

.vector2 {
    width: 466px;
    height: 0px;

    border: 1px solid #CFCFCF;
}

/* 선 */
.line {
    width: 470px;
    height: 1px;

    background: #E6E6E6;
}

/* 가입 버튼 */
button {
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 470px;
    height: 75px;

    background: #FFFFFF;
    border: 1px solid #0068FF;
    border-radius: 10px;
}

button:hover {
    background: yellowgreen;

}

.signUpText {
    width: 70px;
    height: 27px;

    font-family: 'Noto Sans CJK KR';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;

    text-align: center;

    color: #0068FF;
}

 

 

 

course-thumbnail

[코드캠프] 시작은 프리캠프

답변 1

답변을 작성해보세요.

0

코드캠프 프론트엔드 멘토님의 프로필

코드캠프 프론트엔드 멘토

2023.02.09

안녕하세요 우주님!

appearance는 태그 자체에 있는 기존 CSS를 변형할 때 사용 됩니다.
또한 다 너무 잘해주셨는데, input(radio)들이 정렬되길 원하신다면 두 input을 한번에 묶고 있는 gender에 flex를 주셔야 합니다.
정렬되기 원하는 자식을 모두 묶은 부모에 flex를 주셔야 자식들이 정렬됩니다.

지금까지 따라와주신 것만 봐도, 우주님께서는 빠르게 성장하고 개발자가 되실 수 있으실 것 같습니다!
우리 완강하는 그날까지 힘내서 달려봐요!

감사합니다.😁

강우주님의 프로필

강우주

질문자

2023.02.10

image

선생님의 답변 덕분에 과제를 마쳤습니다

감사합니다!

이 글과 비슷한 Q&A