✔️네이버 커리어스 클론코딩
제작기간 : 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의 마크업이 웹 표준에 적합함을 확인했습니다.
web publisher