참고 URL

⇒ 글자 가운데 정렬(세로)

• https://oursmalljoy.com/css-글자-수직-가운데-정렬-text-vertical-align/

설계

⇒ 수정 전 화면

• 로그인 FORM
  • 디자인 css 수정
    • ID 입력창
    • 로그인 후 ID TEXT : 가운데 정렬
    • 로그인 및 로그아웃 버튼
• 시간 DIV
  • 기존 위치 DIV : leftTop DIV
  • 수정 위치 DIV : Top DIV의 좌측

결과 화면

로그인 Form

index.html

<!-- 로그인 및 로그아웃 관련 DIV -->
<div id="login">
  <!-- 로그인 폼 -->
  <form action id="login-form">
    <div id="inputBox">
      <input
      required
      maxlength="15"
      type="text"
      placeholder="아이디를 입력하세요"
      />

    </div>

    <div id="loginBox">
      <input type="submit" value="Log In" />
    </div>
  </form>

  <!-- <h1 id="greeting" class="hidden"></h1> -->

  
  <!-- 로그아웃 폼 -->
  <form action id="logoutBtn" class="hidden">
    <div>
      <h1 id="greeting" class="hidden"></h1>
    </div>

    <div id="logoutBox">
      <input type="submit" value="Log Out" />
    </div>
  </form>

• index.html 내용은 동일

css/style.css

/***** 시작 - 로그인 및 로그아웃 *****/
#greeting { /* ID TEXT 가운데 정렬 */
    text-align: center;
}

#login p {
    margin-top: 5px;
    margin-bottom: 0;
    margin-left: 85%;
    color: #a0a0a0;
    font-family: 'BMYEONSUNG';
    font-size: 20px;
}

#login p:hover {
    text-decoration: underline;
    cursor: pointer;
}

#inputBox {
    justify-content: center;
    height: 30px;
    margin-bottom: 0;
    margin-top: 20px;
    margin-left: 15%;
    margin-right: 15%;
}

#inputBox input {
    background: transparent;
    border: 2px solid #f6f6f6;
    color: #f6f6f6;
    font-family: 'BMYEONSUNG';
    font-size: 25px;
    width: 200px;
    height: 30px;
    border-radius: 60px;
    padding-left: 20px;
    padding-top: 5px;
    outline: none;
}

#inputBox input:hover {
    border: 2px solid #c5acf8;
}

#inputBox input::placeholder {
    color: #f6f6f6;
    font-family: 'BMYEONSUNG';
}

#loginBox, #logoutBox {
    height: 30px;
    margin-top: 15px;
    margin-left: 70%;
    margin-bottom: 0px;
    margin-right: 13%;
}

#loginBox input, #logoutBox input {
    height: 100%;
    width: 100%;
    border-radius: 40px;
    background-color: #9a74e8;
    font-family: 'BMYEONSUNG';
    font-size: 20px;
    border: 0px;
}

#loginBox input:hover, #logoutBox input:hover {
    cursor: pointer;
    color: #f6f6f6;
    background-color: #c5acf8;
}

/***** 종료 - 로그인 및 로그아웃 *****/

• #greeting
  • 로그인 후 나오는 ID 값을 LeftTop의 가운데에 출력하도록 수정
• #inputBox
  • ID 입력창
• #loginBox, #logoutBox
  • 로그인 버튼 / 로그아웃 버튼

시간 DIV 위치 수정 : leftTop > Top

index.html

<!-- 최상단 => 시간 API && 환영 문구 -->
<div class="top">
  <!-- 시간 API -->
  <div id="topClock">
    <h2 id="clock" style="color:orangered">00:00:00</h2>
  </div> 

  <div id="topWelcome">
    <h1 id="welcome">Welcome! This is Irish's Web Page.</h1>
  </div>
</div>

• 시간 DIV를 Top DIV 안에 넣으려다 보니, 기존에 Top DIV에 존재하던 welcome 텍스트가 깨졌다.
• 이를 방지하기 위해 이 두 DIV의 위치를 css에서 절댓값으로 부여했다.

css/style.css

/* 시작 - top Div에 있는 텍스트 관련 설정 */
#topWelcome {
    position: absolute;
    width: 600px;
    height: 80px;
    margin-left: 600px;
    line-height: 40px;              /* 글자 세로 정렬 - height의 절반 */
}

#topClock {
    position: absolute;
    width: 600px;
    height: 80px;
    margin-left: 10px;
    line-height: 40px;              /* 글자 세로 정렬 - height의 절반 */
}
/* 종료 - top Div에 있는 텍스트 관련 설정 */

• #topWelcome, #topClock
  • 두 id의 CSS에서 width와 height의 px 값 기준으로 position을 absolute하여 고정시켰다.
  • 각 DIV에 존재하는 TEXT를 세로 기준으로 가운데 정렬하기 위해서 “line-height”의 값을 height의 px 값의 절반값 px을 부여했다.