네이버커리어스

• 사이트명 : 네이버커리어스
• 사용언어 : HTML, CSS, SASS, JS
• 사용플러그인 : Swiper
• 분류 : 반응형, 클론코딩

---

1. SCSS 반응형

• SCSS는 코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장했다.
• 기존 CSS를 확장하여 변수, 중첩, 믹스인, 함수 등의 기능을 사용할 수 있다. CSS 문법과 거의 동일하지만, 더 강력한 기능을 제공해서 유지보수와 재사용성이 뛰어나다.
• CSS 셀렉터를 중첩해서 더 간결한 코드 구현이 가능하다. (특히 반응형 👍)
• 단점이라면?
  웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하게 된다는 것이다. (시간 소요)

🍀 : 프로젝트에서 사용

• 문서 구조가 이렇게 되어있는데, css보다 조금 더 쪼개져서 분류되어 있고, 컴파일 과정 이후에는 style.css로 통합 변환되기 때문에 관리에 매우 좋은 것 같다.

$mobile: 768px; 
$desktop: 1229px; 

@mixin mobile {
  @media (max-width: $mobile){
    @content;
  }
}

@mixin desktop {
  @media (max-width: $desktop){
    @content;
  }
}

• 혁신적이라고 느꼈던 부분은 @mixin으로 반응형 관리가 가능하다는 것인데, 위와 같이 분기점을 잡아주면

  .btn {
    width: 33px;
    height: 32px;
    background: {
      image: url('../images/sp_pc.png');
      size: 328px 205px;
    }
    @include mobile {
      width: 30px;
      height: 30px;
      background: {
        image: url('../images/sp_mo.png');
        size: 195px 181px;
      }
    }

• 이렇게 찾아보기 쉽고, 유지보수가 용이하다는 것을 알 수 있다.

2. select

• 옵션을 클릭하면 색 변경
  

<!-- html -->
<select name="jobSelect" class="select-box box1" onchange">
  <option value disabled selected>법인선택</option>
  <option value="KR">NAVER</option>
  <option value="NB">NAVER Cloud</option>
  <option value="SN">SNOW</option>
  <option value="NL">NAVER LABS</option>
  <option value="NW">NAVER WEBTOON</option>
  <option value="NF">NAVER FINANCIAL</option>
  <option value="NI">NAVER I&S</option>
</select>

// JS
const selectbox1Element = document.querySelector(".select-box.box1");
selectbox1Element.style.color = "#d0d0d0";
selectbox1Element.addEventListener("change", function() {
    selectbox1Element.style.color = "#000";
});

• onchange 될때, option의 color가 변경되도록 스크립트를 작성했다.

3. swiper 슬라이드

• 이미지 넘침 효과, 반응형
  
• 이미지 넘침 효과를 주는 방법은 간단한데, .swiper에 overflow: initial;만 주면 된다.
  -> 이유는 swiper 특성상 overflow:hidden;이 기본적으로 들어가있어서 넘치도록 바꿔주기만 하면 된다.

const peopleSlide = new Swiper ('.sc-people .swiper', {
  slidesPerView: 1,
  speed: 500,
  spaceBetween: 30,
  navigation: {
    prevEl:'.sc-people .swiper-control .btn.prev',
    nextEl:'.sc-people .swiper-control .btn.next'
  },
  breakpoints: {
    768: {
      slidesPerView: 1.1
    }
  }
});

• breakpoints에 분기점 작성하면 해상도 별로 슬라이드를 유지 보수 가능하다.