1. 네이버 회원가입 클론코딩
어제 했던 수업을 다시 처음부터 복습해봤다.
https://baekspace.tistory.com/31
221021 CSS와 네이버 클론코딩
오늘 내가 배운 것 1. HTML element 2. CSS 3. CSS 적용시키는 3가지 방법 4. CSS 선택자, 속성, 속성값 1. HTML element 웹사이트 브라우저를 구성을 확인하다 보면 address, section, article, aside 태그를 볼..
baekspace.tistory.com
아쉬운 점으로 밑에 내용이 있었는데
1. 처음에 레이아웃을 짤 때 input 안에 블록을 더 세분화해서 넣었어야 했는데, 세분화하지 못해서 위치를 세세하게 이동시킬 수 없었다. 조금 진행된 상태에서 파악을 한 부분이라 코드 전체를 뒤집진 못 했지만 다음에 시간 내서 세세하게 더 나누어 배치해봐야겠다.
2. 시멘틱 구조를 이용한 h1~h6 태그를 활용하지 못했다. 모양을 구현하는 것은 어떻게든 할 수 있지만 많은 이용자가 더욱 편리하게 사용해야 되는 상황에선 시멘틱 구조 코드를 짜는 것이 좋은데 다음에 만들 땐 잊지 말고 써야겠다.
오늘 다시 네이버 회원가입 클론코딩 복습을 하면서 블럭 안에 블럭을 넣으면서 내가 원하는 위치로 최대한 배치할 수 있도록 해봤고,
로고는 h1, 일반 글씨는 h3 태그로 잡으면서 시멘틱 구조도 사용해 봤다. h3가 많은 점에서 크게 문제가 되는지는 직접 겪어 보지 못해서 잘 느끼진 못했지만 나중에 필요하다면 더 세분화해서 나눠 볼 수 있는 기회가 있을 것이라 생각된다.
기본적인 HTML 과 CSS 로 구현하다 보니 누가 봐도 코드 자체가 지저분해 보이고 중복이 되는 게 많아 보인다.
이 부분은 나중에 실력이 늘면서 줄일 수 있는 부분은 줄여진다고 하는데, 아직은 그저 희망사항인 것 같다.
어려웠던 점은 id랑 class의 작명(?)이 너무 어려웠고,
class 같은 것은 어디서 뭘 썼는지 기억을 해야 다른 중복된 틀에서도 쓸 수 있을 것 같은데,
생각보단 쉽지 않았다.. 그래도 최대한 찾아서라도 써보긴 했지만 마음에 안 드는 건 어쩔 수 없나 보다..
더보기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./public/css/new.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<div id="header">
<h1>
<a href="#" class="h_logo">
</a>
</h1>
</div>
<div>
<div id="contents">
<div id="join_box">
<h3>아이디</h3>
<div class="input_box">
<input class="input_text" />
<span class="adress">@naver.com</span>
</div>
<h3>패스워드</h3>
<div class="input_box2">
<input type="password" class="password" />
<span class="after"></span>
</div>
<h3>패스워드 재확인</h3>
<div class="input_box2">
<input type="password" class="password" />
<span class="after_ck"></span>
</div>
<h3>이름</h3>
<div class="input_box3">
<input class="password" />
</div>
<h3>생년월일</h3>
<div id="birth">
<div class="birth">
<span class="date">
년(4자)
</span>
</div>
<div class="birth birth2">
<select>
<option>월</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="birth">
<span class="date">
일
</span>
</div>
</div>
<h3>성별</h3>
<div class="input_box3">
<select>
<option>성별</option>
<option>남자</option>
<option>여자</option>
</select>
</div>
<div>
<h3 class="check">본인 확인 이메일
<span class="tag">(선택)</span>
</h3>
<div class="input_box3">
<input class="password" />
</div>
</div>
</div>
<div id="phone">
<h3>휴대전화</h3>
<div class="input_box3">
<select>
<option>대한민국 +82</option>
</select>
</div>
<div class="p_num">
<div class="input_box4">
<span class="date">전화번호 입력</span>
</div>
<button class="get_num"><a href="#" class="button">인증번호 받기</a></button>
</div>
<div class="input_box3 margin">
<input class="password" placeholder="인증번호를 입력하세요" />
</div>
<button class="join_f"><a href="#" class="button2">가입 하기</a></button>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
font-size: 14px;
}
ul, li{
list-style: none;
}
#wrap{
width: 100%;
background: rgb (245,246,247);
}
#header {
margin: 0 auto;
padding: 65px 0 20px 0;
box-sizing: border-box;
}
#header > h1{
padding: 60px auto 20px auto;
box-sizing: border-box;
width: 240px;
margin: 0 auto;
}
#header > h1 > a {
margin: 0 auto;
display: inline-block;
}
#contents{
width: 770px;
height: 930px;
margin: 0 auto;
}
#contents > #join_box {
width: 460px;
margin: 0 auto;
}
#contents > #join_box > #birth{
margin: 10px 0;
}
#phone{
width: 460px;
margin: 0 auto;
margin-top: 30px;
}
#footer{
width: 770px;
height: 200px;
background: #080808;
margin: 0 auto;
}
/* class 속성 */
.title{
display: inline-block;
margin: 0 auto;
}
.center{
width: 770px;
margin: 0 auto;
}
.h_logo{
margin: 0 auto;
width: 240px;
height: 44px;
background: url(https://static.nid.naver.com/images/ui/join/m_naver_logo_20191126.png) no-repeat ;
background-size: 240px;
}
.input_box{
position: relative;
border: 1px solid #dadada;
width: 460px;
height: 51px;
box-sizing: border-box;
padding: 10px 110px 10px 14px;
margin: 10px 0 ;
}
.input_box2{
position: relative;
border: 1px solid #dadada;
width: 460px;
height: 51px;
box-sizing: border-box;
padding: 10px 50px 10px 14px;
margin: 10px 0 ;
}
.input_box3{
position: relative;
border: 1px solid #dadada;
width: 460px;
height: 51px;
box-sizing: border-box;
padding: 13px 14px 10px 14px;
margin: 10px 0 ;
}
.input_box4{
line-height: 30px;
display: inline-block;
position: relative;
border: 1px solid #dadada;
width: 72.1%;
height: 51px;
box-sizing: border-box;
padding: 10px 14px 10px 14px;
margin: 10px 0 ;
}
.adress{
position: absolute;
right: 13px; top:16px;
float: right;
font-size: 15px;
color: #8e8e8e;
}
.input_text{
width: 330px;
height: 100%;
border: none;
}
.password{
width: 100%;
height: 100%;
border: none;
}
.after::after{
content: '';
display: inline-block;
position: absolute;
right: 13px; top:50%;
width: 24px;
height: 24px;
margin: -12px 0 0 0;
background-image: url( https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png) ;
background-repeat: no-repeat;
background-size: 125px 75px;
background-position: 0 0;
}
.after_ck::after{
content: '';
display: inline-block;
position: absolute;
right: 13px; top:50%;
width: 24px;
height: 24px;
margin: -12px 0 0 0;
background-image: url( https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png) ;
background-repeat: no-repeat;
background-size: 125px 75px;
background-position: 26% 0;
}
.birth {
display: inline-block;
width: 32.3%;
height: 51px;
border: 1px solid #dadada;
padding: 11px 14px ;
box-sizing: border-box;
}
.birth2{
margin: 0 3px;
}
.date {
display: inline-block;
padding: 0 25px 0 0 ;
font-size: 15px;
width: 100%;
height: 29px;
line-height: 29px;
color: #8e8e8e;
box-sizing: border-box;
}
select{
border: none;
width: 100%;
font-size: 15px;
padding: 4px 0 0 0;
line-height: 29px;
box-sizing: border-box;
}
.birth_cen {
margin: 0 10px;
}
.tag{
display: inline-block;
color: #8e8e8e;
font-size: 12px;
}
.check {
display: inline-block;
margin: 10px 0 0 0;
}
.get_num{
width: 26%;
height: 51px;
background: rgb(29, 197, 98);
border: none;
margin: 0 0 0 5px;
box-sizing: border-box;
}
.button {
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 15px;
}
.button2 {
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 18px;
}
.p_num {
margin: -11px 0 0 0;
}
.margin{
margin: -1px 0 0 0;
}
.join_f{
width: 100%;
margin: 30px 0 0 0;
background: rgb(29, 197, 98);
border: none;
height: 51px;
}
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221026-게시판 만들기 : HTML table 태그, CSS-!important, box-shadow, CSS 선택자 (0) | 2022.10.26 |
|---|---|
| 221025 HTML/CSS 를 이용한 애니메이션 효과-학원 홈페이지 클론코딩 (0) | 2022.10.25 |
| 221021 CSS와 네이버 클론코딩 (0) | 2022.10.21 |
| 221020 브라우저와 HTML (0) | 2022.10.20 |
| 221017 페어코딩 (0) | 2022.10.17 |
댓글