[HTML/CSS] div 화면 우측정렬 / 전화번호 input 가운데 정렬

<<인프런x코드캠프 : 부트캠프에서 만든 고농축 백엔드코스 final 과제>>

 

 

왼쪽처럼 만들어야하는데 오른쪽에서 막혔다. 

 

문제1) 전화번호

해당 div의 전체 width를 100%으로 잡았을 때 전체적으로 고르게 퍼져야함

문제2) 전화번호

input box 사이사이 들어가는 - 를 어떻게 표기할 것인가?

하드코딩으로 - 를 넣을 수는 없을 터

문제3) 글자와 버튼사이 공백을 어떻게 줄것인가? justfiy-content: space-between이 안먹는다. 

문제4) 인증번호 블록(숫자 + 버튼) 오른쪽 정렬 시키기

 

현재 코드 

HTML

<div class="phone_no">
    <input type="text" class="phone" id="p1" />
    <input type="text" class="phone" id="p2" />
    <input type="text" class="phone" id="p3" />
</div>
<div class="auth_check">
    <div>000000</div>
    <button class="auth_btn">인증번호 전송</button>
</div>
<div class="auth_time">
    <div>3:00</div>
    <button class="auth_btn">인증 완료</button>
</div>

CSS

.전체div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #0068ff;
  border-radius: 20px;
  box-shadow: #e5e5e5 5px 5px 5px 5px;
  align-items: center;
  width: 540px;
  height: 960px;
}

.phone_no {
  display: flex;
  flex-direction: row;
  width: 380px;
}

.phone {
  width: 100px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.auth_check,
.auth_time {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: right;
}

.auth_btn {
  width: 120px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 15px;
}

 

 문제 해결

문제1) 전화번호 div의 전체 width를 100%으로 잡았을 때 전체적으로 고르게 퍼져야함

문제2) 전화번호 input box 사이사이 들어가는 - 를 어떻게 표기할 것인가?

하드코딩으로 - 를 넣을 수는 없을 터

  <div class="phone_no">
    <input type="text" class="phone" id="p1" /><span class="hyphen">-</span>
    <input type="text" class="phone" id="p2" /><span class="hyphen">-</span>
    <input type="text" class="phone" id="p3" />
  </div>

.hyphen {
  font-size: 30px;
  line-height: 30px;
  margin: 0px 15px;
}

정답 보니 그냥 -로 처리했다. 근데 나는 좀 더 굵게 처리하고 싶어서 span태그를 걸었고, 그 사이 margin을 줘서 퍼뜨렸다. 

 

 

문제3) 글자와 버튼사이 공백을 어떻게 줄것인가? justfiy-content: space-between이 안먹는다. 

.auth_btn {
  width: 120px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

답 : 다른 거 없이 그냥 버튼에 margin-left 부여

 

문제4) 인증번호 블록(숫자 + 버튼) 오른쪽 정렬 시키기

.auth_check,
.auth_time {
  width: 380px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}

width를 지정해주고 이 width에 대해서 

justify-content :flex-end를 해주면 가장 우측(끝)으로 가서 붙는다. 

 

 

 

완성!