<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
body {
display: flex;
justify-content: flex-start; /* 위쪽 공백 줄이기 */
align-items: flex-start; /* 오른쪽 공백 줄이기 */
height: 100vh;
flex-direction: column;
margin: 0;
font-family: Arial, sans-serif;
padding: 10px; /* body에 패딩 추가 */
}
.main-container {
width: 80%;
max-width: 800px;
border: 2px solid #2e2d2d; /* 네모 박스 테두리 추가 */
padding: 5px; /* 패딩 추가 */
margin-right: auto; /* 오른쪽 공백 줄이기 */
}
.header-container {
text-align: left; /* 왼쪽 정렬 */
margin-bottom: 10px; /* 아래쪽 마진 추가 */
}
.header-container h2 {
margin: 5px 0; /* 위아래 공백 줄이기 */
}
.container {
display: flex;
border: 2px solid #928989; /* 네모 박스 테두리 추가 */
}
.left, .right {
flex: 1;
padding: 10px;
}
.left {
border-right: 1px solid #928989;
}
.form-group {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.form-group label {
width: 100px;
margin-right: 10px;
}
.form-group input, .form-group select {
flex: 1;
padding: 8px;
box-sizing: border-box;
}
.form-group input[type="radio"] {
width: auto;
}
.form-group .radio-group {
display: flex;
gap: 1px;
}
.submit-btn {
display: flex;
justify-content: center;
}
.submit-btn button {
padding: 10px 20px;
font-size: 16px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
.right {
font-size: 12px; /* 오른쪽 글씨 크기 줄이기 */
}
.right p {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="main-container">
<div class="header-container">
<h2>회원가입</h2>
</div>
<div class="container">
<div class="left">
<div class="form-group">
<label for="name">이름</label>
<input type="text" id="name" name="name">
</div>
<div class="form-group">
<label for="birth-year">생년월일</label>
<select id="birth-year" name="birth-year">
<option value="">년도</option>
<!-- 2000 ~ 2024 -->
<script>
for (let year = 2000; year <= 2024; year++) {
document.write('<option value="' + year + '">' + year + '</option>');
}
</script>
</select>
<select id="birth-month" name="birth-month">
<option value="">월</option>
<!-- 1월 ~ 12월 -->
<script>
for (let month = 1; month <= 12; month++) {
document.write('<option value="' + month + '">' + month + '</option>');
}
</script>
</select>
<select id="birth-day" name="birth-day">
<option value="">일</option>
<!-- 1일 ~ 31일 -->
<script>
for (let day = 1; day <= 31; day++) {
document.write('<option value="' + day + '">' + day + '</option>');
}
</script>
</select>
</div>
<div class="form-group">
<label>성별</label>
<div class="radio-group">
<label><input type="radio" name="gender" value="male"> 남</label>
<label><input type="radio" name="gender" value="female"> 여</label>
</div>
</div>
<div class="submit-btn">
<button type="submit">확인</button>
</div>
</div>
<div class="right">
<p>· 주민등록번호 입력 없이 전화번호로 회원가입이 가능합니다.</p>
<p>· 블로그/키페/메일/N드라이브 등의 대부분 서비스가 이용 가능합니다.<br>(단, 일부 공개 게시판 및 유로서비스는 실명확인 후 이용 가능합니다.)</p>
<p>· 이름, 생년월일과 성별은 추후 변경할 수 없습니다.</p>
</div>
</div>
</div>
</body>
</html>: · - 중간점(HTML에서 사용하는 HTML 엔티티)
클래스 선택자와 ID 선택자 차이
.ger {
color: red;
}
#unique {
color: blue;
}: CSS에서 ID 선택자는 #id, 클래서 선택자는 .class
: "#"과 "."의 차이
<div class="ger">이 텍스트는 빨간색입니다.</div>
<div id="unique">이 텍스트는 파란색입니다.</div>: 예시처럼 사용 가능
: class와 id 중 우선순위가 더 높은 것은 id
CSS 선택자 우선순위 규칙
1. 인라인 스타일 (style="...") : 우선순위가 가장 높음
**ex: <div style="color: red;">
2. ID 선택자 (#id)
**우선순위 값: 100
3. 클래스 선택자, 속성 선택자, 가상 클래스 (.class, [attr], :hover, 등)
**우선순위 값: 10
4. 태그 선택자 (div, p, h1 등)
**우선순위 값: 1
5. 전체 선택자 (*)
**우선순위 값: 0
'Web Study > practice' 카테고리의 다른 글
| Python) 네이버 뉴스 기사 크롤링 & HTML 파싱 필요성 (0) | 2024.12.17 |
|---|---|
| Python) 대학교 공지사항 크롤링 (0) | 2024.12.16 |
| VS Code + 미니콘다: Python 개발 환경 구축하기 (0) | 2024.12.11 |