✔️네이버 커리어스 클론코딩

제작기간 : 23.03.04 ~ 23.03.06 (3일)
사용 : HTML, CSS
분류 : 클론코딩, 반응형

파일 구조

• index.html
• assets/css/common.css
• assets/css/fonts.css
• assets/css/layout.css
• assets/css/main.css
• assets/css/reset.css
• assets/fonts/폰트파일
• assets/images/이미지파일
• assets/js/main.js

1. 반응형(PC, 태블릿, 모바일)

반응형 웹 디자인 : 하나의 웹사이트에서 PC, 태블릿, 모바일 기기 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법

• PC
  
• PC에서 width 약간 줄였을 때
  
  • 헤더 메뉴를 보였다 숨겼다 할 수 있는 버튼을, 오른쪽 상단에 추가
• 태블릿
  
  • 키워드 법인 직군이 일렬로 배치되어있던 input-box를, 가독성을 높이기 위해 수직으로 배열
• 모바일
  
  • 줄어든 width에 대응하여 input-box를, Search Jobs로 이름붙여 팝업창으로 띄워지게 만듦

2. 미디어쿼리

• CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용
• 최소 width의 화면을 확인하면서 작업해야 깨지지 않음!

/* PC : 1025px 이상 1280px 이하 */
@media (max-width:1280px) {
	...
}
/* 태블릿 : 768px 이상 1024px 이하 */
@media (max-width:1024px) {
	...
}
/* 모바일 : 320px 이상 767px 이하 */
@media (max-width:767px) {
	...   
}

3. 헤더:hover로 하위메뉴 보이기 숨기기

📌css

.header.on::before{ /* 헤더에 on 클래스가 들어가면, before로 흰 배경을 넣어라 */
    position: absolute;
    top: 100%;
    width: 100%;
    height: 182px;
    content: '';
    background: #fff;
    opacity: 0.98;
}
.gnb .nav-list .nav-item .sub{ 
	/* 기본적으로 대메뉴의 하위메뉴 .sub는 보이지 않음*/
    display: none;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 100%;
    height: 182px;
    white-space: nowrap;
}
.gnb .nav-list .nav-item .sub.on{
	/* 하위메뉴 .sub에 on 클래스가 들어가면, display: flex가 추가되어 눈에 보임 */
    display: flex;
}

📌js

$('.gnb .nav-item').hover(function(){ // 마우스를 호버하면,
    if($(this).has('.sub').length){ // 가져다 댄 대상의 하위요소가 .sub 클래스를 가졌다면,
    // .length : 요소의 개수를 구함.
        $('.header').addClass('on'); // on 클래스를 추가
        $(this).find('.sub').addClass('on'); // .sub 클래스를 가진 하위요소에 on 클래스 추가
    }},function(){ // 호버한 마우스를 치우면,
        $('.header,.header .sub').removeClass('on'); // on 클래스 제거
    }
);

4. 체크박스 꾸미기

🔷input

• 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용
• 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form> 내부에서 사용됨

🔷label

• 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용
• 브라우저에 의해 일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 label과 연결된 요소를 곧바로 선택할 수 있어(focus 이동) 사용자의 편의성을 높일 수 있음

label의 for 값 및 data-sort값, input의 id 값, 하위 요소를 감싸는 부모 요소의 id 값을 이용하여 ➊ 체크박스를 꾸미고, ➋ 요소 전체선택 및 해제를 할 수 있음.

📌html

<ul class="career-list">
    <li class="career-item">
        <h3>직군/직무</h3>
        <ul class="list">
            <li class="item">
                <button class="career">Tech</button>
                <div class="chk-box">
                    <input type="checkbox" id="allT"> 
                  	<!-- id와 for의 연결 -->
                    <label for="allT" class="all" data-sort=".allT">전체</label>
                  	<!-- data-sort 속성으로 클래스를 연결하여 input checked 전체선택 및 해제 -->
                </div>
                <div class="depth2">
                    <ul class="list2">
                        <li class="item2">
                            <button class="sub">Software Development</button>
                            <div class="depth3">
                                <ul class="sub-area allT">
                                    <li class="chk-box">
                                        <input type="checkbox" id="tFE">
                                        <label for="tFE">Frontend</label>
                                    </li>
                                  	...
                              	</ul>
                          	</div>
                      	</li>
                      	...
                  	</ul>
              	</div>
            </li>
          	...
		</ul>
	</li>
  ...
</ul>

📌css

.sc-team .group-career2 .chk-box label::before{
	/* label의 before로 새로운 체크박스 만들기 */
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid #d0d0d0;;
    border-radius: 50%;
    margin-right: 8px;
    content: '';
}
.sc-team .group-career2 .chk-box input:checked+label::before{
	/* input이 check 됐을 때 label의 before 체크박스 꾸미기 */
    border: 1px solid #000;;
    background: #000;
}

📌js

/**
 * @모바일검색_전체선택및삭제
 */
$('.all').click(function(){
    sort=$(this).data('sort');
  	// 데이터 속성값 가져와서 sort 변수에 담음
    if($(this).prev().prop('checked')){ 
    // 클릭된 요소의 이전 형제요소의 checked 속성이 true라면,
        $(sort).find('input').prop('checked',false);
      	// sort 변수로 요소를 선택하고, 
      	// 그 자식인 input 요소의 checked 속성을 false로 설정
    }else{ // checked 속성이 false라면,
        $(sort).find('input').prop('checked',true);
    };
});
/**
 * @모바일검색_전체영역checked삭제
 */
$('.group-career2 .btn-clear').click(function(){
    $('.group-career2 input[type=checkbox]').prop('checked',false);
});

5. padding-bottom으로 가로세로 비율 유지하기

• 반응형일 때 가로의 길이가 변하면 세로의 길이도 비율에 맞게 변해야 자연스럽게 보임.
  하지만 반응형은 보통 가로의 길이와 세로의 길이가 같은 비율로 변하지 않기 때문에 컨텐츠에 바로 퍼센트를 사용하면 비율이 깨지게 됨

📌html

<ul class="swiper-wrapper">
    <li class="swiper-slide">
        <a href="">
            <div class="img-area"> <!-- 부모 요소 -->
                <img src="" alt=""> <!-- 자식 요소 -->
            </div>
            <div class="text-area">
            	...
            </div>
        </a>
    </li>
  	...
</ul>

• 비율을 유지할 부모 태그와 컨텐츠를 담을 자식태그를 만듦.

📌css

.sc-people .swiper-slide a{ 
    display: block; 
}
.sc-people .swiper-slide .img-area{ 
    position: relative; 
    padding-bottom: calc((520/1097)*100%); 
}
.sc-people .swiper-slide img{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

• padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있음. 컨텐츠를 감싸는 부모 요소를 기준으로 잡고, 내부 컨텐츠를 position: absolute로 위치시키면 의도한 비율대로 화면에 나오게 됨

🔷다양한 비율 만들기

.container {
/* 1:1 비율 */
padding-bottom: 100%;

.container {
/* 1:2 비율 */
padding-bottom: 200%;

.container {
/* 2:1 비율 */
padding-bottom: 50%;

.container {
/* 4:3 비율 */
padding-bottom: 75%;

.container {
/* 16:9 비율 */
padding-bottom: 56.25%;

* 웹 표준 검사 통과

The W3C Markup Validation Service의 Nu Html Checker를 통해 index.html의 마크업이 웹 표준에 적합함을 확인했습니다.