📂롯데렌터카 모바일

• 사이트명: 롯데렌터카 마이카
• 사용언어: HTML5, CSS3, js
• 라이브러리: jquery , swiper
• 유형: 모바일 적응형
• 💻 https://hyesukhan.github.io/lotte3/

✅ Check Point

✔ Sass사용
✔ fetch() 함수를 활용 json데이터를 호출

1.Sass사용

폴더 구조는 이렇게 정의하였다. 이를 CSS 아키텍처 중 하나인 7-1패턴이라고 한다.

abstracts(utills 이라고도함)

실제 스타일은 없고, 그저 다른 폴더에 정의된 스타일을 도와는 역할을 한다.

글로벌 변수, 함수는 _variables 파일에, mixins은 _mixins에 작성한다.

base

사이트 전반에 걸쳐서 재사용되는 스타일을 여기에 정의한다.

사이트 전반에 사용될 폰트, 디폴트 스타일이 여기에 해당된다.

ex) _typography : 폰트용

components

컴포넌트는 "소형" 레이아웃 같은 것이다.

사이트 내에서 재사용가능한 작은 부분들을 여기에 정의한다.

buttons, forms, profile pictures와 같은 것이 여기에 해당된다.

layout

사이트 구조에 해당하는 레이아웃을 여기서 정의한다.

nav bars, headers, footers 와 같은 것이 여기에 해당된다.

pages

모든 페이지가 같은 스타일을 사용할 수는 없기 때문에 각 페이지에서 사용될 구체적인 스타일을 여기에 넣으면 된다. 예를들어, "Contact Us"에서만 사용될 스타일이 있다면 _contact.scss와 같이 네이밍한 후 이 폴더에 넣으면 된다.

style.scss

이제 위와같이 각 폴더에 기준에 따라 scss파일들을 분류했다면, 이 파일을 한데 모을 허브가 필요하다. 그럼 style.scss 라는 파일을 생성해서 모든 파일들을 import를 해주면된다. style.scss는 다른 파일들과는 달리 앞에 _표시가 없다. 해당 파일에는 직접 스타일을 정의하지 않고 "import"만을 담당하는 폴더이다.

저장 경로 설정 및 map 파일 제거

{
    "liveSassCompile.settings.generateMap": true, 
    //이부분 수정 
    "liveSassCompile.settings.formats": [ 
	    { 
			"format": "expanded",
	    "extensionName": ".css",
	    "savePath": "~/../css/"
			}
		],
"liveServer.settings.donotShowInfoMsg": true,
}

룰

중첩

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

변수(Variables)

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}
---------------Compiled------------------
.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

@Mixins

@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

@include

h1 {
  @include large-text;
}

2.fetch() 함수를 활용 json데이터를 호출

1. json 파일을 만들어 불러올 데이터 만들기

"renaultList":[
        {
            "id":0,
            "thumbnail":"./assets/images/car3.png",
            "name":"XM3"
        },
        {
            "id":1,
            "thumbnail":"./assets/images/car4.png",
            "name":"SM6"
        },
        {
            "id":2,
            "thumbnail":"./assets/images/car5.png",
            "name":"QM6"
        }
    ],
    
    ...

2. 데이터 불러오기

list(0);
function list(num){
  fetch('../assets/data/car.json')
  .then(res => res.json())
  .then(json => {

    listArr = [json.hyundaiList,json.kiaList,json.renaultList,json.chevroletList,json.kgList]

    data = listArr[num];
    let html = ``;
    data.forEach(element => {
        html += ` <div class="swiper-slide">
                  <img src="${element.thumbnail}" alt class="car">
                  <p class="name">${element.name}</p>
                  </div>`
    });

    $('#carList').html(html);

    let swiper = new Swiper('.sc-estimate .swiper', {
      loop: true,
      slidesPerView: 'auto',
      centeredSlides: true,
    });
  
  })
}