멋쟁이사자 FE7
멋쟁이사자 FE7 17일차
FrontEnd 개발자 준비생 최현우
2023. 7. 25. 18:38
728x90
Apply(적용)
다음 주에 Javascript를 들어가기에 이번주는 HTML & CSS 실습으로 진행될 것이다.
<!DOCTYPE html>
<html lang="ko-KR">
<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" />
<link rel="stylesheet" href="./login2.css" />
<title>로그인 페이지2</title>
</head>
<body>
<div class="wrap">
<div class="header"><p>로그인 또는 회원가입</p></div>
<div class="main1">
<h1>위니브에서 여러분의 궁금증을 해결하세요! :)</h1>
<input type="text" placeholder="아이디"></input>
<p class="warning">아이디를 입력해 주세요</p>
<input type="password" placeholder="비밀번호"></input>
<p class="warning two">아이디 혹은 비밀번호가 일치하지 않습니다.</p>
<div class="check">
<input type="checkbox" id="chk">
<label for="chk"><div></div>로그인 상태 유지</label>
</div>
<button>로그인</button>
<div class="membership">
<a href="">회원가입</a>
<a href="">아이디/비밀번호 찾기</a>
</div>
</div>
<div class="main2">
<a href="https://www.google.co.kr/?hl=ko"
><img src="./img/google.png" alt="구글" />
<p>구글 계정으로 로그인</p></a
>
<a href="https://www.google.co.kr/?hl=ko"
><img src="./img/facebook.png" alt="구글" />
<p>페이스북 계정으로 로그인</p></a
>
<a href="https://www.google.co.kr/?hl=ko"
><img src="./img/naver-logo.png" alt="구글" />
<p>네이버 계정으로 로그인</p></a
>
<a href="https://www.google.co.kr/?hl=ko"
><img src="./img/vector.png" alt="구글" />
<p>카카오톡 계정으로 로그인</p></a
>
</div>
</div>
</body>
</html>@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Spoqa Han Sans Neo", "sans-serif";
}
input::placeholder {
color: var(--767676, #767676);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
a {
text-decoration: none;
color: var(--767676, #767676);
}
button:enabled {
cursor: pointer;
}
body {
padding-top: 5%;
}
.wrap {
margin: 0 auto;
width: 520px;
border-radius: 10px;
border: 1px solid var(--c-4-c-4-c-4, #c4c4c4);
background: white;
display: flex;
flex-direction: column;
}
.header {
display: flex;
justify-content: center;
border-bottom: 1px solid #c4c4c4;
padding-top: 20px;
padding-bottom: 18px;
}
.main1 {
display: flex;
flex-direction: column;
align-items: center;
}
.main1::after {
content: "";
display: block;
width: 472px;
height: 1px;
border-bottom: 1px solid #c4c4c4;
}
.main1 h1 {
margin-top: 26px;
width: 472px;
color: #000;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 24px;
margin-bottom: 24px;
}
.main1 input {
display: block;
width: 472px;
height: 50px;
border-radius: 5px;
border: 1px solid var(--767676, #767676);
padding-left: 10px;
margin-bottom: 6px;
}
.warning {
padding-left: 4px;
width: 472px;
color: #f4492e;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.main1 input:nth-of-type(1) {
border: 2px solid red;
}
.main1 input:nth-of-type(2) {
margin-top: 10px;
}
.check {
width: 472px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 17px;
margin-bottom: 21px;
}
#chk {
display: none;
width: 20px;
height: 20px;
margin: 0;
}
.main1 label {
display: flex;
color: var(--767676, #767676);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.main1 label div {
position: relative;
width: 22px;
height: 22px;
background: url(./img/check-box2.png) no-repeat;
margin-right: 5px;
}
#chk:checked + label div::after {
display: block;
content: "";
width: 22px;
height: 22px;
background: url(./img/check-box.png) no-repeat;
margin-right: 5px;
}
.main1 button {
display: flex;
justify-content: center;
align-items: center;
width: 472px;
height: 50px;
border: none;
border-radius: 5px;
background: #2f80ed;
color: #fff;
font-size: 18px;
font-style: normal;
font-weight: 700;
letter-spacing: 5px;
margin-bottom: 20px;
font-family: "Spoqa Han Sans Neo", "sans-serif";
}
.membership {
position: relative;
width: 472px;
display: flex;
justify-content: space-between;
padding: 0 136px;
margin-bottom: 38px;
}
.membership::before {
font-size: 14px;
color: var(--767676, #767676);
position: absolute;
content: "|";
left: 197px;
}
.membership a {
display: block;
color: var(--767676, #767676);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.main2 {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.main2::before {
position: absolute;
display: block;
width: 50px;
height: 20px;
background-color: white;
content: "또는";
color: var(--767676, #767676);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
top: -11px;
left: 231px;
display: flex;
justify-content: center;
}
.main2 a {
position: relative;
display: block;
width: 472px;
height: 50px;
border-radius: 5px;
border: 1px solid var(--767676, #767676);
display: flex;
justify-content: center;
align-items: center;
}
.main2 a:nth-of-type(1) {
margin-top: 29px;
}
.main2 a:nth-of-type(2) {
border: 1px solid #2d9cdb;
}
.main2 a:nth-of-type(3) {
border: 1px solid #00bf18;
}
.main2 a:nth-of-type(4) {
border: 1px solid #f2c94c;
margin-bottom: 25px;
}
.main2 a p {
color: var(--767676, #767676);
font-size: 16px;
font-weight: 500;
}
.main2 a img {
position: absolute;
width: 28px;
height: 28px;
top: 11px;
left: 12px;
}
Feeling(느낀 점)
이번 실습에는 가상요소를 많이 사용했다. 가상요소에는 postion:absolute를 대부분 줬다. 우연히 내가 만든 페이지를 스크롤을 확대를 해봤는데 가상요소의 위치가 틀어지는 것을 발견했다. 시행착오를 겪다 구글링으로 문제의 이유를 찾아봤다. 이유는 이거였다, absolute는 가장 가까운 조상의 position:relative에 기반을 두고 움직이는데 부모의 위치가 움직이니까 postion:absolute를 적용한 가상요소도 같이 움직이는 것이였다. 바로 부모 요소를 고정해 봤는데, 가상요소의 움직임은 없었다. 오늘도 문제 해결을 통해 또 하나의 지식을 얻게 되어서 기쁘다.
추가적으로 이해가 어려웠던 코드를 해석한 기록을 남간다.
#chk:checked + label div::after {
display: block;
content: "";
width: 22px;
height: 22px;
background: url(./img/check-box.png) no-repeat;
margin-right: 5px;
}
// chk클래스를 가진 input이 체크 됐을때 인접형제인 label의 자식인 div의 가상요소 //