HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 2

안녕하세요

Hynn입니다.

 

이전 포스팅에서는 아이디,비밀번호 영역을 완성했습니다.

이제 이름과 같은 유저의 정보를 입력하는 영역을 완성해보도록 하겠습니다.

 

이미 앞선 포스팅을 따라오셧다면, 이제 어렵지 않게 할 수 있으리라고 생각합니다.

다만 몇가지 추가로 사용되는 Element 나 속성은 같이 설명하면서 진행하도록 하겠습니다.

==================================================================

1. Contents Part2 - Joinuser

2. Joinuser - HTML

3. Joinuser - CSS

==================================================================

 

1. Contents Part2 - Joinuser

우리는 이미 유사한 크기의 상자를 이전 포스팅에서 완성해서 적용한 바 있습니다.

하지만 각각의 목적이나, 입력하고자 하는 Text 는 엄연히 다르기때문에, 비슷하면서도 다른 Input 가 될 수 있습니다.

특히나 일부 Input 에는 예시글자가 배경화면처럼 고정되어 있는 영역도 존재하고, 특정 리스트를 선택하여 값을 넣도록 하는 새로운 기능도 접하게 되었기 때문에, 그 부분도 같이 살펴보도록 하겠습니다.

 

2. Joinuser - HTML

이미 설정된 영역에 마찬가지로 H3의 주제가 존재합니다.

이 주제를 기준으로 각각 생성해보도록 하겠습니다. 위의 항목들처럼, 당연히 텍스트를 클릭하면 입력창으로 이동되는 기능도 포함하고 있기 때문에, 그를 감안하여 HTML을 작성해야 합니다.

 

<div id="joinuser">
                <h3>
                    <label for="id4">이름</label>
                </h3>
                <span id="inputbox_id2">
                    <input type="text" name="id" id="id4">
                    </span>


                <h3>
                    <label for="id5">생년월일</label>
                </h3>
                <div id="birth">
                    <span id="inputbox_idx">
                        <input type="text" name="id" id="id5" maxlength="4" placeholder="년(4자)">
                    </span>
                    <span id="inputbox_idx">
                        <select class="ida">
                            <option value="선택" checked>선택</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                            
                    </span>
                    <span id="inputbox_idx">
                        <input type="text" name="id" id="idb" placeholder="일" maxlength="2">
                    </span>
                </div>
               
                
                <h3>
                    <label for="id6">성별</label>
                </h3>
                <span id="inputbox_id2">
                    <select id="id6" name="gender">
                        <option value="default" checked>성별</option>
                        <option value="male">남자</option>
                        <option value="female">여자</option>
                        <option value="noselect">선택 안함</option>
                    </select>
                    </span>
                
                <h3>
                    <label for="id7">본인 확인 이메일
                        <span>(선택)</span>
                    </label>
                </h3>
                <span id="inputbox_id2">
                    <input type="text" name="id" id="id7" placeholder="선택입력">
                </span>

 

길면서도 어렵지 않다고 생각하시면 더욱 편하게 볼 수 있습니다.

 

이전에 이미 설명드린 부분은 가볍게 짚고 넘어가보도록 하겠습니다.

먼저 각각의 H3 이름에, label을 부여하여, 텍스트를 클릭하면 Input 박스로 이동되도록 설계했습니다.

 

따라서 각각의 Input 박스와 Label 의 ID를 부여하였습니다.

하지만 생년월일의 경우 입력해야하는 것이 각각 연도,월,일 3가지므로, 최초로 입력해야하는 정보인 연도에 이동되도록 작성했습니다.

 

하지만, 이전에 사용하지 않은 속성구문이 몇가지 있어 이에 대한 설명을 드리도록 하겠습니다.

먼저 연도의 경우 이전에 아이디에서 사용했듯이, 최대입력가능한 Text 를 4자로 제한합니다. 따라서 4자 이상 입력할 수 없으므로, 년도는 4자리의 숫자가 입력되어야 합니다.

 

하지만 기존의 Type 에서 password 와 같이 유형을 지정하지 않고 text 로 한 것은, number 로 할 경우, 숫자를 1씩 올리고 내리는 메뉴가 활성화 되기 때문에, text 로 지정했습니다.

 

그리고 연도와, 본인 확인 이메일 섹션에서는 Input box 내에 설명이 포함되어 있지만, 이는 아이디/비밀번호 영역에서 시도한 것과는 다른 형태로 사용자가 텍스트를 입력하면 사라지는 형태입니다.

 

이는 Input Elemeent 안에 Pleaceholder 라는 속성을 부여하고, 보여주고자 하는 텍스트를 입력하면 그대로 나타나게 됩니다.

이제 HTML 에서 작성할 기본 요소는 모두 마무리 되었습니다.

 

CSS로 넘어가보도록 하죠.

 

3. Joinuser - CSS

 

이제 이전의 ID/PW 영역처럼 CSS로 화면을 실제와 같이 꾸며보도록 하겠습니다.

하지만 이전에 사용한 설정값을 그대로 사용할 수 있는 부분도 존재하고, 일부 변경해야 하는 요소도 존재합니다.

 

그에 맞추어 한단계씩 진행해보도록 하겠습니다.

 

#join_form > #joinuser {
    width:460px;
    height:380px;
    margin:0 auto;
}

#join_form > #joinuser > H3{
    margin:19px 0 8px 0;
    font-size:14px;
}

#join_form > #joinuser > #inputbox_id2 > #id4{
    position:relative;
    border: none;
    width:100%;
    height:29px;
    box-sizing: border-box;
    display: block;
    outline: 0;
    padding-right: 25px;
}


#join_form > #joinuser > #inputbox_id2 > #id6{
    border: none;
    width:440px;
    height:29px;
    box-sizing: border-box;
    display: block;
    outline: 0;
    margin-right:15px;
}

#join_form > #joinuser > #inputbox_id2 > #id7 {
    border: none;
    width:100%;
    height:29px;
    box-sizing: border-box;
    display: block;
    outline: 0;
    padding-right: 25px;
}

#join_form > #joinuser > #birth {
    width: 460px;
    height: 51px;
    display:flex;
    justify-content:space-between;
    
}

#join_form > #joinuser > #birth > #inputbox_idx{
    display: inline-block;
    border: 1px solid #dadada;
    box-sizing: border-box;
    background:white;
    height:32px;
}


#join_form > #joinuser > #birth > #inputbox_idx > #id5 {
    border:none;
    width: 140px;
    height:30px;
    padding:15px;
    box-sizing: border-box;
    outline: 0;
}

#join_form > #joinuser > #birth > #inputbox_idx > .ida {
    width:125px;
    height:30px;
    border:none;
    padding: 5px;
}


#join_form > #joinuser > #birth > #inputbox_idx > #idb {
    border:none;
    width: 125px;
    height:30px;
    padding:15px;
    box-sizing: border-box;
    outline: 0;
    margin-right:15px;
}

#inputbox_id2{
    display: inline-block;
    width:100%;
    height: 51px;
    padding: 10px 110px 14px 10px;
    border: 1px solid #dadada;
    box-sizing: border-box;
    background:white;
}

HTML 에서 각각의 요소를 지정한 값을 가지고 이제 CSS를 적용했습니다.

 

이 적용한 요소는 각각의 설정을 달리 해야 합니다.

먼저 H3 요소는 모든 항목에서 동일한 값을 가지고 있기 때문에, H3 를 선택하여 모두 일정값의 마진을 부여합니다.

또한 통일성을 위해 idpw 영역에서 사용한 동일한 Font-size 를 설정합니다.

 

그리고 난 뒤 

이름, 본인 확인 이메일은 동일한 형태의 Input box 를 가지고 있기 때문에, 동일하게 적용해줍니다. 이는 위의 IDPW 작업할 때 사용한 형태의 반복설정입니다.

 

이제 생년월일과, 성별을 설정해야 합니다.

하지만 성별은 기존의 input box와 사이즈가 같으므로, 무리가 없이 설정할 수 있고, INPUT 이 아니라, Select 문을 사용하여 메뉴화 하였습니다.

이 메뉴는 Select 리스트를 출력하는 화살표 표시가 가장 끝 단에 이동되야 하므로, 넓이를 다르게 지정하여야 합니다.

이 부분만 성별에 맞추어 설정을 적용합니다.

 

이제 생년월일을 적용해봅시다.

 

생년월일은 3개의 Input 형태로 설정이 되어 있고, 월 항목은 Input 이 아니라 Select 로 설정되어 있습니다.

이 설정을 위해서는 정해진 넓이에 Box 를 일정한 간격으로 배치해야 합니다.

 

이를 위해 Display Flex 라는 속성을 부여하여 간격을 적절하게 배치해야 합니다.

이 Display Flex 속성은 별도로 작성된 포스팅에서 따로 설명을 드리도록 하겠습니다.

 

여기서 각각의 위치를 설정하기 위해 영역을 감싸는 DIV를 한개 더 생성하여 2개의 INPUT / 1개의 Select 를 감싸는 작업을 마쳤습니다.

그리고 난 뒤 Display Flex 를 부여하고, 그와 함께 사용되는 위치배열을 사용하게 되는데, 이 경우에는 하나의 부가속성만으로도 해결이 가능합니다.

 

Justify-content 속성을 추가로 부여한 뒤 , 이를 통해 Space-between 으로 정렬하면, 각 끝에 있는 박스는 지정한 넓이의 양 끝 부분, 월은 당연히 가운데에 위치하게 됩니다.

 

 

=================================================

 

어려우면서도 어렵지 않은 Clone, 이제 마지막 Contents 인, joinnumber 에서 찾아뵙겠습니다.

 

감사합니다.