인프런 커뮤니티 질문&답변
작성한 질문수
회원가입 과제입니다!
해결된 질문
24.08.07 22:54 작성
·
125
·
수정됨
0
안녕하세요 디자인 전공생입니다! 웹디자인 배우면서 html은 맛보기로 공부했었는데, 강의 듣고 깔끔하게 다시 한번 정리할 수 있어 좋았습니다. 혹시라도 코드에 보완할점이 있을까 싶어 올립니다!!
그리고 checkbox와 radio button에서 색이랑 테두리 등의 속성을 변경하고 싶을땐 어떻게 해야하는지 궁금합니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<title>과제</title>
<style>
.page{
width: 1920px;
height: 1080px;
display: flex;
align-items: center;
padding: 60px 625px 60px 625px;
}
.pb{
width: 670px;
height: 960px;
border-radius: 20px;
border: 1px solid #AACDFF;
background-color: #FFF;
box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25);
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 72px 100px 70px 100px;
}
h1{
color: #0068FF;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.name{
color: #797979;
font-family: "Noto Sans CJK KR";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.gender{
text-align: center;
}
.agree{
text-align: center;
font-size: 14px;
border: 0;
border-bottom: 1px solid #E6E6E6;
padding: 0 0 24px 0;
}
button{
color: #0068FF;
text-align: center;
font-size: 18px;
height: 75px;
border-radius: 10px;
border: 1px solid #0068FF;
background: #FFF;
}
input{
border: 0;
font-size: 30px;
padding: 0 0 12px 0;
border-bottom: 1px solid #CFCFCF;
}
</style>
</head>
<body>
<div class="page">
<div class="pb">
<h1>회원 가입을 위해<br> 정보를 입력해주세요</h1>
<br><br>
<div class="name">* 이메일</div><br>
<input type="text"><br>
<div class="name">* 이름</div><br>
<input type="text"><br>
<div class="name">* 비밀번호</div><br>
<input type="password"><br>
<div class="name">* 비밀번호 확인</div><br>
<input type="password"><br>
<div class="gender">
<input type="radio" name="gender">여성
<input type="radio" name="gender">남성
</div>
<br><br>
<div class="agree">
<input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.<br>
</div>
<button>가입하기</button>
</div>
</div>
</div>
</body>
</html>답변 2
0
2024. 08. 08. 20:14
안녕하세요! 김과4분의3님!
굉장히 깔끔한 회원가입 페이지를 만들어 주셨네요!
외부 디자인 뿐만 아니라, 코드도 굉장히 깔끔하게 잘 작성해 주신 것 같아요!^^
한가지만 첨언을 드리자면, 이후 단계에서는 <br /> 태그 대신 padding 또는 margin 을 사용하시는 방법을 배우게 된답니다!
이유는, 간격을 <br /> 처럼 정해놓지 않고, 원하는 대로 조정하기 더 쉽기 때문인데요!
뒤에서 배우기 이전에 먼저 적용해 보셔도 좋을 것 같네요!^^
현재 수준에서는 특별히 개선점은 없을 것 같고, 앞으로 더 난이도 있는 파트에서도 지금과 같이 따라오시면 좋은 결과 얻을 수 있을 것 같아요!^^
시작도 중요하지만 끝 맺음이 더 중요한 것 아시죠!
파이팅이에요!^^
* 체크박스, 라디오버튼의 색은 css의 accent-color를 활용해 보세요!^^
0
2024. 08. 07. 22:57
안녕하세요, 인프런 AI 인턴입니다. 김예원 님.
회원가입 폼의 HTML/CSS 코드 관련하여 보완할 점에 대한 고민을 하고 계시군요. 제공해주신 설명과 코드를 살펴봤습니다. 웹디자인을 배우시는데 특히 유용할 수 있는 몇 가지 점들을 찾아보았으며, 유사한 과제 및 코드 공유 관련 게시물을 참고하시면 도움이 될 것 같습니다.
코드에 대한 제안
justify-self: center;는 Flex 컨테이너 자체에는 사용되지 않습니다. 페이지를 가운데 정렬하려면, 페이지를 감싸는 외부 컨테이너에display: flex; justify-content: center; align-items: center;를 적용해 볼 수 있습니다.
<style>태그 끝에 오타인s가 있습니다. 이 부분을 제거해야 합니다.
padding: 60px 625px 60px 625px;는 좌우 중앙 정렬을 위한 의도로 보이나, 이 방법 대신margin: 0 auto;를 활용하여 페이지를 가운데 정렬할 수 있습니다.
.page클래스에width: 1920px; height: 1080px;를 지정하셨는데, 이는 특정 디스플레이 해상도에 최적화된 디자인입니다. 반응형 웹 디자인을 고려하여max-width와height를 조정하거나 상대 단위를 사용하는 것이 좋습니다.
참고할 만한 게시물
“CSS정렬 - 회원가입 과제 코드 공유”에서 다른 학습자가 제출한 회원가입 과제의 예제와 피드백을 볼 수 있습니다.
이 글은 회원가입 폼을 구성하면서 CSS의 중요 속성들을 다루었습니다. 정렬, 패딩, 마진 등에 대한 사용 예시와 함께 CSS 코드의 구조를 어떻게 하면 좀 더 깔끔하게 정리할 수 있는지 보여줍니다.
CSS와 HTML을 사용하여 웹 페이지를 꾸미는 방법에 대해 배우는 것은 웹디자인을 공부하는 데 있어 중요한 부분입니다. 디자인에 관한 전반적인 이해와 함께, 실제 코드를 통해 이를 어떻게 구현할 수 있는지를 배우는 것은 매우 중요합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.