DB와 연동해서 돌리려면 단순 ul li가 아니라, 폼태그 중에서 써야함(select, radio 등)
3. 회사 위치 란
웹표준 준수 위한 폼태그 select UI 자바스크립트
3-1. < input type="hidden" >
화면에는 안 보이는데, 태그로는 존재하는 란
- 시스템상에서 중요하지만, 보일 필요는 없어서.
- select 같이 외형 못생긴 놈을 대신하기 위함.
- 자바스크립트에서 접근해서 넣기!
3-2. 지역선택 영역 생성 col-md-2
3-3. ul li로 지역 삽입
line-height는 패딩 때문임. 아래처럼 CSS 수정하기
#contact > ul > li{ padding-top: 2rem;}
3-4. icon 삽입
3-5. "bg-white border oveflow-hidden position-relative"
<li class="col-md-2">
<div class="selectDiv bg-white border oveflow-hidden position-relative">
<p>지역선택<i class="xi-angle-down"></i></p>
<ul class="position-absolute">
<li>잠실</li>
<li>강남</li>
<li>정자</li>
<li>판교</li>
</ul>
</div>
</li>
3-6. selectDiv를 공통 액션 js-selectDiv로 수정
CSS .js-selectDiv.on{ height: 150px; }
.js-selectDiv{ transition: 0.5s; }
.js-selectDiv.on{ height: 150px; }div 클릭하면 addClass removeClass (+CSS)로 만들 예정!
<li class="col-md-2">
<div class="js-selectDiv bg-white border oveflow-hidden position-relative">
<p>지역선택<i class="xi-angle-down"></i></p>
<ul class="position-absolute">
<li>잠실</li>
<li>강남</li>
<li>정자</li>
<li>판교</li>
</ul>
</div>
</li>
3-7. 자바스크립트 삽입
div 클릭하면 addClass removeClass (+CSS)로 만들 예정!
<script>
document.querySelectorAll('form .js-selectDiv')[0]
// array로 잡힌다! [0] 잡은 애들 중에 첫번째
</script> 
3-8. 콘솔창에서 확인하기
<script>
const areaSelectEl = document.querySelectorAll('form .js-selectDiv')[0]
// array로 잡힌다! [0] 잡은 애들 중에 첫번째
console.log(areaSelectEl, typeof areaSelectEl); // 콘솔창에서 확인하기
</script> 
3-9. 이벤트리스너 : 클릭 시 일어날 일, .on 넣고빼기
<script>
const areaSelectEl = document.querySelectorAll('form .js-selectDiv')[0]
areaSelectEl.addEventListener('click', function(e){
///// 클릭 시 일어날 일
})
</script> 
3-10. 콘솔로그 e.타겟 : 함수와 연결된 객체 확인
<script>
const areaSelectEl = document.querySelectorAll('form .js-selectDiv')[0]
areaSelectEl.addEventListener('click', function(e){
console.log(e.target);
})
</script> 
3-11. 클릭 시 일어날 일 = classList.toggle('on')
<script>
const areaSelectEl = document.querySelectorAll('form .js-selectDiv')[0]
areaSelectEl.addEventListener('click', function(e){
this.classList.toggle('on');
})
</script> 
여기까지 코드
<style>
/* 자바스크립트 */
.js-selectDiv{ transition: 0.5s; height: 30px; }
.js-selectDiv.on{ height: 150px; }
</style>
3-12. forEach( el=item, index )
<script>
const areaSelectEl = document.querySelectorAll('form .js-selectDiv')[0]
areaSelectEl.addEventListener('click', function(e){
this.classList.toggle('on');
})
// 쟤네중에 누가 될지 모르니 [0] [1] [2] 붙일 수 없다.
var areali = document.querySelectorAll('form .js-selectDiv li');
// 한마리 아니고 집합체라서 클릭 이벤트 바로 받을 수 없다! forEach 껴야 함
areali.forEach(function(el, index){
})
</script> - 쟤네 중 누가 될지 모르니 [0][1][2] 붙일 수 없다. (무작위니까)
- 한마리 아니고 집합체라서 클릭 이벤트 바로 받을 수 없다! forEach 껴야 함
3-13. el이 addEventListener 받음
- forEach 끼고, el이 클릭 이벤트 받음 (=클릭 시 일어날 일)
<script>
// 쟤네중에 누가 될지 모르니 [0] [1] [2] 붙일 수 없다.
var areali = document.querySelectorAll('form .js-selectDiv li');
// 한마리 아니고 집합체라서 클릭 이벤트 바로 받을 수 없다! forEach 껴야 함
areali.forEach(function(el, index){
el.addEventListener('click', function(){
})
})
</script> 
+) this 값을 알아보기 위해 콘솔 로그 찍어보기
3-14. 지역선택란을 _thisText로 바꿔치기
<script>
// 쟤네중에 누가 될지 모르니 [0] [1] [2] 붙일 수 없다.
var areali = document.querySelectorAll('form .js-selectDiv li');
// 한마리 아니고 집합체라서 클릭 이벤트 바로 받을 수 없다! forEach 껴야 함
areali.forEach(function(el, index){
el.addEventListener('click', function(){
var _thisText = this.innerHTML
document.querySelector('form .js-selectDiv p').innerHTML = _thisText;
// 지역선택란을 _thisText로 바꿔치기 할게
})
})
</script> div 안의 내용을 읽을 때와 마찬가지로, div에 내용을 변경할 때도 innerHTML, innerText, textContent 속성을 사용할 수 있습니다.
innerHTML 속성에 HTML 문자열을 적용하면, html element가 div 태그 안에 들어가서 style이 적용된 문자열이 브라우저에 나타나는 것을 볼 수 있습니다. innerText와 textContent는 할당한 문자열을 그대로 텍스트 형태로 div안에 넣습니다.
3-15. 마지막으로.. 이 모든 값이 hidden에 담겨야 함!
< select >의 못생김이 싫어! hidden하고 예쁘게 내보낼거야!
HTML 3-1. < input type="hidden" >
<input type="hidden" name="area">input의 value값이 폼태그에 전송 가능하도록 전환하기!
<script>
const areaSelectEl = document.querySelectorAll('form .js-selectDiv')[0]
const areainput = document.getElementsByName('area')[0]; // ★★★★
// console.log(areainput, typeof areainput); // 콘솔창에서 확인하기
areaSelectEl.addEventListener('click', function(e){
this.classList.toggle('on');
})
// 쟤네중에 누가 될지 모르니 [0] [1] [2] 붙일 수 없다.
var areali = document.querySelectorAll('form .js-selectDiv li');
// 한마리 아니고 집합체라서 클릭 이벤트 바로 받을 수 없다! forEach 껴야 함
areali.forEach(function(el, index){
el.addEventListener('click', function(){
var _thisText = this.innerHTML
document.querySelector('form .js-selectDiv p').innerHTML = _thisText;
// 지역선택란을 _thisText로 바꿔치기 할게
// input의 value값! 이제 폼태그에 전송하도록 컨버트 됨!
areainput.value = _thisText; // ★★★★
console.log(areainput.value); // ★★★★
})
})
</script> - _thisText('잠실' '강남' '판교' 등) 값을 areainput.value에 삽입!
- 이제 폼태그에 전송할 수 있도록 전환됨! (콘솔 로그 찍어서 확인)
4. 오후 실습
아래 처럼 수정하기
① .on p i rotate 클릭 트랜스폼 180도
#contact .js-selectDiv.on p i{transform: rotate(180deg);}② 지역선택 z-index : 1
내가 만든 것
마저 완성해보기
+) 타 훈련생 것 참고해 더 공부하기
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 폰트 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<!-- 플러그인 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<style>
*{margin: 0; padding: 0;}
ul, li{list-style: none;}
a{text-decoration: none; color: rgb(128, 128, 128);}
#agree:checked + label:before{ color: red; }
#contact [type="text"]{border: 0; outline: 0; width: 100%;}
#contact .text-sm{width: 25%; background-color: lightgray;}
.line{border: 2px solid orange; border-radius: 5px; overflow: hidden;}
.formIndent{ padding-left: 1rem; padding-right: 1rem;}
#contact > ul > li{ padding-top: 2rem;}
#contact .line p {transform: translateY(-20%);}
.js_selectDiv{ transition: 0.5s; height: 30px; }
.js_selectDiv.on{ height: 150px;}
.js_selectDiv.on p i{ transform: rotate(180deg);}
.location{
height: 100px;
}
li.location div.js_selectDiv{
z-index: 1000;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<input type="hidden" name="area">
<div class="form container">
<form action="http://~~~~.cafe24.com/pwa/" method="POST" name="contact" id="contact">
<ul class="row">
<!-- 회사명 -->
<li class="col-md-10">
<div class="line blueLine d-flex flex-column">
<p class="formIndent">
<label class="bg-white px-2" for="">회사명</label>
<input type="text" name="company" placeholder="회사명을 입력해주세요">
</p>
</div>
</li>
<!-- 회사위치 -->
<li class="location col-md-2">
<div class="line js_selectDiv position-relative overflow-hidden bg-white">
<p class="formindent">
<label class="bg-white px-2" for="">회사위치<i class="bi bi-chevron-down"></i></label>
</p>
<ul class="position-absolute">
<li>잠실</li>
<li>강남</li>
<li>정자</li>
<li>판교</li>
</ul>
</div>
<script>
const areaSelectEl = document.querySelectorAll('form .js_selectDiv')[0];
const areainput = document.getElementsByName('area')[0];
areaSelectEl.addEventListener('click', function(e){
this.classList.toggle('on');
})
var areali = document.querySelectorAll('form .js_selectDiv li');
areali.forEach(function( el, index ){
el.addEventListener('click', function(){
var _thisText = this.innerHTML;
document.querySelector('form .js_selectDiv p').innerHTML = _thisText;
areainput.value = _thisText;
})
})
</script>
</li>
<!-- 채용 직무 -->
<li class="col-md-6">
<div class="line d-flex flex-column formIndent">
<p class="d-block">
<label class="bg-white px-2">채용직무<span>중복선택가능</span></label>
<p class="m-0">
<input type="checkbox" name="position[0]" id="position0" value="frontend">
<lable for="position0">프론트엔드</lable>
<input type="checkbox" name="position[1]" id="position1" value="publisher">
<lable for="position1">퍼블리셔</lable>
<input type="checkbox" name="position[2]" id="position2" value="planner">
<lable for="position2">기획자</lable>
<input type="checkbox" name="position[3]" id="position3" value="designer">
<lable for="position3">디자이너</lable>
<input type="text" name="position[4]" id="position4" value="">
<lable for="position4">기타<input type="text" class="text-sm"></lable>
</p>
</p>
</div>
</li>
<!-- 주력 언어 -->
<li class="col-md-6">
<div class="line otherLine d-flex flex-column formIndent">
<p class="d-block">
<label class="bg-white px-2">주력언어<span>중복선택가능</span></label>
<p class="m-0">
<input type="checkbox" name="ability[0]" id="ability0" value="react">
<lable for="ability0">리액트</lable>
<input type="checkbox" name="ability[1]" id="ability1" value="node">
<lable for="ability1">노드</lable>
<input type="checkbox" name="ability[2]" id="ability2" value="scss">
<lable for="ability2">php</lable>
<input type="checkbox" name="ability[3]" id="ability3" value="php">
<lable for="ability3">SCSS</lable>
<input type="checkbox" name="ability[4]" id="ability4" value="javascript">
<lable for="ability4">제이쿼리</lable>
<input type="text" name="ability[5]" id="ability5" value="">
<lable for="ability5">기타<input type="text" class="text-sm"></lable>
</p>
</p>
</div>
</li>
<!-- 담당자명 -->
<li class="col-md-2">
<div class="line d-flex flex-column">
<p class="formIndent m-0">
<label class="bg-white px-2" for="">담당자명</label>
<input type="text" name="people" class="d-block">
</p>
</div>
</li>
<!-- 연락처 -->
<li class="col-md-10">
<div class="line d-flex flex-column">
<p class="formIndent m-0">
<label class="bg-white px-2" for="">연락처</label>
<input type="text" name="contact" placeholder="카톡, 메일, 전화번호 등" class="d-block">
</p>
</div>
</li>
<!-- 남기고 싶은 말 -->
<li class="col-md-12">
<div class="line blueLine d-flex flex-column">
<p class="formIndent">
<label for="message">남기고 싶은 말</label>
<input type="text" name="message" id="message" placeholder="자유롭게 작성 부탁드립니다.">
</p>
</div>
</li>
</ul>
<!-- 개인정보수집이용동의 -->
<p> <!-- 체크박스에 name 필요없음! 데이터를 서버에 보낼 게 아니라, 동의 안하면 못 넘어가니까 -->
<input type="checkbox" id="agree" class="d-none">
<label for="agree" class="bi bi-app">개인정보수집이용동의</label><a href="#popagree">약관</a>
</p>
<p>
<input type="image" src="./contact.svg" style="height:20px" value="제출">
</p>
</form>
</div>
<div id="popagree" class="d-none position-absolute">
<!--여기에 width값이 들어가야하는데 그건 디자이너 영역이라 물어보고 하드코딩한다-->
<div class="popcontent">
약관 가져오기
</div>
</div>
</body>
</html>