설계

• 로그인
  • 로그인 후 나오는 아이디 텍스트를 오른쪽 정렬
• To Do List 입력창
  • width 길이 줄이기
  • middle Div 기준으로 가운데 정렬
• Right Div
  • 구역 분할
    • 추후에, 과거에 개발했던 프로젝트 등 기재 예정
    • leftTop Div에 있는 날씨 API 관련 DIV 옮길 예정

결과 화면

⇒ 로그인 이전

⇒ 로그인 이후

로그인

입력창

• 로그인 입력창이 기존 leftTop 영역에서 Top 영역으로 이동함에 따라 로그인 입력창이 잘 안보였다.
  • 기존에 로그인 입력창의 바탕색(background)이 “transparent”이었기 때문에, Top 영역의 바탕색이 흰 색이었기 때문에 잘 보였음
• 따라서, 바탕색을 로그인 및 로그아웃 버튼과 동일한 색인 보라색 계열의 컬러를 주었다.

소스 코드

⇒ cssstyle.css

#inputBox input {
    background: #9a74e8;
    border: 2px solid #f6f6f6;
    color: #f6f6f6;
    font-family: 'BMYEONSUNG';
    font-size: 25px;
    width: 300px;
    height: 30px;
    border-radius: 60px;
    outline: none;
    text-align: center;
}

아이디 텍스트

• 아이디 텍스트가 나오는 Div의 margin-left 속성을 주어서 최대한 정렬 느낌이 나게 했다.
  • 개인적으로 아쉬운 부분이다. 지금이야 html에서 입력 최대 길이를 5를 주었지만, 추후에 웹 사이트를 만들 때 사용자마다 아이디의 길이가 모두 다를 것이다. 그런데, 통일된 정렬 느낌이 안든다면? UX적인 측면에서 보기에 별로 안 좋을 것이다. 이것은 추후에 좀 더 공부를 하고 반영해야 할 것 같다.

소스 코드

⇒ css/style.css

#divGreeting { /* ID TEXT 가운데 정렬 */
    position: absolute;
    width: 100px;
    height: 40px;
    margin-left: 70px;
}

#greeting { /* ID TEXT 가운데 정렬 */
    position: absolute;
    line-height: 40px;  
}

To Do List 입력창

• 우선, 이전에는 입력창 안에 있는 “할 일을 적어주세요” 문구가 가운데 정렬이 안되어 있었다. 수정 사항에서 [text-align: center;] 를 통해 해당 문구를 가운데 정렬하였다.
• 입력창 자체는 left 영역을 주어 가운데 정렬하였다.
  • 이 부분도 아쉬운 부분인데, 그냥 상위 DIV를 기준으로 정렬하는 법을 공부해서 반영해봐야 겠다.

소스 코드

⇒ css/sytle.css

#todo-form input { /* 입력창 */
    background: transparent;
    position: relative;
    width: 300px;
    left: 55px;
    color: #f6f6f6;
    font-family: 'BMHANNAPro';
    font-size: 25px;
    border: 2px solid #f6f6f6;
    border-radius: 40px;
    text-align: center;
}

Right Div

• 과거에 했던 프로젝트를 넣을 것이고, 현재 leftTop DIV에 있는 날씨 API 관련 부분을 이쪽으로 옮길 예정이다.
• 아직은 구체적 구현까지는 들어가지 않았고, 배치를 위한 영역 구분 까지만 하였다.

소스 코드

index.html

<!-- 우측 => 깃허브 / VELOG / 노션 등 프로필 -->
      <div class="right">
        <div id="rightTitle">
          <h1>About Irish</h1>
        </div>

        <div id="rightOne">
          <h1>rightOne</h1>
        </div>

        <div id="rightTwo">
          <h1>rightTwo</h1>
        </div>

        <div id="rightWeather">
          <h1>rightWeather</h1>
        </div>
      </div>

css/style.css

/***** 시작 - div.Right 세부 *****/
#rightTitle{ /* 우측 - 타이틀 */
    width: 450px; 
    height: 50px;
    line-height: 25px;
    text-align: center;
}    

#rightOne{ /* 우측 1번째 - Velog */
    width: 450px;
    height: 220px;
}

#rightTwo{ /* 우측 2번째 - Github */
    width: 450px;
    height: 220px;
}

#rightWeather{ /* 우측 3번째 - 아마 Weather 부분을 여기로 옮길 듯*/

}

/***** 종료 - div.Right 세부 *****/