네이버 커리어 클론코딩(반응형)

1.애니메이션

위와 같이 오른쪽에서 왼쪽으로 글자가 흐르는 애니메이션 배너를 만들어야 한다.
애니메이션 이름은 banner이며, 10초동안 흐르는 동작을 영원히 반복하며, 키프레임 구간을 부드럽게 하기 위한 코드는 다음과 같다.

animation: banner 10s infinite linear;

@keyframes banner {
    0% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(-100%);
    }

그리고 키프레임을 이용하여 transform으로 처음부터(0%) 종료될 때까지(100%) 위치를 지정해 주면 이동하는 애니메이션을 만들 수 있다.
참고 링크
css 애니메이션

2.체크버튼 모양 바꾸기

체크버튼은 라벨의 가상요소를 사용하여 설정해 주면 된다.
active클래스는 체크박스를 선택했을 때 버튼이 변하는 모양을 설정해 주고, 해당 라벨을 클릭했을때 active toggle기능을 넣어 주면 간단하게 만들 수 있다.

<input type="checkbox" class="cb1"><label>정규</label>

<style>
.sc-search .search-box label::after {
        content: '';
        position: absolute;
        top: 6px;
        left: 0px;
        width: 8px;
        height: 8px;
        border: 1px solid #d0d0d0;
        border-radius: 50%;
        -webkit-border-radius: 50%;
    }
    .sc-search .search-box label.active::after{
        background: #000;
    }
</style>

<script>
	$('.sc-search .search-item label').click(function () {
        $(this).toggleClass('active');
    })
</script>

3.반응형 미디어 쿼리

이 사이트는 반응형으로 만들어져 있는데, 반응형을 만드는 방법은 다음과 같이 세 가지가 있다
1. 모든 css 파일에 들어가서 하단부분에 미디어쿼리를 집어넣는다.
2. response.css 파일을 만들어서 몽땅 넣는다. (유지보수가 어려움)
3. pc,tablet,mobile분기점별로 css파일을 만들어놓음

여기서 1번 방법 미디어 쿼리를 사용해서 반응형을 만들기 위해서는 @media screen and (max-width: 최대 픽셀px)을 각각 설정해 주어야 한다.

<style>
@media screen and (max-width: 1200px) {
    /* *1024을 기준으로 화면을 보고 잡아야함 */
 
}

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

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

쉽게 예를 들자면 위와 같이 해상도를 잡을 땐 첫번째엔 1024px~1200px에서 보일 화면css를 넣어주고, 두번째에는 768xp~1023px에서 보일 화면 css를 넣어주면 된다.