css는 부트스트랩을 참고하였다.
<style>
container {
width: 600px;
}
</style>
전체 범위를 가로 600px으로 제한하였다.
<body>
<div class="container text-center mt-5">
<h2>NAVER</h2>
</div>
상단에 NAVER를 띄우도록 text-center , mt-5를 사용했다.
<div id="save_form" class="container">
<label for="id">아이디</label>
<input type="text" id="id" name="id" class="form-control" />
<!-- label for = input id -->
<label for="password">비밀번호</label>
<input
type="password"
id="password"
name="password"
class="form-control"
/>
<label for="password_confirm">비밀번호 재확인</label>
<input
type="password"
id="password_confirm"
name="password_confirm"
class="form-control"
/>
<label for="name">이름</label>
<input type="text" id="name" name="name" class="form-control" />
아이디 , 비밀번호 , 비밀번호 재확인 , 이름 칸을 만들고 부트스트랩 클래스인 form-control을 적용시켰다.
<label for="birth_year">생년월일</label>
<div class="row">
<div class="col">
<input
type="text"
id="birth_year"
name="birth_year"
placeholder="년(4자)"
class="form-control"
/>
</div>
<div class="col">
<select name="birth_month" id="" class="form-select">
<option value="">월</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col">
<input
type="text"
id="birth_day"
name="birth_name"
placeholder="일"
class="form-control"
/>
</div>
</div>
부트스트랩으로 지원하는 그리드 형식인 전체를 class row로 묶고 개당 항목에 class col 속성을 입혀서
같은줄에 3개가 나오도록 세팅했다.
<label for="gender">성별</label>
<select name="gender" id="gender" class="form-select">
<option value="male">남</option>
<option value="female">여</option>
<option value="no">선택 안함</option>
</select>
select문과 option태그를 이용하여 한가지를 선택받아 gender에 답을 담도록 했다.
<label for="mobile">휴대전화</label>
<select name="nation_code" id="" class="form-select">
<option value="82">대한민국 +82</option>
<option value="1">미국 +1</option>
<option value="2" selected>프랑스 +33</option>
<!-- selected 기본으로 선택되어있게 -->
</select>
<div class="row g-2">
<!-- 가로로 배치할 요소의 숫자 g-X -->
<div class="col-8">
<!-- 가로를 12칸 차지할비율 col-X -->
<input
type="text"
id="mobile"
name="mobile"
placeholder="전화번호 입력"
class="form-control mb-2 mt-2"
/>
</div>
<div class="col-4 d-grid">
<!-- onclick 속성: onclick속성을 적용한 요소(태그)에 click 이벤트가
발생하면 실행할 javascript 함수 또는 문법을 지정함 -->
<input
type="button"
value="인증번호 받기"
class="btn btn-success btn-block mb-2 mt-2"
onclick="hello()"
/>
</div>
그리드 속성중 row g-x 가 있는데 x만큼 항목이 있다는 뜻이다.
col-x는 x만큼 자리를 차지한다는 뜻이다 ( 12칸이 최대 )
인증번호 받기 버튼은 onclick 속성을 넣어 클릭시 hello() 메소드가 실행되도록 했다.
option에 selected 항을 사용하면 기본 설정으로 보여진다.
const hello = () => {
console.log("콘솔에 보여집니다.");
alert("alert으로 보여집니다.");
};
'Visual Studio Code > Visual Studio Code icia 34일차' 카테고리의 다른 글
Visual Studio Code dom에 대하여 - 2 (0) | 2023.04.10 |
---|---|
Visual Studio Code dom에 대해서 - 1 (0) | 2023.04.10 |
Visual Studio code events 활용 (0) | 2023.04.10 |
Visual Studio Code JavaScript 문법 (0) | 2023.04.10 |