CSS정렬 - 회원가입 과제 코드 공유
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다.
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;
}Answer 1
1
최다니엘님, 안녕하세요!
좋은 결과물이 나왔네요? 공유해주셔서 감사합니다.
모두를 위해 한가지 실무적인 tip을 드리면, 프론트엔드 개발자는 디자이너가 디자인을 해둔 것처럼 100% 개발이 안될 때가 빈번합니다. 예를 들어, 정확한 px 수치나 간격 등...
이럴 경우는 프론트엔드 개발자의 감각이 중요하다는 사실이에요!
따라서, 무조건 피그마 px 및 간격 수치까지 다 맞춰야 한다는 강박은 모두가 없었으면 합니다.
23년 큰 성장을 응원하겠습니다.
싸이월드3
0
75
2
싸이월드2 관련 질문 드립니
0
90
3
과제 모범답안 유무
0
87
2
과제 연습 질문
0
69
2
<style> 에 *와 div 차이
0
86
2
과제 profile 부분 질문
0
111
2
과제 Profile 부분 질문
0
84
2
left_body_header의 자식border-top인데
0
75
2
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
0
126
1
태그 궁금한 점
0
162
2
HTML 회원가입
0
192
2
문법관련 질문입니다
0
252
2
윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.
0
644
2
26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ
0
249
2
피그마에서 css 코드가 안보여요..
1
3208
2
주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ
0
323
2
언어 설정 -> 한글
0
287
1
2024년 html
0
225
1
피그마 유료화
0
1670
1
Fiama 링크 찾기
0
239
2
Figma는 어디에 있나요?
0
246
1
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
0
353
2
git 질문입니다
0
211
1
아무리 찾아봐도 피그마 링크가 보이질 않습니다.
0
308
1