원본
지난 실습에 만들었던 회원 가입화면
<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> </head> <body> <h2>회원가입</h2> <input type="text" placeholder="이메일을 입력해 주세요"><br><br> <input type="text" placeholder="이름을 입력해 주세요"><br><br> <input type="password" placeholder="비밀번호를 입력해 주세요"><br><br> <input type="password" placeholder="비밀번호를 다시 입력해 주세요"><br><br> <select> <option disabled="true" selected="true">지역을 선택해 주세요</option> <option>서울</option> <option>경기</option> <option>인천</option> </select> <br><br> <input type="radio" name="gender"> 여성 <input type="radio" name="gender"> <span>남성</span> <br><br> <input type="checkbox"> 이용약관 개인정보 수집에 동의함 <hr> <button>가입하기</button> <input type="button" value="가입하기"> </body> </html>
스타일 적용
html 파일
<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./04-signup.css" rel="stylesheet"> <style> .pw { border: 1px solid blue; } </style> </head> <body> <h2>회원가입</h2> <input type="text" placeholder="이메일을 입력해 주세요" style="border:1px solid red"><br><br> <input class="name" type="text" placeholder="이름을 입력해 주세요"><br><br> <input class="pw" type="password" placeholder="비밀번호를 입력해 주세요"><br><br> <input class="pw" type="password" placeholder="비밀번호를 다시 입력해 주세요"><br><br> <select> <option disabled="true" selected="true">지역을 선택해 주세요</option> <option>서울</option> <option>경기</option> <option>인천</option> </select> <br><br> <input type="radio" name="gender"> 여성 <input type="radio" name="gender"> <span>남성</span> <br><br> <input type="checkbox"> 이용약관 개인정보 수집에 동의함 <hr> <button>가입하기</button> <input type="button" value="가입하기"> </body> </html>css파일
.name { border: 1px solid green; }
이메일 입력 부분은 HTML 태그 속성에 입력
비밀번호 입력 부분은 <style> 태그에 입력
이름 입력 부분은 CSS 파일을 만들어서 불러오기
방식을 사용함
