Skip to content

2회차 과제 - 류승현 #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
RSH0770 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

2회차 과제 - 류승현 #9

RSH0770 wants to merge 4 commits into from

Conversation

@RSH0770
Copy link

@RSH0770 RSH0770 commented Apr 9, 2025 •
edited
Loading

신경써서 구현한 부분

<미디어쿼리 내 main-container>

  • 모바일로 해당 사이트에 접속할 경우, 모바일 환경에 맞는 화면 구성을 제공하도록 main-container에 flex-direction을 column으로 설정하여 left, right-container에 존재하는 요소들이 위에서 아래로 정렬되도록 구현했습니다.
@media screen and (max-width: 833px) {
  .main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

<body 구조 재구성 및 태그 변경>

  • 1회차에서 구현한 html 내부의 구조가 잘못 설계되어 다시 정리하고, 사용자 입력을 받기 위한 input과 button을 form 태그로 감싸도록 수정했습니다.
<body>
    <div class="main-container">
      <div class="left-container">
        <div class="left-top-container">
          ...
        <div class="left-center-container">
         ...
        </div>
        <div class="left-bottom-container">
          ...
      </div>
      <div class="right-container">
        <div class="right-top-container">
          ...
        </div>
        <form class="right-center-container">
          <div class="icon">
            <i class="fa-solid fa-user"></i>
            <input
              class="input"
              type="text"
              name="사용자명"
              placeholder="username"
            />
          ...
        </form>
        <div class="right-bottom-container">
          <button class="login-button">로그인</button>
        </div>
      </div>
    </div>
  </body>

질문

  • 부족한 부분이나 수정했으면 하는 부분이 있으면 피드백 부탁 드립니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@RSH0770