instagram 로그인 클론

2주차 첫 미션으로 인스타그램 클론코딩이 주어졌다.
깜박 하고 블로그 작성용 잘못 만든 코드를 저장해놓지 못했다. 박스 자체가 단순해서 금방 끝날 줄 알았으나 삽질의 시작이었다.
이유로는 사전스터디때 공부한 absolute와relative 때문이었다. 이 속성의 특징은 부모의 좌표를 기준으로 자식의 좌표를
움직일 수 있다. 그래서 나는 박스 세로 정렬을 부모를 기준으로 해서 정렬하려 했다. 그랬더니 나타나는 현상이 모든 박스들이
모여서 합쳐져 버린 것 이다. 이는 이 속성의 가장 큰 특징으로 모든 태그들을 붕 띄어 겹쳐버리는 특징이 있었다.
이 속성을 주로 박스의 이동이 아닌 박스위에 겹쳐진 아이콘들을 올릴 때 사용 하는 것이다.
2시간 넘게 헤매다 레이아웃에 관련한 검색을 해서 flex라는 속성을 다시 기억하게 되었다. 레이아웃을 구성하는 속성으로는
float, inline-block, flex 가 있다. float와inline-block 은 구성하는데 살짝 귀찮은 요소들을 가지고
있기 때문에 가장 편리하고 많이 사용 하는 속성은 flex이다.

flex의 사용법을 알아보면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Westagram</title>
    <link rel="stylesheet" href="style.css">
    
<body>
  <div class="container">
      <header class="logo_name">
        <span class="name">westargram</span>
      </header> 
      <div>     
        <div class="login">
          <input class="input-login" type="id" placeholder="전화번호, 사용자 이름 또는 이메일">
          <input class="input-pw" type="password" placeholder="비밀번호">
          <button class="button">로그인</button>
        </div>        
      </div>
      <div class="password_search">
        <span>비밀번호를 잊으셨나요?</span>
      </div> 
  </div>
  <script type="text/javascript" src="index.js"></script>    
</body>
</html>

input과 button의 부모가 되는 class='login'에 display: flex;를 주면 된다.
기존에 input과 button 이 가지고 있는 기본속성으로는 block 가 있다 이는 태그안의 내용이 차지하는 공간만큼의 블록을 가지고 있다.
이로 하여금 세로로 정렬 되어지지 않고 가로로 정렬되어진다. 자 이대로 flex만 줬다고 해서 세로정렬이 되지는 않는다.
세로정렬을 주려면 다음과 같다.

.login{
  margin: 10px 40px;
  display: flex;
  flex-direction: column;
}

flex-direction: column;
를 사용해 세로기준 정렬을 할 수 있다.

.password_search{
  display: flex;
  justify-content: center;
  margin-top: 180px;
  cursor: pointer;
  color: #133f6b;
  font-size: 14px;
}

가운데 정렬은 justify-content: center;를 사용 하면 된다
두가지 안에는 여러 속성들을 가지고 있다. 다 적용을 해보면서 사용해봐야 속성에 대한 이해도가 높아질 것 같다.
레이아웃을 구성하는게 지금 당장 완벽한 이해는 어렵겠지만 이번 과제를 통해 최대한 이해를 하고 넘어가줘야 겠다.

Author And Source

이 문제에 관하여(instagram 로그인 클론), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dev_marco/instagram-로그인-클론

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

instagram 로그인 클론

Author And Source

좋은 웹페이지 즐겨찾기