[Way to PM] 프론트엔드 - 반응형 Input 요소 만들기

2024. 1. 19. 17:18ㆍ[Way to PM] 프론트 엔드

0. 레퍼런스

1. 우선순위

1) 웹에서 좌우 넓이에 따라 반응하는 반응형 요소 CSS로 구현

2. WHY - 해당 학습하는 목적

1) 특정 요소에 width값을 지정하면 반응형으로 되지 않음

2) 반응형으로 구현하는 방법을 몰라 사용자 경험을 더욱 좋게 만들 수가 없음

3) 반응형으로 구현하는 방법을 습득해 더 좋은 사용자 경험을 제공할 역햘 습득

3. HOW - 구현 과정

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>[과제]로그인</title>
</head>
<style>
    .loginBox {
        /*width: 400px;*/
        width: 100%; /* 초기 크기를 100%로 설정 */
        min-width: 200px; /* 최소 크기 지정 */
        max-width: 400px;
    }
    /*text-align의 기준점*/

    :not(.loginBox) {
        text-align: center;
        margin: 0;
        padding: 0;
    }
    /*불필요한 마진, 패딩값을 덜어내고 요소들을 가운데로 정렬시키기 위함*/

    button {
        color: white;
        background-color: blue;
        border: none;
        width: 400px;
        height: 60px;
        border-radius: 10px;
        font-size: 20px;
        font-weight: bold;
    }

    input.id {
        height: 40px;
        width: 280px;
        border-radius: 5px;
        border-color: whitesmoke;
        box-shadow: none;
    }

    label {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .idsave {
        margin-right: 295px;
    /*justify-content: space-between를 피하기 위함    */
    }

</style>
<body>
<section>
    <div class="loginBox">
    <h1>로그인</h1>
    <p>아이디와 비밀번호를 입력하고 로그인하세요</p>
    <form method="get">
    <label>
        아이디
        <input type="text" class="id">
    </label>

    <label>
        비밀번호
        <input type="password" class="id">
    </label>

        <label class = idsave>
    <input type="checkbox" name="idsave" id="idsave">
    아이디 저장
        </label>

    <button>로그인</button>
    </form>
    </div>
</section>
</body>
</html>

*

width: 100%; /* 초기 크기를 100%로 설정 */
min-width: 200px; /* 최소 크기 지정 */
max-width: 400px;

width: 400px;로 고정되어 있던 코드를 위 같이 수정

4. WHAT - 구현 결과

[과제]로그인

로그인

아이디와 비밀번호를 입력하고 로그인하세요

5. 배운점 및 자기평가

1) width를 100%로 지정하면 본래 부모요소의 크기에 맞게 지정되는데 min-width와 max-width를 통해 구현 가능

 

적용점:

 궁금한 것은 휘발되기전에 최대한 빨리 찾아보고, 학습하고, 적용하고 내것으로 만든다.

'[Way to PM] 프론트 엔드' 카테고리의 다른 글

[Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Main)  (1) 2024.01.28
[Way to PM] 프론트 엔드 - HTML, CSS JS로 랜딩 페이지 구현(Header)  (0) 2024.01.24
[Way to PM] 프론트엔드 - 회원가입 구현  (0) 2024.01.20
[Way to PM] 프론트엔드 - 로그인 화면 구현  (0) 2024.01.19
[Way to PM] 프론트 엔드 - HTML, CSS를 이용한 단순 게시판 모습 구현  (0) 2024.01.19

관련글

티스토리툴바