13/results/register3.html
13/results/css/register3.css
이 예제에서 저자가 우리에게 알려주고 싶었던 가장 중요한 부분은 '다양한 CSS 선택자의 활용'
주요 CSS 선택자
[required] (리콰이어드) - 필수 입력 필드만 선택하여 빨간색 테두리 적용
[readonly] (리드온리) - 읽기 전용 필드만 선택하여 테두리 제거
:not([type=radio]) (낫 타입 라디오) - 라디오 버튼이 아닌 입력 필드만 선택하여 공통 스타일 적용
:last-of-type (라스트 오브 타입) - 여러 fieldset 중 가장 마지막 fieldset만 선택하여 하단 여백 제거
:hover (호버) - 버튼 위에 마우스를 올렸을 때 배경색과 글자색 변경
HTML은 구조를 잡는 뼈대
fieldset과 legend로 구역을 나누고 있다
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<link rel="stylesheet" href="css/mysoul.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>
<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>
</ul>
</fieldset>
/*ㅡㅡㅡㅡㅡ*/
/* 여기에용 */
/*ㅡㅡㅡㅡㅡ*/
<fieldset>
<button type="submit"> 제출 </button>
</fieldset>
</form>
</body>
</html>/* 모든 요소의 기본 마진과 패딩을 없애서 깔끔하게 초기화해 줍니다. */
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
padding: 20px;
}
/* 폼 전체 껍데기(#signup)의 디자인을 잡아주는 부분입니다. */
#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 label {
float: left; /* 라벨을 왼쪽으로 띄워서 입력 칸과 나란히 배치되게 합니다. */
font-size: 13px;
width: 110px;
}
/* 1. 부정 가상 선택자 (:not) */
/* input 태그 중에서 type이 radio인 것만 '제외하고' 나머지 모든 input에 이 스타일을 적용하겠다는 뜻입니다. */
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
padding: 5px;
width: 200px;
}
/* 2. 속성 선택자 ([속성명]) */
/* 태그에 required 속성이 있는 필수 입력 칸만 찾아서 테두리를 빨간색으로 강조합니다. */
#signup input[required] {
border:1px red solid;
}
/* 태그에 readonly 속성이 있는 읽기 전용 칸만 찾아서 테두리를 아예 없애버립니다. */
#signup input[readonly] {
border:none;
}
/* 3. 구조 가상 클래스 (:last-of-type) */
/* 여러 개의 fieldset 중에서 가장 마지막에 있는 fieldset(제출 버튼 구역)만 찾아서 테두리와 하단 여백을 없앱니다. */
#signup fieldset:last-of-type {
border:none;
margin-bottom:0;
}
/* 4. 동적 가상 클래스 (:hover) */
/* 사용자가 제출 버튼 위에 마우스를 올렸을 때 배경을 까맣게, 글자를 하얗게 반전시켜줍니다. */
#signup button:hover {
background-color:#222;
color:#fff;
}'직업훈련 > 스터디 준비' 카테고리의 다른 글
| [Study] CSS Tables property (0) | 2026.03.18 |
|---|---|
| [Study] CSS color property (0) | 2026.03.18 |
| [Study] 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지 (0) | 2026.03.16 |
| [Study] CSS 경량화(Minify) 툴 사용법 (0) | 2026.03.13 |