회원가입 과제 질문
선생님 강의 잘 보고 있습니다. 다름이 아니라 몇 가지 여쭤보고 싶어 글을 올리게 되었습니다.
정답코드를 따로 볼 수 있는 곳이 있을까요?
제 위의 코드에서 문제점이 있을까요?
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>
답변 1
0
안녕하세요!
1. 코드에는 정답이 없기 때문에 구현하셨다면 그 코드가 바로 정답입니다만 레퍼런스 코드가 궁금하시다면,
섹션 7 ｜ FINAL 과제와 Github 잔디 심기 에서 레퍼런스 코드를 확인 하실 수 있습니다.
2.inline으로 주신 style들을 웬만하면 최소화 해주세요!
코드의 가독성이 떨어질 뿐만 아니라 스타일 적용 우선순위에 따라 inline으로 적힌 style들이 먼저 적용이 되게 됩니다.
따라서 추후에 스타일이 꼬여 왔다갔다하며 봐야하는 번거로움이 생길 수 있습니다.
그러니 꼭 필요한 경우를 제외하면 최소화해서 적어주시길 바랍니다.
3. 버튼 기능이 활성화 되지 않는 다는게 눌리지 않는다는 뜻이라면, 버튼 태그 안에 div태그를 넣어주셔서 그렇습니다.
활성화를 원하신다면, 버튼 크기를 div크기보다 크게 주시거나 똑같이 맞춰주세요.
감사합니다.😁
싸이월드3
0
77
2
싸이월드2 관련 질문 드립니
0
92
3
과제 모범답안 유무
0
89
2
과제 연습 질문
0
71
2
<style> 에 *와 div 차이
0
86
2
과제 profile 부분 질문
0
112
2
과제 Profile 부분 질문
0
86
2
left_body_header의 자식border-top인데
0
77
2
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
0
127
1
태그 궁금한 점
0
162
2
HTML 회원가입
0
192
2
문법관련 질문입니다
0
253
2
윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.
0
648
2
26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ
0
250
2
피그마에서 css 코드가 안보여요..
1
3217
2
주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ
0
325
2
언어 설정 -> 한글
0
289
1
2024년 html
0
226
1
피그마 유료화
0
1670
1
Fiama 링크 찾기
0
239
2
Figma는 어디에 있나요?
0
251
1
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
0
357
2
git 질문입니다
0
216
1
아무리 찾아봐도 피그마 링크가 보이질 않습니다.
0
312
1