(project4) NAVER Careers 홈페이지(반응형)

kjn·2023년 3월 13일

project 개선방안 피드백

NAVER Careers https://recruit.navercorp.com/

1. 피드백

swiper-slide 마우스 컨드롤 되지 않게 하는 속성

2. (반응형 웹) video, img, slide 등 가로세로 비율 유지

반응형 웹에 유동적으로 대응가능

img-box와 img 사이에 wrap을 사용하여, wrap에 paddin-bottom값을 주고 img-box로 크기 조절을 할 수도 있음

.img-box{
	position: relative;
    padding-bottom: calc(세로/가로*100%); 

img{
	position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

3. swiper-slide의 button, pagination을 꾸밀 때, 개발자모드 이용하기

-'swiper-button-disabled' 등의 클래스를 알 수 있음

4. input, select 등의 태그들은 label과 같이 사용하면 좋음

연결되면 label클릭시 input에 focus

select의 경우, 스크립트 처리 필요

<input type="checkbox" id="Software">
<label for="Software">Frontend</label>

5. 전체 선택 체크박스

(html)
<div class="chk-wrap">
  <input type="checkbox" id="allchk">
  <label for="allchk" class="all-chk" data-target="area">전체선택</label>
</div>

<div class="area" id="all">
  <div class="chk-wrap">
    <input type="checkbox" id="job1">
  	<label for="job1">직무1</label>
  </div>
  <div class="chk-wrap">
    <input type="checkbox" id="job2">
  	<label for="job2">직무2</label>
  </div>
</div>

(css)
.chk-wrap input{
	position: absolute;
    clip: rect(0,0,0,0);
}
.chk-wrap label::before{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    content: '';
}
.chk-wrap input:checked+label::before{
    background: #000;
}

(script)
$('.all-chk').click(function(){
	target = $(this).data('target')
	if ($(this).prev().prop('checked')) {
    	$(target).find('input').prop('checked',false);
	} else {
        $(target).find('input').prop('checked',true);
    }
})

2. 개선방안

1. 반응형 웹사이트이지만, 디바이스별 해상도 분기점이 제대로 잡혀있지 않아 가로스크롤 발생하여 3개의 분기점을 잡아 개선

버튼의 영역은 크게, 이미지의 크기는 동일하게 개선

3. 추가 Point

1. 설정한 padding, margin값에 넘쳐 흐르는 슬라이드

swiper에 overflow: initial; 를 사용하여 기본값으로 설정
overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지 정하는 속성으로, visible이 기본값임
width를 90%로 설정하여 다음 슬라이드가 더 보이게끔 함

visible : 박스를 넘어가도 보여줌
hidden : 박스를 넘어간 부분은 보이지 않음
scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옴
auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옴
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속