[💻] 실습 - naver career (반응형)

📖 Overview

사이트명: naver career
작업 기간: 3.5일 소요
라이브러리: swiper, jQuery
유형: 반응형, 클론 코딩
참여도: 100%

👀 Check-point

• 미디어쿼리에 대한 이해가 됐는가
• 서브메뉴 펼쳤을시 서브메뉴만 스크롤이 가능한가

📌 반응형 미디어쿼리

모든 반응형소스 전에는 모든게 완성되어있는상태(모든 css완성)에서 반응형을 작업해야 한다.

👍1. 모든 css 파일에 들어가서 하단부분에 미디어쿼리를 집어넣는다.!

2. response.css 파일을 만들어서 몽땅 넣는다.
   (유지보수가 좀 빡셈)
3. pc,tablet,mobile분기점별로 css파일을 만들어놓음
   (유지보수가 좀 빡셈)
   
   

✏ 분기점 나누는 법

• 첫 분기점은 사람마다 사이트마다 시안마다 다 다름
• 사이트 기준위드가 짧을수도 길수도있기때문에 다 다름

-> 구현불가능시점, 공존이 안되는시점, 시안으로 제공안될확률이 100%

💡 테블릿과 모바일은 항상 고정이고 그 외의 사이즈들은 사이트마다 다르기땜에 확인하고 할것

• 테블릿 (1023px)
• 모바일똑같음 (767px)

⭐항상 최소를 잡아야한다! 그래야 안깨진다.⭐

✏ 개발자모드에서 모바일모드로 보면서 확인하자!

이 사이트의 분기점은 max-width: 1100px으로

@media screen and (max-width: 1200px) {
    /* *1024을 기준으로 화면을 보고 잡아야함 */ 
		/*  -> 이것보다 더 줄어들었을때의 과정을 봐야하기때문에*/ 
}

@media screen and (max-width: 1023~4px) {
    /* *768을보고 잡아야함 */ ->태블릿 세로사이즈
}

@media screen and (max-width: 767px) {
    /* *320을 보고 잡아야함 */
}

◼ 과정중에 분기점추가가 불가피하다면 추가 가능.

common,layout,main 맨 마지막 부분에 다 들어가야함

내가 고쳐야하는것만 수치를 고쳐주면됨

화면이 줄어들었을때 영역들은 미리 영역을 만들어뒀어야한다.

미리 display : none;해놓고 block으로 보여주기

✏ 반응형 width

.inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 104px 0 98px;
}

• 반응형을 할때는 width가 그냥들어가선 안된다.
• max-width로 줘야하며 max-width가 들어갔을때는 0까지도 줄어들수있다고 값을 준것

✏ header inner

• 헤더 inner에 box-sizing: border-box; 줘야한다.
  → 헤더에 패딩이 들어갔기때문

💡 flex : 1 헷갈리는점??

✏ flex 썼을때 좌우 조절1

• flex 자식이 두명 있을때는 각자 1대1 로 비율 먹겠다는 뜻
  -> 각자 똑같은 비율로 먹음
• 지금은 logo와 gnb-area 둘이 싸우는데
  logo는 정확한 width가 있으므로 로고빼고 나머지는
  gnb가 모두 먹는다 = grow : 1, 끝까지 자라난다
  
• 메뉴처리할때 밑에까지 안먹음으로 height : 100%

✏ flex 썼을때 좌우 조절2

• 개인정보 처리방침에 margin-right: auto; 를 준다.

• 그럼 오른쪽을 쭉 밀어낸다.

margin:0 auto 가 가운데로 보내주는건 알것이다.
그 이유는 좌우를 자동으로 쫙 밀다보니 가운데로 와진것.

같은 원리로 margin-right: auto 를 준다면 자동으로 오른쪽만 쭉 늘어나게된다

📌 animation 롤링

• 어디에 놔도 상관없는애니까 div가 아닌 article로 표시한다
• career 이미지 부분은 before로 처리하는게 더 좋다
• 닫기 버튼을 눌렀을때 뚝하고 위로 올라가 보이는건 태그 자체가 사라졌기 때문 (block이란 뜻)
• body에 padding-top: 64px; 를 준다.
  -> 64인 이유는 header 값임 header는 항상 떠있으니까!
  헤더의 높이만큼은 보장해줘야함
  

animation: rolling 20s linear infinite;
@keyframes rolling {
    0% { transform: translateX(50%);}
    100% {transform: translateX(-100%);}
}

💬 왜 롤링을 0에서 시작하지 않는가?

• 50%에서 시작시키니까 롤링 시작하면 바로나올수있는것
  ex) 50% →-100% → 50% →……
• infinite로 무한 반복
• text-align: right;로 맨 오른쪽으로 보내 0부터 시작하는 느낌주기

📌 검색 영역

✏ 글자 묶기 (label )

<div class="search-list">
     <label for="keyword" class="ic-title">키워드</label>
     <input type="text" name="" id="keyword" placeholder="프론트엔드 개발자">
</div>

• label 과 input은 연결이 되어야함
  →id값과 for값을 같게 해준다.

→ 그래야 글자 클릭시 버튼도 같이 체크가 된다

✏ form태그

<form action="" method="get">
        <fieldset>
            <legend class="blind">인재검색</legend>
            <div class="search-wrap">
                <div class="search-list">
                    <label for="keyword" class="ic-title">키워드</label>
                    <input type="text" name="" id="keyword" placeholder="프론트엔드 개발자">
                </div>
                <div class="search-list">
                    <label for="job" class="ic-title">직군</label>
                    <select id="job">
                        <option value="preview" selected>직군선택</option>
                        <option value="Tech">Tech</option>
                    </select>
                </div>
            </div>
        </fieldset>
 </form>

• form태그는 fieldset으로 묶어주고 legend로 제목을 써줘야한다.

✏ input 자동완성

input 텍스트 클릭시 자동완성 끄기

autocomplete="off"

• input속성에 넣거나

<input type="text" autocomplete="off" />

• form태그에 넣기

<form autocomplete="off">
  <input type="text" />
</form>

✏ select 선택시 색변경

change이벤트

🤔 처음에 색을 변경하기 위해 color: #d0d0d0;를 적용했지만 바뀌지않음 -> 글자 자체에 색을 줬기 때문

$('.search-area select').change(function(e){
        e.preventDefault();
        $(this).css('color','#000');
    })

select를 선택했을때 this의css의 색이 블랙으로 바뀌어라

✏ input focus초기화

input {
    padding: 0;
    background: transparent;
    border: 0;
}
input:focus {
    outline: none;
}

✏ placeholder 꾸미기

.search-area .keyword-search input::placeholder{
    color: #b4b4b4;
    font-weight: bold;
}

✏ select 비활성화

◼ 옵션 선택 비활성화

1. 태그에 직접주기

<option value="" disabled="" selected="">직군선택</option>

2. css에 주기

.search-area option[value=""][disabled] {
    display: none;
}

📌 스와이퍼

✏ 스와이퍼에 active주기

.video-txt{
		opacity: 0;
    	transition:opacity 0.5s 0.3s;
    /*투명도가 0.5초만에 나타나고 딜레이는 0.3초*/
}
.sc-mainbanner .swiper-slide-active .video-txt{
    opacity: 1;
}

• 스와이퍼가 작동 될 때는 항상 ‘.swiper-slide-active’가 들어가있다.
  -> 효과를 주고싶다면 여기에 효과주기

• 만약 transition에 opacity를 안써주면 처음 시작할때 글자가 작아졌다 커지게 나온다.
  -> 왜냐면 transition에는 all이라는 단어가 숨어져있다.
  모든걸 바꿔주기때문에 opacity를 꼭 적어주기

transition:opacity 1.2s 0.3s linear;

✏ 미디어쿼리시 스와이퍼

본래 스와이퍼 기준을 pc로 잡았다면 기준을 모바일로 잡고 기본값으로 설정해준다.

var lastslide = new Swiper(".lastslide", {
        slidesPerView: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: ".next",
          prevEl: ".prev",
        }
    });

breakpoints를 이용하여 pc버전을 만들어준다.

var lastslide = new Swiper(".lastslide", {
        slidesPerView: 1,/* 기준이 모바일,기본값 */
        spaceBetween: 30,
        navigation: {
          nextEl: ".next",
          prevEl: ".prev",
        },
        breakpoints:{
            769:{/* 768보다 컸을때 */
                slidesPerView: 3,
            }
          },
    });

• 기본값이 모바일이 되는거
• 모바일일때 슬라이드가 하나만 보여야하고 화면이 768보다 컸을때 슬라이드를 3개 보이게 하라는 뜻
• ‘ ’따옴표 필요없음!

✏ 이미지 padding-bottom

<div class="img-box">
    <img src="./asset/imges/contents/img_slide2_1.jpg" alt="사람을 공부합니다">
</div>

이미지는 항상 이미지 박스로 묶어주고 사용하기
그래야 (반응형시) 효과랑 사이즈를 마음대로 조정할수있다.
→ 이미지에 직접적인 px ❌

✍ 오류사항

미디어쿼리시 img-box에 직접적인 px로 사이즈를 주게 되면 사이즈가 맞지 않는다.

✍ 해결사항

• 스와이퍼 중 부모인애한테 높이 주면 안된다.
  → 맨밑 넘어가는 화살표 날라감

• 이미지 사이즈를 %로 준다
  → 화면이 줄때마다 사이즈 알맞게 비율유지 할라는것
  → %는 화면 비율을 뜻함

💡 %의 핵심 원리는

• 부모 요소의 width에 % 값을 적용 → 화면 크기에 따라 가변
• 자식 요소에 padding-top: n%→ 부모 요소 width를 기준으로 자식 요소의 높이 설정 가능

• 부모에 있는 padding-top혹은padding-bottom이 유동적이게 해주는것
  → div는 유동적이지 못하니까!

• 이미지 박스(부모)에 position: relative, padding-bottom: 47%을 주고 이미지에 position: absolute를 줘서 원하는 위치에 딱 들어갈수있게한다
  → 비율유지 시키려고

✏ 버튼css

.control-box .btn-nav.swiper-button-disabled{
    opacity: 0.5;}

• 투명도만 조절하면 된다.
• button-disabled는 스와이퍼에서 제일 마지막에 도달하는 클래스이다.

📌 비디오태그

<div class="video-box">
    <video muted autoplay loop playsinline poster="포스터로 쓰일 이미지 경로">
        <source src="https://recruit.pstatic.net/share/tmplat/naver/video/Joker.mp4" type="video/mp4">
    </video>
    <h3 class="video-txt">Board<br> the Navership</h3>
 <div>

• muted - 음소거
• autoplay - 자동재생
• playinline: IOS 자동재생
• loop - 반복

◼ playinline

✍ IOS (아이패드나 아이폰)에서 video autoplay="ture" 를 넣어도 자동재생이 되지않는다.

찾아보니 IOS에는 autoplay 대신 playinline을 써야한다.

◼ poster

poster 속성으로 넣은 이미지는 이미지가 로딩될때나 처음 로드되어 재생버튼을 누르기 전까지 보여줄 이미지이다.

포스터 이미지의 크기를 조절하려면 css를 이용해 조절해 줄 수 있다.

video[poster]{ 
	/* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */
    height:100%;
    width:100%;
    }

📌 reset

제작 시 추가적으로 필요한 reset부분

input {
    padding: 0;
    background: transparent;
    border: 0;
    font-family: 'TTHoves','NanumSquare', sans-serif;
}
input:focus {
    outline: none;
}
fieldset {
    margin: 0;
}
button {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}
select {
    border: 0;
    outline: none;
    appearance: none;
    -moz-appearance: none; /* Firefox */ 
    -webkit-appearance: none; /* Safari and Chrome */
}
/* IE 기본 스타일 제거 */
select::-ms-expand{
	display: none; /* IE 10, 11 */
}

📌 자바 해석

✏ 호버

◼ 호버시 판 나타나기 (부드럽게 아님)

💡 이벤트를 주기 위해 자식클래스를 계속 추가하다보면 재확장성에 문제가 생김.
✍ 해결방안 → ’this’

$('.menu-item').hover(function(){
        if($(this).find('.sub-list').length){2
            $('.header').addClass('hover')2
            $(this).find('.sub-list').addClass('active') 1
        }
    }, function(){
        $('.header').removeClass('hover')2
        $('.sub-list').removeClass('active') 1
    })

1. .menu-item에 호버할때 호버 된다면
   sub-list의 자식중에 sub-item을 찾아서 active을 추가해라,
   그렇지 않을때는 넣어줬던 클래스를 다 빼줘라

→ 메뉴 team의 자식에 판을 주는게 아니라 header에 호버했을때 판이 나오는걸로 해야함

2. 만약에 지금 this( li )에 ‘sub-list’의 길이가 1이면 작동되라

💡 length는 길이가 있다면 1 없다면 0
그럼으로 태그가 있으면 1 없으면 0 태그의 여부 확인

✏ 버튼 돌리기

footer .tab-area.active .button{
    background: #fff;
}
footer .tab-area .button::after{
    content: '';
    background-position: -122px -93px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* display: inline-block; */ 앱솔이 없었다면 필요함
    width: 10px;
    height: 6px;
    z-index: 99;
}
footer .tab-area.active .button::after{
    transform: rotate(180deg);
    right: 5px;
}

• 미리 ‘active’클래스를 만들어주고 자바로 ‘toggleClass’만 주면 끝!!

$('.tab-area .button').click(function(){
		$('.tab-area').toggleClass('active');
});

◼ 혹시나 부드럽게 주고싶다면 slide-down

◼ 💡 flex를 쓰다보면 부모높이를 자식들에게 공유를 함.

기본이 align-items: stretch 자식이 그 높이를 받기싫다면 align-items: center; 를 주면 됨

---

오답✍(◔◡◔)✧

1. 필수 css명

• header, main(container),footer는 클래스 필수
  -> 나중에 수정에 용의하려고
  -> 다른 곳에서 동일한 css가 나올수도 있으니까 고유한 애들은 css할때 앞에 써주기
  ex) .header .클래스명{}

• 왼쪽 메뉴들은 ul로 적합하지만 오른쪽 메뉴들은 ul보다 a태그로만 이루어 진게 좋다.

왜냐!! → ul은 3~4개 이상일때가 이상적이니까

2. flex를 썼는데 안내려온 이유는??

✍ 오류사항

• 호버시 밑에 나오는 선은 border로 처리하면 덜컹거린다
  → 그럼으로 width와height을 이용하여 after처리를 해준다.

✍ 해결방안

• a태그 height : 100% 를 줬기 때문에 내려오지 않는것 →강제로 line-height를 줬음
• 100%를 안준 이유는 시안에서 호버했을시 생기는 선이 글자 바로 밑이기 때문

.gnb-area a::after{
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #000;
    display: none;
}
.gnb-area a:hover::after{
    display: block;
}

3. 중요하지 않은 이미지는 before,after

• 굳이 p/span태그를 써서 이미지를 불러올 필요 없다. 의미가 없는애들은 before,after로 꾸며주기

4. position: relative 헷갈리는 기준

✍ 오류사항

처음에는 메인 스와이퍼를 기준으로 position: relative를 줬었는데 위치가 시안처럼 되지 않음.

transform: translateY(-50%);
		   z-index: 1;
		   position: relative;

✍ 해결방안

• 완전 간단함, 자기자신을 기준으로 주면됨
  -> position: relative;

5. z-index 적용

✍ 오류사항

z-index를 header보다 높게 줬는데도 계속 위에 살아있다.
그 이유는?

✍ 해결사항

->모바일영역을 감싸는 부모에게 z-index:1을 주었기 때문에 자식이 아무리 높은 z-index값을 먹어도 높게 나올 수 없었다.

6. 데이터가 필요한 선택지 input:radio

✍ 오류사항
❌ button로 껍데기만 선택하게 했다

오류인 이유
-> 사용자가 클릭했을시 개발자가 저장된 값을 알아야한다. 껍데기만 꾸며주면 개발자가 값을 알수가 없음.

✍ 해결사항

값을 받아야지 개발자가 사용자의 값을 알 수 있다.

$('.mo-lnb .btn-lnbclose').click(function(e){
   e.preventDefault();
   $('input').prop('checked',false)
})

close를 선택했을때 input의 prop(property)체크값이 false로 바뀌어라