과제 연습 질문
계속
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<style>
* {box-sizing: border-box;}
* {font-family: Noto Sans CJK KR;}
.pb {
width: 670px;
height: 960px;
border: 1px solid #aacdff;
border-radius: 10px;
box-shadow: 7px 7px 39px 0px #0068ff40 ;
}
.pb2{
width: 470px;
height: 818px;
position: relative;
top: 72px;
left: 100px;
}
.sb1{
font-family: Noto Sans CJK KR;
font-weight: 700;
font-size: 32px;
color: #0068ff;
}
.sb2{
display: flex;
flex-direction: column;
gap: 21px;
position: relative;
top: 60px;
}
.sb2 > div{
width: 466px;
height: 80px;
color: #797979;
font-size: 13px;
}
.sb2 div {
border-bottom: solid 1px #cfcfcf;
}
.sb2 div.email{
border-bottom: solid 1px #0068ff;
}
.sb2 div.radio1 {
width: 140px;
height: 23.94px;
display: flex;
margin-top: 50px;
border: solid #ffff ;
}
.sb2 div.radio {
border: solid #ffff;
</style>
</head>
<body>
<div class="pb">
<div class="pb2">
<div class="sb1">회원가입을 위해
<br>
정보를 입력해 주세요
</div>
<div class="sb2">
<div class="email">*이메일</div>
<div>*이름</div>
<div>*비밀번호</div>
<div>*비밀번호 확인</div>
<div class="radio1">
<div class="radio">
<input type="radio" name="gender"> 여성
<input type="radio" name="gender"> 남성
</div>
<div>
<input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
</div>
</div>
</div>
</div>
</div>
</body>
</html>뭐가 잘못되었는지 모르겠어요..ㅠㅠ....
Answer 2
0
안녕하세요! 아람님!
html과 css의 문제를 가장 쉽게 해결하는 방법은 큰 그림에서의 구조설계를 먼저 확인하고,
그 다음에 세부적으로 들어가는 방법이랍니다!
올려주신 회원가입폼의 구조를 보면, sb1과 sb2 까지는 제대로 구조를 갖추었으나, 그 아랫부분(성별, 약관동의)은 구조가 제대로 보이고 있지 않네요!
개발자도구에서 상세히 살펴보니, 성별과 동의 영역이 sb2 영역 내부에 속해있는데, 그러지 말고 sb1, sb2, 아래에 sb3 영역을 만들고, 이 안에 집어넣게 되면 더 쉽고 정확하게 보여줄 수 있을 것 같네요!^^
0
안녕하세요, 인프런 AI 인턴입니다. 유아람님께서 작성하신 코드에 대해 몇 가지 개선 포인트를 안내 드리겠습니다.
코드 리뷰 및 개선점
스타일 적용 범위 수정:
* {font-family: Noto Sans CJK KR;}스타일은 모든 요소에 적용되지만, 중복 정의되어 있습니다. 한 번만 정의하면 됩니다.
CSS 선택자 사용:
gap속성을 사용할 때,display: flex;가 포함되어야 제대로 작동합니다..sb2클래스에 flexbox가 설정되어 있지만, 세부 조정이 필요할 수 있습니다.
HTML 구조 및 닫는 태그:
</div>태그가class="radio1"안에 하나 더 필요합니다. 현재 라디오 버튼과 체크박스를 감싸야 하므로 구조를 조금 더 명확히 하는 것이 좋습니다.
CSS 구조 개선:
- 모든 div에 border-bottom을 설정했는데, 일부 텍스트만 밑줄 형태로 표현하려면 적절한 조건을 추가하거나, 클래스를 잘 분리해서 설정해야 합니다.
- 모든 div에 border-bottom을 설정했는데, 일부 텍스트만 밑줄 형태로 표현하려면 적절한 조건을 추가하거나, 클래스를 잘 분리해서 설정해야 합니다.
레이아웃 조정:
- 각 입력 필드 (예: 이메일, 이름 등) 사이에 적절한 패딩과 마진을 추가하여 레이아웃을 더 정리할 수 있습니다.
.sb2 div에 대한 스타일링이 자식 요소에 모두 동일하도록 스타일이 지정되어 있는지 확인하세요.
- 각 입력 필드 (예: 이메일, 이름 등) 사이에 적절한 패딩과 마진을 추가하여 레이아웃을 더 정리할 수 있습니다.
기존 답변 참고 자료
이전에 비슷한 문제를 해결한 질문과 답변이 있는 페이지를 공유드립니다. 이 자료들을 참고하시면 더 많은 도움을 받으실 수 있습니다.
여기에는 CSS 정렬과 관련한 다양한 팁과 코드 예제가 제공되어 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
싸이월드3
0
75
2
싸이월드2 관련 질문 드립니
0
90
3
과제 모범답안 유무
0
87
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
잔디 질문입니다.
0
239
1