코드 해석_0325_회원가입폼/필수입력/자동포커스/읽기전용/안내문구/메일형식/자동검사/셀렉터/수도클래스/의사클래스/가상클래스

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

코드 해석_0325_회원가입폼/필수입력/자동포커스/읽기전용/안내문구/메일형식/자동검사/셀렉터/수도클래스/의사클래스/가상클래스 본문

<401>

코드 해석_0325_회원가입폼/필수입력/자동포커스/읽기전용/안내문구/메일형식/자동검사/셀렉터/수도클래스/의사클래스/가상클래스

yo-u-loo 2026. 3. 25. 20:48

👇🏻 HTML

<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>회원 가입</title>
  <link rel="stylesheet" href="css/register2.css">
</head>
<body>
<!-- 회원가입 폼 시작 -->
  <form id="signup">
  <!-- 로그인 정보 영역 -->
    <fieldset>
      <legend>로그인 정보</legend> <!-- 그룹 제목 -->
      <ul>
      <!-- 아이디 입력 -->
        <li>
          <label for="userid">아이디</label>
          <input id="userid" name="userid" type="text" required autofocus>
          <!-- 필수입력, 자동포커스 -->
        </li>
        <!-- 비밀번호 입력 -->
        <li>
          <label for="pwd1">비밀번호</label>
          <input id="pwd1" name="pwd1" type="password"  required>
          <!-- 입력 텍스트 숨김 -->
        </li>
         <!-- 비밀번호 입력2 -->
        <li>
          <label for="pwd2">비밀번호 확인</label>
          <input id="pwd2" name="pwd2" type="password" required>
           <!-- 비밀번호 확인용  -->
        </li>
         <!-- 회원 등급 (읽기 전용) -->
        <li>
          <label for="level">회원 등급</label>
          <input id="level" name="level" type="text" readonly value="준회원">
           <!-- 읽기 전용, 수정 불가 -->
        </li>
      </ul>
    </fieldset>
     <!-- 개인 정보 영역 -->
    <fieldset>
      <legend>개인 정보</legend>  <!-- 그룹 제목 -->
      <ul>
       <!-- 이름 입력 -->
        <li>
          <label for="fullname">이름</label>
          <input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
           <!-- 안내 문구, 필수 입력 -->
        </li>
         <!-- 메일 주소 입력 -->
        <li>
          <label for="email">메일 주소</label>
          <input id="email" name="email" type="email" placeholder="abcd@domain.com" required autocomplete="off">
           <!-- 이메일 형식 자동 검사, 안내 문구, 필수 입력, 자동 완성 X -->
        </li>
        <!-- 연락처 입력 -->
        <li>
          <label for="tel">연락처</label>
          <input id="tel" name="tel" type="tel" autocomplete="off">
          <!-- 전화번호 입력창 -->
        </li>  
      </ul>
    </fieldset>
    <!-- 제출 버튼 영역 -->
    <fieldset>
      <button type="submit"> 제출 </button>
      <!-- 클릭 시 폼 데이터 전송 -->
    </fieldset>
  </form>
</body>
</html>

👆🏻 13/results/register2.html

👇🏻 CSS

/* 모든 요소 기본 여백 제거 */
* {
	margin: 0; /* 바깥 여백 제거 */
	padding: 0; /* 안쪽 여백 제거 */
}

/* 전체 페이지 스타일 */
body {
	background: #ccc; /* 배경색 */
	padding: 20px; /* 화면 안쪽 여백 */
}

/* 회원가입 폼 전체 박스 */
#signup {
	background:#fff; /* 배경색 */
	border:1px solid #222; /* 테두리 */
	border-radius: 5px; /* 모서리 둥글게 */
	padding: 20px; /* 내부 여백 */
	width: 400px; /* 너비 */
	margin:30px auto; /* 위아래 여백, 중앙 정렬 */
}

/* 그룹 박스 스타일 */
#signup fieldset {
	border: 1px solid #ccc; /* 테두리 */
	margin-bottom: 30px; /* 하단 여백 */
}

/* 제목 스타일 */
#signup legend {
	font-size: 16px; /* 글자 크기 */
	font-weight: bold; /* 글자 굵기 */
	padding-left:5px; /* 왼쪽 여백 */
	padding-bottom: 10px; /* 하단 여백 */	
}

/* 리스트 항목 스타일 */
#signup ul li {
	line-height: 30px; /* 줄 높이 (세로 간격) */
	list-style: none; /* 마커 모양 제거 */
	padding: 5px 10px; /* 내부 여백 */
	margin-bottom: 2px; /* 하단 여백 */
}

/* 버튼 스타일 */
#signup button {	
	border: 1px solid #222; /* 테두리 */
	border-radius: 20px; /* 모서리 둥글게 */
	display: block; /* 블록 요소로 변경 */
	font-size: 16px; /* 글자 크기 */
	letter-spacing: 1px; /* 글자 간격 */
	margin: auto; /* 여백 중앙 정렬 */
	padding: 7px 25px; /* 내부 여백 */
}

/* 로그인&개인정보 스타일 */
#signup label {
	float: left;  /* 왼쪽 배치 */
	font-size: 13px;  /* 글자 크기 */
	width: 110px;  /* 너비 */
}

/* signup의 input의 type중 text, password, tel, email만 적용 */
#signup input[type=text], 
#signup input[type=password], 
#signup input[type=tel], 
#signup input[type=email] {  
	border: 1px solid #ccc; /* 테두리 */
	border-radius: 3px; /* 모서리 둥글게 */
	font-size: 13px; /* 글자 크기 */
	padding: 5px; /* 내부 여백 */
	width: 200px; /* 너비 */
}					

/* signup의 input의 required만 적용 */
#signup input[required] {
	border:1px red solid; /* 테두리 */
}

/* signup의 input의 readonly만 적용 */
#signup input[readonly] {
	border:none; /* 테두리 제거 */
}

👆🏻 13/results/css/register2.css

http://127.0.0.1:5500/doit-hcj-new-main/13/results/register2.html

👇🏻 CSS

* {
	margin: 0;
	padding: 0;
}

body {
	background: #ccc;
	padding: 20px;	
}

#signup {
	background:#fff;
	border:1px solid #222;
	border-radius: 5px;
	padding: 20px;
	width: 400px;	
	margin:30px auto;
}
		
#signup fieldset {
	border: 1px solid #ccc;
	margin-bottom: 30px;
}
		
#signup legend {
	font-size: 16px;
	font-weight: bold;
	padding-left:5px;
	padding-bottom: 10px;	
}

#signup ul li {
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
}
			
#signup button {	
	border: 1px solid #222;
	border-radius: 20px;
	display: block;
	font-size: 16px;
	letter-spacing: 1px;
	margin: auto;
	padding: 7px 25px;
}

#signup label {
	float: left;
	font-size: 13px;
	width: 110px;
}

/* signup의 input중에서 type이 radio를 제외한 모든 input 스타일에 적용 */
#signup input:not([type=radio]) {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 13px;
	padding: 5px;
	width: 200px;
}					

#signup input[required] {
	border:1px red solid;
}

#signup input[readonly] {
	border:none;
}

/* signup의 fieldset중에서 마지막 type에 적용 */
#signup fieldset:last-of-type {
  border:none; /* 테두리 제거 */
  margin-bottom:0; /* 하단 여백 제거 */
}

/* signup의 button에 마우스 올렸을때 적용 */
#signup button:hover {
  background-color:#222; /* 배경 색상 */
  color:#fff; /* 글자 색상 */
}

👆🏻 13/results/css/register3.css

http://127.0.0.1:5500/doit-hcj-new-main/13/results/register3.html

#html #form #required #autofocus #readonly #placeholder #autocomplete

#회원가입폼 #필수입력 #자동포커스 #읽기전용 #수정불가 #안내문구 #메일형식 #자동검사

#css #border-radius #attribureselectors #selectors #Pseudo-class #:not #:nth-of-type #:hover

#선택자 #셀렉터 #수도클래스 #의사클래스 #가상클래스 #호버 #마우스 #마우스포인트

'<401>' 카테고리의 다른 글

[Flexible and fixed] 브라우저 넓이에 반응하는 웹사이트 코딩 실무 예제 (0)	2026.04.08
[HD] HD 해상도에 최적화 된 웹사이트 코딩 실무 예제 (0)	2026.04.08
코드 해석_0327_product/flex/position/relative/absolute/wrap/overflow/hidden/opacity/transition/z-index/transform/translate (0)	2026.03.27
코드 해석_3/27_노란 박스를 화면 정중앙에 배치시키는 방법 (0)	2026.03.27
코드 해석_0326_뱃지/종/아이콘/폰트어썸/플렉스/저스티피콘텐츠/포지션/릴레티브/앱솔루트 (0)	2026.03.26

'<401>' Related Articles

無제

코드 해석_0325_회원가입폼/필수입력/자동포커스/읽기전용/안내문구/메일형식/자동검사/셀렉터/수도클래스/의사클래스/가상클래스 본문

코드 해석_0325_회원가입폼/필수입력/자동포커스/읽기전용/안내문구/메일형식/자동검사/셀렉터/수도클래스/의사클래스/가상클래스

'<401>' 카테고리의 다른 글

티스토리툴바