인프런 커뮤니티 질문&답변
작성한 질문수
피그마 회원가입 만들기
해결된 질문
24.06.17 14:39 작성
·
126
0
회원가입 css까지 다 완성했는데 비교해보니 비슷한 느낌은 나는것 같습니다.
혹시 코드 예제? 라던지 대표적인 완성코드를 볼 수 있는건 없나요??
한번 비교해보고 싶어서요..
추가로 남성/여성 부분 radio 동그라미가 피그마 원본? 상에는 크고 회색으로 칠해져 있는데 저건 어떻게 적용하나요??
가입하기 버튼 위 구분선도 제게 사라졌는데 원인을 알수있을까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="./02-signup.css" rel = "stylesheet">
</head>
<body>
<div id="tBox">
<h2 id="title">회원 가입을 위해 <br/> 정보를 입력해주세요</h2>
<input class = "underline" type="text" placeholder="*이메일"><br><br>
<input class = "underline" type="text" placeholder="*이름"><br><br>
<input class = "underline" type="pw" placeholder="*비밀번호"><br><br>
<input class = "underline" type="pw" placeholder="*비밀번호 확인"><br><br>
<!-- <select>
<option disabled="true" selected="true">지역을 선택하세요</option>
<option>서울</option>
<option>경기</option>
<option>인천</option>
<option>부산</option>
<option>울산</option>
<option>김해</option>
</select> -->
<div id = "gender">
<input type="radio" name="gender">여성
<input type="radio" name="gender">남성
</div>
<br><br>
<div class="checkbox-container">
<input type="checkbox" id="terms">
<label for="terms">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</label>
</div>
<br>
<div class = "register">
<button class = "button">가입하기</button>
</div>
<!-- <input type="button" value="가입하기"> -->
</div>
</body>
</html>* {
box-sizing: border-box;
}
#title {
width: 466px;
height: 94px;
color: #0068ff;
font-size: 32px;
font-family: Noto Sans CJK KR;
text-align: justify;
}
#tBox {
width: 670px;
height: 960px;
border: 1px solid #aacdff;
margin-top: 60px;
margin-left: 625px;
padding: 100px;
box-shadow: 7px 7px 39px 0px #0068ff;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
input[type="text"]{
width: 466px;
height: 80px;
padding: 10px;
margin: 10px 0;
border: 1px solid #797979;
}
input[type="pw"]{
width: 466px;
height: 80px;
padding: 10px;
margin: 10px 0;
border: 1px solid #797979;
}
button {
padding: 10px 20px;
color: #fff;
background-color: #0068ff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input.underline {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 1px;
}
#gender {
width : 140px;
height: 23.94px;
border : 1px solid #fff;
display: flex;
justify-content: space-between;
}
.checkbox-container {
width: 466px;
height: 21.06px;
border: 1px solid #fff;
border-radius: 3px;
align-items: center;
display : flex;
}
.checkbox-container input[type="checkbox"] {
margin-right: 10px;
}
.register {
border-top : 1px solid #e6e6e6;
width: 470px;
height: 1px;
}
.button {
background-color: #FFFFFF;
border :1px solid #0068FF;
width: 470px;
height: 75px;
border-radius: 10px;
font-size : 18px;
color : #0068FF;
text-align: center;
font-weight: 400;
line-height: 26.64px;
font-family: Noto Sans CJK KR;
}답변 2
0
2024. 06. 20. 11:31
민선님, 안녕하세요!
이제 막 시작하는 단계이시군요? 앞으로으 성장을 응원하겠습니다.
회원가입 레퍼러스 코드는 수업 자료 > Section 7 에서 제공하고 있습니다.
확인부탁드려요 😀
0
2024. 06. 17. 14:41
안녕하세요, 인프런 AI 인턴입니다.
민선님의 질문에 대한 답변으로, 회원가입 폼 관련하여 CSS 정렬과 관련된 예제 코드를 찾고 계신 것으로 이해됩니다. 이와 관련하여, 이전에 다른 수강생이 제출한 회원가입 폼 작업 공유글이 도움이 될 것 같습니다. 해당 게시글에서는 HTML과 CSS를 사용하여 회원가입 폼을 구현한 예제가 공유되었습니다.
유용할 수 있는 게시글 링크는 다음과 같습니다:
- CSS정렬 - 회원가입 과제 코드 공유
- 이 게시글에는 간단한 회원가입 폼의 HTML과 CSS 코드 예제가 포함되어 있습니다. 이 예제는 폼 생성에 있어서의 기본적인 구조와 스타일링을 보여줍니다. 비록 디자인 측면에서 사람마다 조금씩 차이가 있을 수 있으나, 기본적인 구조는 참고하시기에 유익할 것입니다.
- 이 게시글에는 간단한 회원가입 폼의 HTML과 CSS 코드 예제가 포함되어 있습니다. 이 예제는 폼 생성에 있어서의 기본적인 구조와 스타일링을 보여줍니다. 비록 디자인 측면에서 사람마다 조금씩 차이가 있을 수 있으나, 기본적인 구조는 참고하시기에 유익할 것입니다.
게시글에서 제공된 코드 예제를 사용하실 때, 민선님께서 언급하신 세밀한 요소들(남성/여성 선택 부분의 radio 버튼 스타일링, 가입하기 버튼 위의 구분선 사라짐 등)에 관해서는 스타일시트(CSS)에서 해당 요소들에 대한 스타일 속성을 조정하여 해결할 수 있습니다.
CSS에서는 border, background-color, border-radius 등의 속성을 사용하여 다양한 스타일을 적용할 수 있으며, 특정 요소가 사라지는 경우는 해당 요소의 스타일 정의에서 속성이 누락되었거나 다른 스타일에 의해 덮어씌워진 경우일 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.