• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

회원가입 과제 질문

23.10.18 01:08 작성 23.10.18 01:11 수정 조회수 205

0

* {
  justify-content: center;
  align-items: center;
}

.hr {
  width: 470px;
  height: 0.998px;
  flex-shrink: 0;
  background: #e6e6e6;
}

.bak {
  width: 670px;
  height: 960px;
  border-radius: 20px;
  border: 1px solid #aacdff;
  background: #fff;
  box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25);
}

.h2 {
  width: 466px;
  color: #0068ff;
  font-family: Noto Sans CJK KR;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.email {
  width: 158px;
  height: 23.649px;
  flex-shrink: 0;
  color: #797979;
  font-family: Noto Sans CJK KR;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.name {
  width: 158px;
  height: 23.649px;
}

.pw {
  width: 158px;
  height: 23.649px;
}

.pw {
  border: 1px solid blue;
}

.button {
  border-radius: 10px;
  border: 1px solid #0068ff;
  background: #fff;
  width: 470px;
  height: 75px;
  flex-shrink: 0;
}

.check {
  color: #000;
  font-family: Noto Sans CJK KR;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

<!DOCTYPE html>
<html lang="ko">
  <head>
    
    <title>회원가입</title>
    <link href="./02-signup.css" rel="stylesheet" />
  </head>
  <body>
    <div class="bak">
    <h2 class="h2">회원 가입을 위해<br>정보를 입력해주세요</h2>

    <input class="email" type="text" placeholder="이메일" /><br /><br />
    <input class="name" type="text" placeholder="이름" /><br /><br />
    <input class="pw" type="password" placeholder="비밀번호" /><br /><br />
    <input class="pw" type="password" placeholder="비밀번호 확인" /><br /><br />
    <select>
      <option disabled="true" selected="true">지역을 선택하세요</option>
      <option>서울</option>
      <option>경기</option>
      <option>인천</option>
    </select>
    <br /><br />
    <input class="radio" type="radio" name="gender" />여성
    <input class="radio" type="radio" name="gender" />남성 <br /><br />
    <input class="check" type="checkbox" /> 이용약관 개인정보 수집 및 동의
    
    <hr class="hr">
    <br>
    <br>
    <button class="button">가입하기</button>
    <!-- <input type="button" value="가입하기" /> -->
  </body>
</div>
</html>

코드 작성한 게 저렇게 화면이 보여지는데 가운데 정렬을 하려면 어떻게 해야될까여..... flex랑 just로 시작하는 속성을 넣으면 이상하게 되더라구요 너무 어렵네요 ㅠㅠ

 

course-thumbnail

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

CSS 정렬

강의실 바로가기

답변 1

답변을 작성해보세요.

0

노원두님의 프로필

노원두

지식공유자

2023.10.19

안녕하세요! 서연님!

아직 정렬에 대한 개념이해가 더 필요할 것 같아요!

우리가 학습하는 모든 수업의 중요도가 동일하지 않아요!

flex의 경우, 다른 파트보다 10배는 더 중요하므로 조급하게 생각하지 마시고 다시 돌아가서 flex부분은 3번 이상 반복해보시길 추천드립니다!

현재 모든 태그(*) 부분에 justify-content, align-items 등의 특성을 주셨는데, 이 녀석들은 내가 정렬하고자 하는것들을 묶은 부모박스에서 주셔야하는 특성들이랍니다!

따라서, 원리를 다시 학습해주시고, 바로 가입하기 화면을 만들기보단 배운 원리를 안보고 빈 화면에 네모칸을 정렬하는 연습을 먼저 진행해 주세요!

 

이 글과 비슷한 Q&A