목차
- 목표
- HTML
- CSS
- 오류 및 수정
- 추가내용(Input:focus)
- 최종화면
1. 목표
- 오늘의 목표는 네이버 회원가입 화면을 클론코딩 하는 것입니다.
2. HTML
- 우선 부분을 나누어서 생각했습니다.
<body>
<div class="join_group mt100">
<h3>아이디</h3>
<span class="ps_box">
<input type="text">
<span>@naver.com</span>
</span>
</div>
<div class="join_group mt100">
<h3>비밀번호</h3>
<span class="ps_box">
<input type="password">
<span></span>
</span>
</div>
<div class="join_group mt100">
<h3>비밀번호 재확인</h3>
<span class="ps_box">
<input type="password">
<span></span>
</span>
</div>
</body>
- HTML의 내용은 크게 어려운 것은 없었습니다.
- ID 입력 부분에 뒤에 @naver.com을 고정으로 하기 위해 <span>을 주었습니다.
- 입력이 가능하도록 하기 위해 input 박스 type을 text로 주었고 비밀번호 부분에는 * 표시로 보여지기 위해 password로 주었습니다.
3. CSS
- CSS의 전체적인 내용은 아래와 같습니다.
*{
margin: 0;
padding: 0;
}
ul,li{list-style:none;}
a{text-decoration:none;}
body{
background: #f5F6F7;
}
.join_group {
width: 460px;
margin:0 auto;
}
.join_group > h3 {
font-size:18px;
margin-top: 14px;
margin-bottom:7px;
}
.ps_box{
display: block;
width:100%;
height: 50px;
padding: 10px 14px;
box-sizing: border-box;
background: #fff;
border:1px solid #dadada
}
.ps_box > input {
border:none;
width:300px;
}
.ps_box > input:focus{
outline:none;
}
.ps_box > span {
float:right;
color: #8e8e8e;
}
/* etc */
.mt100{
margin-top: 50px;
}
- body 부분의 background는 네이버의 색상과 같은 색상값을 입력하였습니다.
- 아이디, 비밀번호, 비밀번호 재확인 글씨가 적혀있는 h3 부분은 폰트 크기 수정을 해줌과 동시에 margin-top,bottom을 각각 다르게 주어 공간을 조금 띄워주었습니다.
- text 박스에 긴 부분에 어디를 클릭해도 text 입력이 가능하도록 width 300px를 주었습니다.
4. 오류 및 수정
- 처음 코드를 짰는데 join_group에 margin:0 auto;가 적용이 되지 않아서 굉장히 당황했습니다. 어디가 잘못 된 것인지 한참 찾아 보다가 </div>가 엉뚱한 곳에 있었던 것을 발견하고 수정하였습니다.
- 열고 닫음을 잘 확인해야겠다고 다시 한번 다짐하게 되었습니다.
5. 추가내용(Input:focus)
- focus는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
- 현재 어느 부분에 커서가 위치하고 있는지 알려주며 접근성을 높여줍니다.
<style>
.input{
padding:7px 14px;
}
.btn{
padding:7px 14px;
background: #333;
color: #fff;
}
input:focus{
color: red;
background: yellow;
}
</style>- 코드값을 이렇게 입력 하면 다음과 같이 나오게 됩니다.
- focus를 주게 되면 이런 식으로 현재 어느 위치에 커서가 있는지 한눈에 딱 들어와서 편의성이 증대되고 접근성이 향상됩니다.
6. 최종화면
- 전체적으로 깔끔하고 심플하게 생성이 되었습니다. 비밀번호 부분엔 password를 사용하여 입력된 값이 보이지 않도록 처리를 잘 해주었고, 입력한 아이디와 @naver.com 사이의 공간이 굉장히 많이 있기는 하지만 크게 문제될 것은 없는 것으로 보입니다.
- 이번 클론 코딩은 난이도가 크게 어렵지는 않았습니다. 중간에 오류가 나서 찾는데 조금 문제가 있었지만 간단한 오류(</div>의 위치)였기 때문에 찾아내고 난 뒤에 수정을 하는데 있어서는 크게 어렵지 않았습니다.
728x90
'HTML' 카테고리의 다른 글
| Visual Studio Code :: table을 통한 게시판 만들기 및 Flex (0) | 2021.12.29 |
|---|---|
| Visual Studio Code :: 모달 팝업(레이어 팝업) 만들기 (0) | 2021.12.28 |
| Visual Studio Code :: Input 사용하기 (2) | 2021.12.27 |
| Visual Studio Code :: CSS를 이용해서 클론페이지 만들기 2 (0) | 2021.12.23 |
| Visual Studio Code :: CSS를 이용해서 클론페이지 만들기 (1) | 2021.12.22 |
