HTML CSS

취업사이트 만들기) 로그인 페이지 작성

조충희 2025. 6. 12. 18:11

https://notion6780.tistory.com/110

 

지난 시간에는 취업사이트 대략적인 설계와 준비작업을 진행했고

 

이번에는 시안을 참고해 html과 css파일을 설계했다.

 

시안

 

두 파일의 스타일에 공통점이 많으므로 하나의 css파일로 스타일을 정의한다.

signin.html

signup.html

signup.css 

 

로그인 페이지

<body>
  <!-- 헤더 -->
  <header>
    <div class="inner">
      <div class="head__container">
        <div class="head--title" onclick="location.href='mainscreen.html';">Humanist</div>
        <div class="head--buttoncontainer">
          <div class="head--button" onclick="location.href='signin_01.html';">로그인</div>
          <div class="head--button" onclick="location.href='signup_01.html';">회원가입</div>
        </div>
  </header>
  <!-- 섹션 -->
  <section>
    <div class="inner">
      <div class="main--container">
        <div class="main--title">SIGN IN</div>
        <div class="main--textcontainer">
          <div class="main--texttitle">아이디</div>
          <input type="text" class="main--textinputbox" placeholder="아이디를 입력해주세요"></input>
        </div>
        <div class="main--textcontainer">
          <div class="main--texttitle">비밀번호</div>
          <input type="text" class="main--textinputbox" placeholder="비밀번호를 입력해주세요"></input>
        </div>
        <div class="main--button" onclick="location.href='mainscreen_login.html';">로그인</div>
      </div>
    </div>
  </section>
  <!-- 푸터 -->
  <footer class="signin_01">
    <div class="inner">
      <div class="footer--message">
        Copyright(c)2024 홍길동 All rights reserved.
      </div>
    </div>
  </footer>
</body>

 

회원가입

<!-- 헤더 -->
  <header>
    <div class="inner">
      <div class="head__container">
        <div class="head--title" onclick="location.href='mainscreen.html';">Humanist</div>
        <div class="head--buttoncontainer">
          <div class="head--button" onclick="location.href='signin_01.html';">로그인</div>
          <div class="head--button" onclick="location.href='signup_01.html';">회원가입</div>
        </div>
      </div>
    </div>
  </header>
  <!-- 섹션 -->
  <section>
    <div class="inner">
      <div class="main--container">
        <div class="main--title">SIGN UP</div>
        <div class="main--idcontainer">
          <div class="main--idinnercontainer">
            <div class="main--texttitle">아이디</div>
            <input type="text" class="main--textinputbox" id="id--input" placeholder="아이디를 입력해주세요">

          </div>
          <div class="main--idduplicate">중복확인</div>

        </div>
        <div class="main--textcontainer">
          <div class="main--texttitle">이름</div>
          <input type="text" class="main--textinputbox" placeholder="이름을 입력해주세요">
          <div class="main--textinputbox"></div>
        </div>
        <div class="main--textcontainer">
          <div class="main--texttitle">비밀번호</div>
          <input type="text" class="main--textinputbox" placeholder="비밀번호를 입력해주세요">
        </div>
        <div class="main--textcontainer">
          <div class="main--texttitle">비밀번호 확인</div>
          <input type="text" class="main--textinputbox" placeholder="비밀번호를 입력해주세요">

        </div>
        <div class="main--button" onclick="location.href='mainscreen_login.html';">회원가입</div>
      </div>
    </div>
  </section>
  <!-- 푸터 -->
  <footer class="signup_01">
    <div class="inner">
      <div class="footer--message">
        Copyright(c)2024 홍길동 All rights reserved.
      </div>
    </div>
  </footer>

 

css

전체

/* 전체 */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    color: #555555;
}
a {
    all: unset;
}
.inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

 

헤더부분

/* 헤더 */
header {
    width: 100%;
    height: 5rem;
    padding: 1rem;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid #e5e4e2;
}
.head__container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.head--title {
    font-weight: 900px;
    font-size: 2rem;
    color: #5d6ac0;
}
.head--title:hover {
    cursor: pointer;
}
.head--buttoncontainer {
    display: flex;
    gap: 1rem;
}
.head--button {
    font-weight: bold;
    font-size: 0.8rem;
}
.head--button:hover {
    cursor: pointer;
}

 

메인섹션

/* 섹션 */
section {
    width: 100%;
    background-color: #fff;
}
.main--container {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main--title {
    font-size: 2rem;
    font-weight: bold;
    padding-top: 5rem;
    padding-bottom: 4rem;
}
.main--idcontainer {
    width: 25rem;
    margin: 0.5rem;
    display: flex;
    align-items: center;
}
.main--idinnercontainer {
    width: 20rem;
    padding: 0.8rem 0;
    margin-right: 1rem;
    border-bottom: 1px solid #e5e4e2;
    display: flex;
}
.main--idduplicate {
    width: 8rem;
    height: 3rem;
    line-height: 2.8rem;
    border: 1px solid #5D6AC0;
    border-radius: 2rem;
    text-align: center;
    color: #5D6AC0;
    font-weight: bold;
}
.main--idduplicate:hover {
    cursor: pointer;
}
.main--textcontainer {
    width: 25rem;
    margin: 0.5rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid #e5e4e2;
    display: flex;
}
.main--texttitle {
    width: 7rem;
    flex-shrink: 0;
}
.main--textinputbox {
    font-size: 0.8rem;
    border-width: 0;
}
.main--button {
    width: 25rem;
    height: 3rem;
    margin: 2rem;
    background-color: #5D6AC0;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    line-height: 3rem;
    border-radius: 2rem;
    z-index: 1000;
}
.main--button:hover {
    cursor: pointer;
}

 

푸터

/* 푸터 */
footer {
    width: 100%;
    height: 10rem;
    background-color: #e5e4e2;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
}
.footer--message {
    width: 100%;
    height: 100%;
    line-height: 10rem;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
}

 

미디어쿼리

inner

/* 미디어쿼리 사용 */
@media (min-width: 1200px) {

    /* 화면의 크기가 1200px보다 크면 */
    .inner {
        max-width: 1200px;
    }
}

 

 

 

태블릿 환경을 고려한 미디어쿼리 

@media (max-width: 768px) {
    .head--title {
        font-size: 1.6rem;
    }
    .main--title {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }
    .main--textcontainer {
        width: 18rem;
    }
    #id--input {
        width: 6rem;
        text-overflow: ellipsis;
    }
    .main--button {
        width: 18rem;
    }
    .main--idcontainer {
        width: 18rem;
    }
    .main--idinnercontainer {
        width: 12rem;
        padding: 0.8rem 0;
        margin-right: 1rem;
        border-bottom: 1px solid #e5e4e2;
        display: flex;
    }
    .main--idduplicate {
        width: 6rem;
        height: 2.2rem;
        line-height: 2rem;
        font-size: 0.8rem;
    }
}

 

줌인 줌아웃시 푸터 부분을 조절하기 위한 미디어쿼리

@media (max-height: 660px) {
    .signin_01 {
        position: relative;
    }
}

@media (max-height: 800px) {
    .signup_01 {
        position: relative;
    }
}

footer 부분은 position: fixed로 위치가 정의돼 있어서 줌인을 하면 메인섹션을 덮게 된다. 해결책은 1. 줌인을 금지하거나 2.미디어쿼리를 이용해 세부조정을 해주는 것이다.

 

다음은 마이페이지 작성

https://notion6780.tistory.com/112

 

취업사이트 만들기) 마이페이지 작성

https://notion6780.tistory.com/110 https://notion6780.tistory.com/111 1.취업사이트 설계2.로그인페이지 작성이 끝났다. 이번에는 회원을 위한 마이페이지를 작성해봤다. header> div class="inner"> div class="head__container"

notion6780.tistory.com

 

'HTML CSS' 카테고리의 다른 글

취업사이트 만들기) 마이페이지 작성  (0) 2025.06.12
취업사이트 만들기) 준비작업  (1) 2025.06.09
html/css) 플렉스 flex  (2) 2025.06.04
html/css) 포지션, 트랜지션  (1) 2025.06.04
html/css) 폰트 font 관련 속성  (0) 2025.06.03

'HTML CSS'의 다른글

  • 현재글취업사이트 만들기) 로그인 페이지 작성

관련글

티스토리툴바