-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
CSS정렬 - 회원가입 폼 만들기 과제 질문
23.08.21 21:11 작성 조회수 688
0
안녕하세요. CSS정렬까지 들은 입문자입니다.
처음으로 과제를 받고 걱정 반 설렘 반으로 시작해 완성한 과제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="./signup.css" rel="stylesheet">
</head>
<body>
<div class="total">
<h1>회원 가입을 위해<br>정보를 입력해주세요.</h1>
<div class="memberinfo_box">
<div>
<input type="text" placeholder="*이메일">
<br><br>
</div>
<div>
<input type="text" placeholder="*이름">
<br><br>
</div>
<div>
<input type="password" placeholder="*비밀번호">
<br><br>
</div>
<div>
<input type="password" placeholder="*비밀번호 확인">
<br><br>
</div>
</div>
<div class="memberinfo_raiod">
<div>
<input type="radio" name="gender">여성
</div>
<div>
<input type="radio" name="gender">남성
</div>
</div>
<div class="agree_checkbox">
<div>
<input type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
<br><br><hr>
</div>
</div>
<div class="button">
<div>
<button>가입하기</button>
</div>
</div>
</div>
</body>
</html>*{
box-sizing: border-box;
}
.total{
width: 670px;
height: 960px;
border: solid 1px #0068FF;
border-radius: 20px;
top: 60px;
left: 625px;
box-shadow: 7px 7px 39px 0px #0068FF40;
display: flex;
flex-direction: column;
align-items: center;
margin-left: 800px;
margin-top: 50px;
}
h1{
display: flex;
width: 600px;
padding: 50px;
/* border: solid 1px none;
color: #0068FF; */
border: none;
color: #0068FF;
}
.memberinfo_box{
display: flex;
flex-direction: column;
/* align-items: center; */
padding: 50px;
justify-content: space-around;
width: 600px;
height: 400px;
border: none
}
.memberinfo_box input{
border: none;
border-bottom:solid 1px #CFCFCF;
width: 500px;
height: 100px;
}
.memberinfo_raiod{
width: 400px;
height: 100px;
padding: 50px;
/* border: solid 1px none; */
border: none;
display: flex;
justify-content: center;
justify-content: space-evenly;
}
.agree_checkbox{
width: 640px;
border: none;
padding: 30px;
display: flex;
justify-content: center;
}
.button{
width: 200px;
border: none;
display: flex;
justify-content: center;
}
.button button{
width: 500px;
height: 50px;
border: solid 1px #0068FF;
background-color: white;
color: #0068FF;
border-radius: 10px;
}.png "스크린샷(77).png")
처음이니 엉성한 것은 어쩔 수 없겠지만 몇 가지 피드백을 받고 싶어 문의 남깁니다.
코드가 너무 긴 것 같아 불필요한 부분이 있거나 단순화 할 수 있는 부분을 알고 싶습니다.
피그마에 있는 회원가입 폼을 보며 만들었지만 거기에 있는 수치를 거의 활용하지 않고 만들었어요. 문서로 된 수치를 적용하는 게 쉽지 않았는데 이에 대한 팁이 있을까요?
이번 과제를 하면서 느낀 건 다른 코드를 많이 보는 게 큰 도움이 된다는 거였어요. 다양한 코드를 볼 수 있는 사이트다 커뮤니티가 있다면 알려주실 수 있나요? 이쪽 업계에 대한 인연이 아예 없어 정보가 너무 없네요.
답변을 작성해보세요.
1
노원두
지식공유자2023.08.25
안녕하세요! zero.1.0.one.xx님!
아래 3가지 질문에 대한 답변을 드리도록 할게요!^^
불필요한 코드나 단순화할 수 있는 부분을 고민하시는 자세! 정말 좋아요!
결과는 동일하지만, 코드는 더 단순하게 고치는 작업을 리팩토링 이라고 해요!
리팩토링을 위해서는 기본중에 기본이 반복적으로 쓰이는 구문들을 어떻게하면 1번으로 줄일까? 예요!
아직은 이러한 기술을 배우지 않았기에, 당장에 고치기는 어렵지만 이후에는 위의 태그들을 자바스크립트 변수에 넣어서 사용함으로써 코드의 반복을 줄이는 방법을 배워요!
이 부분은 본과정에서 따라해봐요!^^윈도우를 사용하시면 alt키를, 맥을 사용하시면 option키를 활용해보세요!
피그마의 컴포넌트(그림) 1개를 클릭하시고, option 또는 alt키를 누르신 상태에서 다른 컴포넌트(그림) 위에 마우스를 올리시면 두 컴포넌트간의 간격을 확인할 수 있답니다!^^소스코드는 github에 다른 사람들이 공유해두었어요!
이 역시 아무거나 github에서 검색하여 보는 것이 아니며, 내가 사용하는 라이브러리(예를들면 react)를 사용하는데 useState라는 기능이 필요하네? 다른 사람들은 useState를 어떻게 사용하고 있지? 라는 의문이 드실 때, github에 useState를 검색하시면 다른 사람들이 어떻게 사용하고 있는지 수많은 소스코드를 확인해 보실 수 있게 되십니다!^^
업계에 대한 인연과 정보는 아예 없으시다고 하셨으나, 접근하는 태도와 자세가 너무 좋네요!
시작도 중요하지만, 끝 마무리가 더 중요한 것 아시죠?!
zero.1.0.one.xx님 함께 반드시 끝까지 완강해봐요!
0
인프런 AI 인턴
2023.08.23
안녕하세요, 인프런 AI 인턴이에요.
회원가입 폼을 만들었군요! 좋은 시도입니다.
이메일, 이름, 비밀번호 등의 입력란과 라디오 버튼, 체크박스를 포함한 회원가입 폼을 만들었습니다.
그런데, 문제점이 있어 보입니다. 입력란이나 버튼들이 가운데 정렬되지 않고 좌측 정렬이 되어 있군요.
정렬을 어떤 방식으로 원하시는지 알려주셔야 저도 정확한 도움을 드릴 수 있을 것 같아요.
설정하신 CSS 코드를 공유해 주시면 어떤 부분이 잘못되었는지 확인하고 도움을 드릴 수 있을 거예요.
답변 2