안녕하세요.
Hynn 입니다.
이전 포스팅에서는 Header 영역을 작성했고, 실제 홈페이지와 유사하게 작성했습니다.
이제 메인무대가 되는 회원가입 부분의 Contents 를 작성해보도록 하겠습니다.
개발자는 아무래도 주어진 언어를 가지고 활용하는 직업이 되는것이니 만큼,
이전 포스팅에서 다루었던 Element 위주로 어떻게 활용이 되었는지를 가지고 작성해보도록 하겠습니다.
==================================================================
1. Contents Part1 - Joinidpw
2. Joinidpw - HTML
3. Joinidpw - CSS
==================================================================
1. Contents Part1 - Joinidpw
공간은 이미 설정이 완료 되었기 때문에, 이제 아이디 상자부터 완성해보도록 하겠습니다.
크게 영역을 나누면, ID,Password 가 입력되는 아이디 비밀번호 확인까지의 영역 1을 Joinidpw 영역으로 분류하겟습니다.
이 영역을 살펴보면, 박스의 크기는 같고, 아이디, 비밀번호, 비밀번호 확인의 3가지 영역은 같은 크기의 글씨를 가졌습니다.
또한 이 영역에 대해서는 목적이 있는 텍스트다 보니, H1~6 의 Element 가 가장 적당해보입니다.
하지만 글씨의 크기는 그다지 크지 않으니, H3 로 작성하겠습니다.
또한, 각각의 박스안에는 "@naver.com", "자물쇠" 표시가 존재하는데, 이에 대한 차이 빼고는 같은 크기의 박스로 보입니다.
또한 아이디, 비밀번호 텍스트에 마우스 커서를 대면 클릭할 수 있는 표시가 나타나고, 클릭시, 박스로 텍스트를 입력할 수 있도록 이동됩니다.
우리는 이를 최대한 같은 방법으로 구현해보도록 하겠습니다.
2. Joinidpw - HTML
<HTML 작성예시>
<div id="join_form">
<div id="joinidpw">
<h3 id="title">
<label for="id">아이디</label>
</h3>
<span id="inputbox_id">
<input type="text" name="id" maxlength="20" id="id">
<span id="address1">@naver.com</span>
</span>
<h3 id="title">
<label for="id2">비밀번호</label>
</h3>
<span id="inputbox_id">
<input type="password" name="id2" id="id2">
<span id="address2"></span>
</span>
<h3 id="title">
<label for="id3">비밀번호 재확인</label>
</h3>
<span id="inputbox_id">
<input type="password" name="id3" id="id3">
<span id="address3"></span>
</span>먼저 아이디, 비밀번호, 비밀번호 확인의 3가지 영역을 작성합니다.
위에서 언급한데로, 각각의 주제를 H3 으로 작성합니다.
하지만 여기서 아이디, 비밀번호, 비밀번호 재확인 텍스트에 마우스커서를 올리면 입력박스로 커서가 이동되도록 설계하기 위해서 "Label" 이라는 Element 를 사용했고, 위치 지정을 위해 ID값을 각각 id1, id2, id3 으로 부여하였습니다.
이는 예를 들어, 아이디라는 텍스트에 마우스를 대면, ID1 입력창으로 이동할 수 있도록 각각의 이동주소를 부여한 것으로 이해하면 쉽습니다.
따라서 비밀번호, 비밀번호 재확인 역시 각각의 아이디를 부여해야 하므로, ID2, ID3 으로 개별적으로 부여하게 됩니다.
이 Label Element 에 대한 설명은 아래의 예제를 참고하시면 도움이 될 것으로 생각됩니다.
Label 작성 방법
1. Label 을 설정하고자 하는 텍스트를 Label Element 로 감싼다
2. 이동시키고자 하는 Input-box 에 ID를 부여한다.
3. Label 에 For="ID명" 을 부여하여 연결한다.
See the Pen css-display-inline-block: inline by Hynn-Hyunwoong (@Hynn-Hyunwoong) on CodePen.
input 에 ID는 text 타입, 비밀번호는 각각 Password 를 부여했습니다. ID에는 maxlength 라는 속성을 부여하여 최대 20글자만 입력할 수 있도록 부여하면, 아이디의 입력가능한 최대 글자수는 20글자로 제한을 설정했습니다.
그리고 난 뒤 span Element 를 이용하여 각 박스별 오른쪽에 @naver.com, 자물쇠를 를 배치하고자 각각의 span 안에 감싸는 형태로 작성을 했습니다.
이제 HTML의 작성은 완성이 되었습니다.
CSS 작성을 살펴보도록 하죠.
2. Joinidpw - CSS
#join_form > #joinidpw {
width : 460px;
height : 270px;
margin:0 auto;
}
#join_form > #joinidpw > #title {
margin:19px 0 8px 0;
font-size:14px;
}
#join_form > #joinidpw > #title > label {
cursor: pointer;
}
#join_form > #joinidpw > #inputbox_id {
display: inline-block;
width:100%;
height: 51px;
padding: 10px 110px 14px 10px;
border: 1px solid #dadada;
box-sizing: border-box;
background:white;
}
#join_form > #joinidpw > #inputbox_id > #id {
border: none;
width:70%;
height:29px;
position: relative;
display: block;
outline: 0;
padding-right: 25px;
}
#join_form > #joinidpw > #inputbox_id > #id2 {
border: none;
width:70%;
height:29px;
position: relative;
display: block;
outline: 0;
padding-right: 25px;
}
#join_form > #joinidpw > #inputbox_id > #id3 {
border: none;
width:70%;
height:29px;
position: relative;
display: block;
outline: 0;
padding-right: 25px;
}
#join_form > #joinidpw > #inputbox_id > #address1 {
position:absolute;
top:40%;
right:33%;
font-size: 15px;
color:#8e8e8e;
}
#join_form > #joinidpw > #inputbox_id > #address2 {
display: inline-block;
position:absolute;
width: 24px;
height: 24px;
background-image: url(https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png);
background-repeat: no-repeat;
background-size: 125px 75px;
top:60%;
right:33%;
}
#join_form > #joinidpw > #inputbox_id > #address3 {
display: inline-block;
position:absolute;
width: 24px;
height: 24px;
background-image: url(https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png);
background-repeat: no-repeat;
background-size: 125px 75px;
top:80%;
right:33%;
}HTML에 비해서 할일이 참 많은 것 처럼 보이지만,
한가지를 완성하면, 대다수는 복사하여 붙여넣고, ID호출만 변경해주면 쉽게 적용이 됩니다.
CSS나 HTML은 항상 컨텐츠의 순서대로 배치하는것이 Code-Review 에서도 위치를 찾기가 손쉽습니다.
따라서, Join_form 을 기준으로 하위 Element 순으로 배치하는것을 기본으로 설정했습니다.
먼저 H3 에는 ID를 title 로 부여했습니다.
이 부여한 타이틀에 아이디와 input 박스의 간격을 설정하기 위해 margin 을 부여했고, 글자 크기를 설정합니다.
그 뒤에 Label Element 에 마우스를 올려두면, 올려두었다는 구분을 하기 위해 Cursor 라는 속성을 사용합니다. 여기서 Pointer 를 부여하면, 마우스를 올려두었을때 클릭하기 위한 아이콘으로 변경되는 것을 볼 수 있습니다.
그 뒤에 span 은 모두 동일한 모양새의 input 박스를 감싸고 있기 때문에, span은 하나의 id를 부여합니다. 저는 여기서 inputbox_id 라는 명칭을 부여했고, 이를 설정하기 위해 속성을 여러가지를 부여해보도록 하죠.
먼저 Display 는 Inline-block 을 부여하여, span 이 가지고 있는 inline 속성에서는 넓이,높이 설정을 할수 없기 때문에, 부여하고,
넓이와 높이를 각각 부여합니다.
그리고 난 뒤 padding 을 사용하여 실제 텍스트 입력이 정렬될 수 있도록 간격을 설정합니다.
당연히 사이즈가 커지는 것을 방지하기 위해 box-sizing 을 적용합니다.
배경색은 기존의 전체화면의 배경색이 아니라, 강조효과가 나타나도록 #fff 혹은 White 로 색상을 지정합니다.
그 뒤, input 을 설정합니다.
input 역시 display 속성을 block 으로 부여하고, 넓이와 높이를 부여합니다.
또한 Padding 을 부여하여 일정 간격을 조정합니다. 여기서 늘어나도 크게 관계가 없을 거 같아, Box-sizing 은 적용하지 않았습니다.
그리고 뒤에 나타날 텍스트를 위해, Position 에서 Relative 를 부여하고, input 영역을 선택시 강조되는 라인을 제거하기 위해 Outline 을 0으로 부여합니다.
하지만 실제 Input 영역은 span 안에 감싸져 있기 때문에, 크기가 맞지 않아, 눈속임 효과를 부여하기로 하였습니다.
먼저 input 의 border, 즉 라인으로 구분된 영역은 none 을 부여하여, 없는 것 처럼 표시합니다.
그런 뒤 input 을 감싸고 있는 span 에 반대로 border 를 부여하여, 하나의 박스처럼 표시하도록 설정합니다.
그런 뒤, 각각 address1,2,3 으로 부여된 @naver.com, 자물쇠에 Position 을 Absolute 로 부여해, 위로 표시되도록 값을 부여하고,
top,bottom, left,right 를 사용해 위치를 조절했습니다.
조건에 따라 나타나는 경고 혹은 그림이 변경되는 애니메이션은 이후에 다루게 될 JavaScript 를 사용해야 하므로, 건너 뛰도록 합시다.
위의 단계를 잘 따라하셨다면, 이제우리는 아래와 같은 화면을 만나볼 수 있습니다.
========================================================
다음 포스팅에서는 이제 아래에 적용된 joinuser, joinnumber 영역을 작성해보도록 하죠.
감사합니다.
'개발공부일지 > CSS' 카테고리의 다른 글
| HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Footer (0) | 2022.10.28 |
|---|---|
| HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 3 (0) | 2022.10.26 |
| HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Contents 2 (0) | 2022.10.26 |
| HTML/CSS 따라하기 기본 Naver 회원가입 페이지 Clone - Header (0) | 2022.10.25 |
| HTML/CSS 따라하기 기본 - Layout 설정 (0) | 2022.10.24 |
댓글