-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
CSS정렬 - 회원가입 과제 코드 공유
22.12.31 22:27 작성 22.12.31 22:28 수정 조회수 2.55k
2
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다.
100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다.
<!-- test.html -->
<!DOCTYPE html>
<html lang="ko">
<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>회원가입</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div>
<div class="container">
<h2>회원가입을 위해<br>정보를 입력해주세요.</h2>
<!-- input도 inline요소중에 하나다. -->
<!-- inline이란 하나의 태그가 레코드(가로)방향을 모두 차지하는게 아니라, 자신이 속한 영역만 가지게 되는 것이다. -->
<label for="email">* 이메일<br>
<input type="text" id="email"><br><br>
</label>
<label for="name">* 이름<br>
<input type="text" id="name"><br><br>
</label>
<label for="password1">* 비밀번호<br>
<input class="pw" id="password1" type="password"><br><br>
</label>
<label for="password2">* 비밀번호 확인<br>
<input class="pw" id="password2" type="password"><br><br> </label>
<!-- 선택 영역 두번째 -->
<!-- name을 부여함으로 인하여 radio의 선택 가능한 것들을 하나의 그룹으로 묶어준다. -->
<form>
<input type="radio" class="radio" name="gender">  여성
<input type="radio" class="radio" name="gender">  남성
</form>
<br><br>
<form>
<input type="checkbox" class="agree">  이용약관 개인정보 수집 및 정보이용에 동의합니다.
</form>
<hr>
<hr>
<button>가입하기</button>
<!-- 기능자체는 input의 타입을 button으로 하면 사용은 가능하지만, 굳이 button 태그를 사용하는 이유는 -->
<!-- 커스터마이징이 button 태그가 더 용이하기 때문이다. -->
<!-- <input type="button" value="가입하기"> -->
</div>
</div>
</body>
</html>
/* test.css */
div {
/* 바로 상위 태그인 body를 기준으로 맞춰주게끔 */
/* position의 absolute라는것이, 설정하게 되면
바로 직계부모 태그의 영향아래 놓이게 된다는 말이다.
더불어서 네모를 영역으로 봤을때 왼쪽 상단 꼭지점을
기준으로 움직이게 된다. */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 670px;
height: 960px;
background: #FFFFFF;
border: 1px solid #AACDFF;
box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25);
border-radius: 20px;
/* 이것의 의미는 타겟팅된 영역에 대해
지정된 만큼 움직여주는 거라고 한다. */
/* justify-content: space-evenly;
align-content: column; */
margin: 0px;
padding: 100px;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
h2 {
width: 466px;
height: 94px;
left: 725px;
top: 132px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 47px;
color: #0068FF;
justify-content: space-evenly;
}
button {
width: 400px;
height: 50px;
left: 725px;
top: 875px;
background-color: #FFFFFF;
color: royalblue;
border-radius: 8px;
border: #0068FF solid 1px;
}
input {
padding: 0px;
border: none;
border-bottom: 1px solid #CFCFCF;
width: 466px;
height: 30px;
}
label {
color: lightgrey;
}
.radio {
align-items: center;
font-size: 20pt;
width: 15px;
height: 15px;
}
/* div.container {
justify-content: space-between;
flex-direction: row;
align-items: center;
} */
input.agree {
align-items: center;
font-size: 20pt;
width: 15px;
height: 15px;
}
답변을 작성해보세요.
1
코드캠프
지식공유자2023.01.02
최다니엘님, 안녕하세요!
좋은 결과물이 나왔네요? 공유해주셔서 감사합니다.
모두를 위해 한가지 실무적인 tip을 드리면, 프론트엔드 개발자는 디자이너가 디자인을 해둔 것처럼 100% 개발이 안될 때가 빈번합니다. 예를 들어, 정확한 px 수치나 간격 등...
이럴 경우는 프론트엔드 개발자의 감각이 중요하다는 사실이에요!
따라서, 무조건 피그마 px 및 간격 수치까지 다 맞춰야 한다는 강박은 모두가 없었으면 합니다.
23년 큰 성장을 응원하겠습니다.
답변 1