-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
회원가입 과제 질문
23.03.28 23:59 작성 23.03.29 00:01 수정 조회수 526
0
선생님 강의 잘 보고 있습니다. 다름이 아니라 몇 가지 여쭤보고 싶어 글을 올리게 되었습니다.
정답코드를 따로 볼 수 있는 곳이 있을까요?
제 위의 코드에서 문제점이 있을까요?
button 기능이 활성화 되지 않는데 이유가 무엇인지 잘 모르겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Upgrade_sign_up_page</title>
<style>
#signup{
width: 1920px;
height:1080px;
background-color: #FFFFFF;
/* border:1px solid red; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main{
box-sizing: border-box;
width : 670px;
height : 960px;
border : 1px solid #AACDFF;
padding : 60px;
box-shadow: 7px 7px 39px rgba(0,104,255,0.25);
border-radius: 20px;
display: flex;
justify-content: center;
}
.main2{
width: 470px;
height: 818px;
/* border: 1px solid green; */
display : flex;
flex-direction: column;
align-items: center;
}
#introduce{
width: 466px;
height: 94px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 47px;
color : #0068FF
}
#group1{
width: 466px;
height: 80px;
/* border: 1px solid red; */
}
#email{
width: 158px;
height: 23.65px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color :#797979;
}
#vector1{
width: 466px;
height: 0px;
border: 1px solid #0068FF;
}
#sex{
width: 140px;
height: 23.94px;
display: flex;
justify-content: space-between;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color : #000000
/* border:1px solid #0068FF */
}
#checkbox{
width: 454px;
height: 21.06px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-size: 13px;
line-height: 21px;
color : #000000
}
#line{
width: 470px;
height: 1px;
background-color: #E6E6E6;
}
button{
width: 470px;
height: 75px;
background-color: #FFFFFF;
border: 1px solid #0068FF;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#button_text{
width: 70px;
height: 27px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 27px;
text-align: center;
color : #0068FF
}
</style>
</head>
<body>
<div id = "signup">
<div class = "main">
<div class = "main2">
<div id = "introduce">
회원 가입을 위해<br>정보를 입력해주세요
</div>
<br>
<div id = "group1">
<div id = "email">
*이메일
</div>
<input type ="text" style="border: none; width:200px;height: 50px;font-size: 30px;">
<div id = "vector1"></div>
</div>
<br>
<div id = "group1">
<div id = "email">
*이름
</div>
<input type ="text" style="border: none; width:200px;height: 50px;font-size: 30px;">
<div id = "vector1"></div>
</div>
<br>
<div id = "group1">
<div id = "email">
*비밀번호
</div>
<input type ="password" style="border: none; width:200px;height: 50px;font-size: 30px;">
<div id = "vector1"></div>
</div>
<br>
<div id = "group1">
<div id = "email">
*비밀번호확인
</div>
<input type ="password" style="border: none; width:200px;height: 50px;font-size: 30px;">
<div id = "vector1"></div>
</div>
<br><br>
<div id = "sex">
<div>
<input type = "radio" name = "gender">여성
</div>
<div>
<input type = "radio" name = "gender">남성
</div>
</div>
<br><br>
<div id ="checkbox">
<input type = "checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
</div>
<br><br>
<div id = "line"></div>
<br><br>
<button>
<div id = "button_text">
가입하기
</div>
</button>
</div>
</div>
</div>
</body>
</html>
답변을 작성해보세요.
0
코드캠프 프론트엔드 멘토
2023.03.30
안녕하세요!
1. 코드에는 정답이 없기 때문에 구현하셨다면 그 코드가 바로 정답입니다만 레퍼런스 코드가 궁금하시다면,
섹션 7 ｜ FINAL 과제와 Github 잔디 심기 에서 레퍼런스 코드를 확인 하실 수 있습니다.
2.inline으로 주신 style들을 웬만하면 최소화 해주세요!
코드의 가독성이 떨어질 뿐만 아니라 스타일 적용 우선순위에 따라 inline으로 적힌 style들이 먼저 적용이 되게 됩니다.
따라서 추후에 스타일이 꼬여 왔다갔다하며 봐야하는 번거로움이 생길 수 있습니다.
그러니 꼭 필요한 경우를 제외하면 최소화해서 적어주시길 바랍니다.
3. 버튼 기능이 활성화 되지 않는 다는게 눌리지 않는다는 뜻이라면, 버튼 태그 안에 div태그를 넣어주셔서 그렇습니다.
활성화를 원하신다면, 버튼 크기를 div크기보다 크게 주시거나 똑같이 맞춰주세요.
감사합니다.😁
답변 1