박다희 3주차 실습 과제 제출합니다

[daheeParkk]

로그인 페이지는 flex를 사용했고 회원가입 페이지는 grid를 사용해봤습니다.

• 로그인 페이지

  • 

• 회원가입 페이지

  • 

• 궁금한 부분

  • 가장 위에 있는 Sign up, Sign in 링크를 둘다 똑같이 했다고 생각하는데 위치가 너무 다릅니다. Sign up링크 위치가 Sign in보다 좀 더 오른쪽으로 가있는데 왜 그런지 모르겠습니다.
    • 관련 코드 (둘 다 같음)

      •   .link-container {
              position: relative;
              width: 95vw;
              height: 5vh;
          }
        
          .signup-link {
              position: absolute;
              right: 1%;
              top: 5%;
              font-size: small;
          }

[hoooooony]

질문에 대한 답은 signup에만 display grid속성이 들어가서 그런것 같습니다.

[daheeParkk]

signup에 있는 signin-link의 부모 요소는 relative를 가진 link-container라고 생각했는데 body가 grid인 것과 연관이 있는 건가요?

[hoooooony]

'signup에 있는 signin-link의 부모 요소는 relative를 가진 link-container라고 생각했는데' 이부분은 정확합니다. 하지만 body와 link-container가 연관이 있기 때문에 그 아래의 link들의 위치가 달라진것 같습니다.


link-container가 signup페이지의 경우 가운데에 있고 signin페이지의 경우 왼쪽정렬이 되어있기 때문에 두가지 요소의 위치가 달라진것입니다.

[daheeParkk]

앗 link-container가 왼쪽 정렬 되어있어서 그랬군요..! 감사합니다 ㅠㅠ

[hoooooony]

이런식으로 주는 것보다는 link-container의 display속성을 flex로 주고 flex-direction: row-reverse;속성을 통해 방향을 반대로 바꾸면 좀 더 쉬울것 같아요 이때 주의할 점은 link-container의 width는 100%여야 원하는 모양이 나오거에요. 너무 오른쪽으로 붙었다면 link-container의 오른쪽 패딩을 줘도 괜찮고 link-container에 margin-right를 주어도 괜찮을듯 합니다.

[daheeParkk]

오,, flex-direction: row-reverse; 속성을 주는 게 더 괜찮아 보이네요! 감사합니당