inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

input 태그 / flex 정렬

해결된 질문

2250

강우주

작성한 질문수 1

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

 

 

 

html/css javascript input flex HTML/CSS 정렬

답변 1

0

코드캠프 프론트엔드 멘토

안녕하세요 우주님!

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

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

감사합니다.😁

0

강우주

image

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

감사합니다!

싸이월드3

0

77

2

싸이월드2 관련 질문 드립니

0

92

3

과제 모범답안 유무

0

89

2

과제 연습 질문

0

72

2

<style> 에 *와 div 차이

0

86

2

과제 profile 부분 질문

0

113

2

과제 Profile 부분 질문

0

86

2

left_body_header의 자식border-top인데

0

80

2

정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.

0

127

1

태그 궁금한 점

0

162

2

HTML 회원가입

0

192

2

문법관련 질문입니다

0

253

2

윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.

0

649

2

26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ

0

250

2

피그마에서 css 코드가 안보여요..

1

3218

2

주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ

0

325

2

언어 설정 -> 한글

0

289

1

2024년 html

0

226

1

피그마 유료화

0

1670

1

Fiama 링크 찾기

0

240

2

Figma는 어디에 있나요?

0

251

1

안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?

0

357

2

git 질문입니다

0

216

1

아무리 찾아봐도 피그마 링크가 보이질 않습니다.

0

312

1