보기 좋은 옵션을 선택할 수 있는 select와 option
<select name="options">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
<option value="item5">item5</option>
</select>select 태그는 input:checkbox 또는 input:radio를 한곳에 축약해놓은 듯한 느낌을 줍니다. 여러가지 선택을 하고플 땐 select의 속성에 multiple 또는 size를 통해 몇개의 옵션을 보여줄 것인지 등을 설정할 수는 있지만 추천드리진 않습니다. select의 내장된 모든 기능을 사용하기 위해서는 아무런 설정을 주지 않는 것이 최고입니다.
가장 큰 단점으로는 커스터마이징이 많이 어렵다는 점인데요. 네이버 스토어에서는 ul 태그를 사용하여 한땀한땀 아름답게 코딩한 것을 확인할 수 있었습니다. 하지만 HTML의 기본 select 에서는 제공하지만 커스터마이징한 네이버의 select는 제공하지 못하는 것이 있습니다. 바로 윈도우 창의 감지능력입니다.
화면 아래로 내려가면 저렇게 끊겨버립니다. 하지만 일반 select는 윈도우가 아닌 모니터의 크기 등을 감지하는 듯합니다. 그래서 윈도우 창이 하단으로 내려가면 select는 option의 갯수 및 크기를 고려하여 위쪽으로 쏘아올려주기도 합니다.
CSS 를 깎듯히 연마하여 예쁜 UI의 select 를 구현하느냐, 디자인을 버리고 기능에 충실한 select를 그대로 사용할 것인가... 여러분들의 선택입니다~
p164 회원가입 폼 만들어보기
우선 뼈대를 잡습니다. 내가 어디서 어디까지를 영역으로 잡아올지 생각하셔야 합니다. 상단의 제목 부분, 중간에 정보입력칸, 하단의 버튼들, 그리고 중간의 정보입력칸은 크게 사용자 정보와 이벤트 선택 부분으로 나뉩니다.
코드 예시
<main>
<form action="">
<h1>회원가입을 환영합니다.</h1>
<fieldset>
<legend>사용자 정보</legend>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
</fieldset>
<ul>
<li><button>가입하기</button></li>
<li><button>취소</button></li>
</ul>
</form>
</main>중복되는 친구들은 ul로 감싸서 작업해줍니다. label 의 for 값과 input 의 id 값을 일치시켜주셔야 합니다.
<ul>
<li>
<label for="i">아이디</label>
<input type="text" id="i" />
</li>
<li>
<label for="e">이메일</label>
<input type="email" id="e" />
</li>
<li>
<label for="p">비밀번호</label>
<input type="password" id="p" />
</li>
<li>
<label for="pc">비밀번호 확인</label>
<input type="password" id="pc" />
</li>
-- 여기서 부터 select로 가입경로 , textarea 사용해서 메모 추가
</ul>select 를 사용해서 가입경로를 ul태그 안에 추가해줍니다.
<ul>
--윗부분코드
<select >
<option value="SNS">SNS</option>
<option value="지인소개">지인소개</option>
<option value="포털검색">포털검색</option>
</select>
</ul>option 의 속성에 selected 를 추가하면 미리 값을 선택할 수도 있습니다. 아래의 코드를 공개하지는 않겠지만 여러분들이 이곳저곳 넣어서 확인하는 작업을 꼭 하셔야 본인의 것으로 흡수할 수 있습니다. select와 연결된 label의 경우 여기 입력해야해! 라고 집중은 시켜주지만 select를 쫙 펼쳐주지 못한다는 것이 가장 아쉬운 부분입니다만 javascript 를 줄여 js 라고 쓰는데 js에서 간단히 펼쳐줄 수 있으니 크게 걱정할 부분은 아닙니다!
textarea 역시 id 값과 label 의 for 값을 일치시켜 연결부탁드립니다.
<ul>
...상단 코드
<li>
<label for="ta"></label>
<textarea id="ta"></textarea>
</li>
</ul>input 을 배우면서 알게된 required autofocus 등을 적절히 사용하여 form 기능을 입혀주세요. 가입경로와 메모는 textare, select 안에 넣어주시면 됩니다.
마지막으로 input:radio 를 만들어주시면 됩니다.
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<ul>
<li>
<input type="radio" name="같은 이름 사용" id="email1" required <=한군데만 입력 />
<label for="email1">메일 수신</label>
</li>
<li>
<input type="radio" name="같은 이름 사용" id="email2" />
<label for="email2">메일 수신 안 함</label>
</li>
</ul>
</fieldset>input:radio는 name속성을 꼭 통일시켜줘야 한가지만 선택이 가능하게 되며 required도 한 군데만 넣어줘도 됩니다!
위 사진과 같이 만들어지면 끝!
이제 같은 폴더에 form.css를 만들고 head 태그 안에 link로 연결해줍니다.
<head>
<link rel="stylesheet" href="form.css" />
</head>/* form.css 안에 복붙 ㄱㄱ */
form {
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
row-gap: 20px;
}
form ul {
list-style-type: none;
}
form li,
form ul {
padding: 0;
}
form > :nth-child(2) ul {
display: flex;
flex-direction: column;
row-gap: 10px;
}
form > :nth-child(2) li {
display: flex;
}
form > :nth-child(2) label {
width: 120px;
}
form > :nth-child(2) input,
form > :nth-child(2) textarea {
flex: 1;
}
textarea {
resize: none;
height: 100px;
}
form > :nth-child(3) ul,
form > ul {
display: flex;
column-gap: 20px;
}
form > ul {
justify-content: center;
column-gap: 10px;
}
