반응형, 폼태그, 체크박스 활용을 중점적으로 작업한 Naver Career 포트폴리오 입니다.
🔎프로젝트 정보
- 프로젝트명: Naver Career
- 제작기간: 4일
- 사용언어: HTML, CSS, JQUERY
- 분류: 반응형
🚩포인트
-
반응형
1-0. 반응형 작업
1-1. 요소 가로세로 비율 유지 -
form 태그 사용
-
모바일 체크박스
3-1. '전체' 체크박스 선택 시, 해당 카테고리 내 모든 체크박스 선택 / 해제 시, 해당 카테고리 내 모든 체크박스 해제
3-2. 클리어 버튼 클릭 시, 모든 체크박스 해제
1. 반응형
1-0. 반응형 작업
각 css 파일의 하단에 @media를 사용하여 1230px 이하 1025px 까지는 작은 pc화면,
1024px 이하 768px 까지는 태블릿 화면, 767px 이하는 모바일 화면으로 작업했습니다.
/* 작은 화면 pc 태블릿 가기전까지
1400~1025
*/
@media (max-width:1230px) {
...
}
/* 태블릿 1024~ [768] : 최소를 기준으로*/
@media (max-width: 1024px) {
...
}
/* 모바일 767~[320] */
@media (max-width: 767px) {
...
}1-1. 이미지 가로 세로 비율 유지
반응형에서 요소의 가로 길이가 변하면 세로의 길이도 비율에 맞게 유동적으로 변경되어야하기 때문에 padding-bottom 을 이용해 요소의 가로 세로 비율을 유지시킵니다.
/* 부모요소 */
.section.people .people-list .img-box {
position: relative;
width: 100%; height: 0;
padding-bottom: 47%;
}
/* 자식요소 */
.section.people .people-list .img-box img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}-
부모요소의 넓이를 지정하고 그 넓이에 비해서
padding-bottom을 줍니다.- 만약 부모요소의 너비가 50% 일 때 1:1 비율을 주고 싶으면 padding-bottom 도 50%, 1:2 비율을 주고 싶으면 100%.
-
부모요소는
position:relative, 자식요소는position:absolute로 지정하여 자식요소인 img가 움직이지 않도록 고정합니다.
모바일에서는 이미지 비율이 1:1이 되므로 padding-bottom: 100%;로 바꿔주었습니다.
2. form 태그 사용
네이버 커리어에서는 채용 검색시 <form> 태그가 사용되는데, pc와 mobile에서 폼태그 스타일이 달라 group-pc , group-mobile 로 나눠 작업했습니다.
<form action="" method="get">
<fieldset class="search-wrap">
<legend class="blind">채용 검색</legend>
<div class="group-pc">
<!--...-->
</div>
<div class="group-mobile">
<!--...-->
</div>
</fieldset>
</form>옵션을 선택하는 부분은 <select> 와 <option> 으로 구성했고
placeholder 처럼 기본적으로 보여지는 문구가 필요할 때는 <option>에 disabled selected 속성을 입력하면 됩니다.
<div class="select-area">
<label class="cate" for="">직군</label>
<select name="" id="" class="select-box">
<option value="" disabled selected>직군선택</option>
<option value="tc">Tech</option>
<option value="ds">Design</option>
<option value="sb">Service & Business</option>
<option value="cp">Corporate</option>
</select>
</div>
<form>: 사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의한다.
-
action속성폼 데이터가 도착할 URL을 명시한다.
-
method속성폼데이터가 서버로 제출될 때 사용되는 HTTP 메소드를 명시한다.
GET 방식과 POST 방식이 있다.
- GET 방식 : 입력된 데이터가 URL에 의해 전송되므로 암호화하지 않으면 URL만으로도 어떤 데이터를 입력했는지 알 수 있다. POST 방식보다 상대적으로 보안이 취약하고 전송할 수 있는 데이터도 제한적이다.
- POST 방식 : 입력된 내용의 크기에 제한을 받지 않고 입력한 내용이 노출되지 않기 때문에 회원가입, 로그인 시 등에 많이 사용된다.
<fieldset>: 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다. 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.
<legend>를 함께 사용해야 한다.
<legend>: fieldset 요소의 제목(LEGEND)을 표시한다.
3. 모바일 체크박스
3-0. 체크박스 스타일 지정
먼저 <input>의 id 속성값과 <label>의 for 속성값을 일치시켜 연결시켜줍니다.
<li class="check-item">
<input type="checkbox" name="tech" id="tc5">
<label for="tc5">Hardware</label>
</li>input의 체크박스 스타일을 사용하지 않고 가상요소인 ::before로 체크박스를 꾸며줍니다.
input이 체크되었을 때 ::before의 스타일도 변경되어야하기 때문에 input:checked+label::before의 스타일도 지정합니다.
.sc-search .group-mobile .check-item label::before {
content: '';
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
width: 10px;
height: 10px;
border: 1px solid #d0d0d0;
border-radius: 50%;
margin-right: 10px;
}
.sc-search .group-mobile input:checked+label::before { background: #000; }3-1. '전체' 체크박스
'전체' 체크박스 선택 시, 해당 카테고리 내 모든 체크박스 선택이 되고
해제 시, 해당 카테고리 내 모든 체크박스 해제됩니다.
- HTML
<h3 class="title">직군/직무</h3>
<ul class="check-list">
<li class="check-item">
<button type="button" class="btn-list">Tech</button>
<ul class="check-list">
<li class="check-item">
<input type="checkbox" name="tech" id="tech" class="all">
<label for="tech">전체</label>
</li>
<li class="check-item">
<button type="button" class="btn-list">Software Development</button>
<ul class="check-list">
<li class="check-item">
<input type="checkbox" name="tech" id="tc1">
<label for="tc1">Frontend</label>
</li>
<li class="check-item">
<input type="checkbox" name="tech" id="tc2">
<label for="tc2">Android</label>
</li>
<!-- ... -->
</li>
<li class="check-item">
<button type="button" class="btn-list">Design</button>
<ul class="check-list">
<li class="check-item">
<input type="checkbox" name="design" id="design" class="all">
<label for="design">전체</label>
</li>
<li class="check-item">
<button type="button" class="btn-list">Product Development</button>
<ul class="check-list">
<li class="check-item">
<input type="checkbox" name="design" id="ds1">
<label for="ds1">Product Development</label>
</li>
</ul>
</li>
<!-- ... -->- JS
/**
* 모바일 select
* @name : 같은 리스트에 묶인 체크박스들의 name
* 해당 name을 가진 체크박스들만 전체 선택
*/
$('.group-mobile .check-item .all').click(function(){
let name = $(this).attr('name');
if( $(this).is(':checked') ) {
$(`input:checkbox[name=${name}]`).prop('checked',true);
} else {
$(`input:checkbox[name=${name}]`).prop('checked',false);
}
})✍ 코드리뷰
let name = $(this).attr('name');
name 이라는 변수에 all 클래스를 가진<input>의 name 속성을 가져와 저장합니다.
-> 변수 name에 tech가 저장.all이 체크가 되어있다면
$('input:checkbox[name=${name}]').prop('checked',true);
체크박스의 name 값과 변수에 저장된 name 값이 같은 input의 checked 속성만 true로 바꿔줍니다.
-> tech를 name 값으로 가진 체크박스들만 선택반대로 .all 이 체크되어있지 않다면
$('input:checkbox[name=${name}]').prop('checked',false);
input의 checked 속성만 false 바꿔 선택이 해제됩니다.
3-2. 클리어필터 버튼
클리어필터 버튼 .btn-reset 을 클릭하면 모든 체크박스가 해제됩니다.
$('.btn-reset').click(function(){
$('input:checkbox').prop('checked',false);
})카테고리 구분없이 모든 체크박스를 해제하기 때문에 '전체' 체크박스를 클릭할 때 처럼 변수를 사용할 필요가 없습니다.
📌기존 사이트 개선방안
1. 모든 화면에서 스크롤 없이 나오도록
기존 Naver Career 사이트
기존 사이트에서는 화면이 작아지면 메인비주얼 타이포와 검색 박스가 잘리며 가로 스크롤이 생기게 됩니다.
이 부분을 태블릿 사이즈에서 한 번 더 사이즈를 잡아서 가로스크롤이 생기지 않도록 했습니다.
수정 후
2. 스크롤 없애기
기존 Naver Career 사이트
기존 사이트에서 모바일 메뉴 버튼을 눌러 사이드 메뉴가 나오면 스크롤바가 두 개 생깁니다.
<body>의 스크롤이 사라지지 않고 메뉴화면의 스크롤과 함께 보이는 문제기 때문에 <body>에 overflow: hidden 을 해줘서 <body>의 스크롤을 없앱니다.
- CSS
.scroll-fix { overflow: hidden; }- JS
// 모바일에서 메뉴 버튼 클릭시
$('.header .btn-menu').click(function(){
$(this).toggleClass('btn-close');
$('.header .mobile-area').toggleClass('active');
('body').toggleClass('scroll-fix');
})
