[Way to PM] 프론트엔드 - 회원가입 구현

2024. 1. 20. 15:52ㆍ[Way to PM] 프론트 엔드

0. 레퍼런스

1. WHY? 과제를 통해 얻고자 하는 목표

1) 최대한 시맨틱하게 checkbox, radio 등을 정렬해본다.

2)동시에  정렬을 최대한 정교하게 맞춰봄으로써 구체적인 css적용 규칙을 익힌다.

2. 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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }

        fieldset {
            border: none;
        }

        form {
            width: 400px;
        }

        form p, form h2 {
            text-align: center;
        }

        div.basicLogin {
            display: flex;
            flex-direction: column;
        }

        div.basicLogin input {
            width: 300px;
            box-sizing: border-box;
            height: 40px;
        }

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

        div.gender {
            display: flex;
            /*justify-content: space-between;*/
        }

        div.gender legend {
            margin-right: 68px;
        }

        div.tech {
            display: flex;
            justify-content: space-between;
        }

        div.techLabel {
            display: flex;
            width: 300px;
            flex-wrap: wrap;
        }

        button {
            color: white;
            background-color: blue;
            border: none;
            width: 100%;
            height: 60px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<section>
    <form action="">
        <h2>회원가입</h2>
        <p>원활한 서비스를 이용을 위해 회원가입을 해주세요</p>
        <fieldset>
            <div class="basicLogin">
            <label>
                아이디 <input type="text" required name="userId">
            </label>
            <label>
                이메일 <input type="email" required name="userEmail">
            </label>
            <label>
                비밀번호 <input type="password" required name="userPw">
            </label>
            <label>
                닉네임 <input type="text" required name="userName">
            </label>
            </div>
        </fieldset>

        <fieldset>
            <div class="gender">
            <legend>성별</legend>
            <label>
                <input type="radio" name="gender" value="men" required>남성
            </label>
            <label>
                <input type="radio" name="gender" value="women"> 여성
            </label>
            <label>
                <input type="radio" name="gender" value="none"> 선택 안함
            </label>
                </div>
        </fieldset>

        <fieldset>
            <div class="tech">
            <legend>사용 기술</legend>
                <div class="techLabel">
            <label>
                <input type="checkbox" name="skill" value="html"> HTML
            </label>
            <label>
                <input type="checkbox" name="skill" value="css"> CSS
            </label>
            <label>
                <input type="checkbox" name="skill" value="javascript"> JavaScript
            </label>
            <label>
                <input type="checkbox" name="skill" value="python"> Python
            </label>
            <label>
                <input type="checkbox" name="skill" value="github"> GitHub
            </label>
            <label>
                <input type="checkbox" name="skill" value="postgresql"> PostgreSQL
            </label>
                </div>
            </div>
        </fieldset>
        <button>회원가입</button>
    </form>
</section>
</body>
</html>

3. WHAT? 구현 결과

Document

회원가입

원활한 서비스를 이용을 위해 회원가입을 해주세요

성별
사용 기술

4. 배운점 및 자기평가

1) 이번엔 최초 margin값을 0으로하지 않고 진행했는데 인풋의 정렬이 자꾸 맞지 않아서 결국 전체 마진 0으로 맞추고 진행. 그게 훨씬 깔끔하다

 

2) HTML에서 최대한 시맨틱하게 짜보기 위해 section, label태그를 활용하려고 하니까 부모-자식요고 간의 관계가 복잡해져서 css 스타일 구현을 위해 div가 들어갈 수 밖에 없었다(현재로썬). 그래도 개발자 도구로 검사했을 때 훨씬 보기 깔끔해보였다

 

3) 정렬을 위해서 부모 container에 flex를 적용하고, 다시 그 손자 요소를 정렬하기 위해 자식요소에게 flex를 다시 주는 식으로 진행했는데 자꾸 CSS가 한 줄 한 줄 늘어갔다. 더 깔끔한 방법이 없는지 고민해봐야겠다.

 

4) 요소간 간격은 마진만주면 되서 따로 하진 않았다

 

5) 처음엔 fieldset에 css를 적용시켜 정렬하려고 했으나 legend 요소에 css가 적용되지 않았다. 일종의 버그로서 div로 감싸고 적용해야 한다는 것을 배워서 div적용 후 정렬했더니 legend도 정렬되었다. 아마 구획을 나누는 의미를 가진 요소이기 때문이지 않을까 한다.

 

6) fieldset은 여러 form관련 요소들을 시각적으로 그룹화하고 의미적인 섹션을 형성하는데 사용된다. legend와 함께 사용된다. 하지만 첫 번째 fieldset(아이디, 비밀번호, 이메일 등)에 legend로 딱히 들어갈게 없어서 안넣었다. 직전에 section태그의 제목으로 h태그의 회원가입이 있기 때문에 스크린리더를 고려하더라도 문제가 없다고 판단했다. 만약 넣게된다면 display: none 처리를해서 넣을 수도 있다.

 

자기 평가:

1) 이번에도 하나하나 찾아보고 하느라 시간이 조금 걸렸지만 위의 개념을 명확히 하는데 도움이 되었다.

2) 일단 적용해보자! 그게 훨씬 빠르다

'[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] 프론트엔드 - 반응형 Input 요소 만들기  (0) 2024.01.19
[Way to PM] 프론트엔드 - 로그인 화면 구현  (0) 2024.01.19
[Way to PM] 프론트 엔드 - HTML, CSS를 이용한 단순 게시판 모습 구현  (0) 2024.01.19

관련글

티스토리툴바