5월23일 6일차 - slick 슬라이드 구현, 3단 이미지 코딩

주말에 푹 쉬어도 월요일 수업은 피곤한 것 같습니다.

slick을 활용한 슬라이드 구현 방법을 맛보기만 하고 다음 시간에 제대로 배웁니다.

엄청 새로운 내용을 배우지는 않았습니다.

[3단 이미지를 구현했습니다.]

실제로 어떻게 만들어지는지, 보통 사용하는 웹규격은 어떤지에 대해 배울 수 있었습니다.

---

높이는 특별한 경우가 아니라면 auto로 두고, padding으로 조절합니다.
background나 떠오르게 된 box가 기존의 layout에서 벗어난 경우에는 auto를 사용하지 않습니다.

---

모듈화

보통 header와 footer는 고정된 채로 main의 내용이 바뀝니다.
고정된 부분은 components로 만들어 작업을 합니다.

---

.wrap : 한 섹션을 크게 둘러싸는 박스의 클래스명입니다.
<header></header>
<main>
</main>
<footer></footer>

---

.container 1200px 안에 들어가는 내용은 클래스를 부여합니다.

---

<meta>는 검색 타이틀, 설명, 키워드 등의 내용을 담습니다.

---

웹사이트를 만들기 위한 준비입니다.

1.우선 폴더를 만듭니다. css, js, img

 

reset.css
2. reset을 설정합니다.
@charset 'utf-8'; 주석을 달 때 한글이 깨지지 않도록 합니다.

3. reset에서 font를 설정합니다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body {
    line-height: 1;
    font-family: 'Noto Sans KR', sans-serif;
}
4. reset에서 icon 을 설정합니다.
@import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');

 

main.css

5. main.css를 만듭니다.

jquery는 1.x.x 버전을 이용합니다. https://releases.jquery.com/
minified 를 다른이름으로 저장 > js 폴더 안에 저장합니다.

script src=""로 연결을 합니다.
    <script src="./js/jquery-1.12.4.min.js"></script>
html 연결을 합니다.
    <script src="./js/main.js"></script>
jquery는 아래처럼 적용합니다. ( $(function() {})은 DOMcontentloaded 역할을 합니다. )
$(function(){
    $("h1").hide();
})

 

css는 link로 연결합니다. reset이 가장 위로 오도록 합니다.
    <title>DK-streel - training01</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/main.css" />

js는 script src=""로 연결합니다. jquery가 가장 위로 오도록 합니다.
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/main.js"></script>
  </head>

---

slick : 부드럽게 슬라이드를 만들 수 있는 플러그인 입니다.
https://kenwheeler.github.io/slick/

cdn에서 안내하는 링크를 다른이름으로 저장을 통해 css, js 폴더에 저장합니다.

CSS
cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
JS
cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js

플러그인을 가져오는 위치는 정해져 있습니다.
    <link rel="stylesheet" href="./css/reset.css" />
    <!-- 플러그인은 여기에 위치합니다. -->
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./js/jquery-1.12.4.min.js"></script>
    <!-- 플러그인은 여기에 위치합니다. -->
    <script src="./js/main.js"></script>

    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/slick.css">
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/slick.min.js"></script>
    <script src="./js/main.js"></script>

slide는 div안에 생성합니다.
    <div class="frist_slider">
      <figure>01</figure>
      <figure>02</figure>
      <figure>03</figure>
    </div>

$("").slick() 으로 슬라이드를 적용할 수 있습니다.
$(function () {
  $(".frist_slider").slick();
});

---

클론코딩을 해봅시다.

우선 div.wrap으로 감싸 줍니다.
    <div class="wrap">
      <header class="header"> // header.header 클래스명을 붙이는 사람도 있고 안 붙이는 사람도 있고 다릅니다.
      </header>
    </div>

현장에서는 섹션에 이름을 붙여서 씁니다. 섹션은 여러 개를 쓰는 경우가 많습니다.
      <main>
        <section class="content">
        </section>
      </main>

container 안에 넣습니다.
        <section class="content">
          <div class="container">
            <figure>
              <img src="" alt="">
            </figure>
          </div>
        </section>

사진, strong, p 를 만듭니다.
              <img src="./img/main_bg01.jpg" alt="DK-steel"> <!-- alt에는 보통 회사명을 넣습니다. -->
              <strong></strong>
              <p></p>
            </figure>

---

html 뼈대 준비가 되었으면 css 작업을 합니다.
.content {
  padding: 100px 0;
}

.content .container {
  display: flex;
  gap: 30px;
  width: 1200px;
  margin: 0 auto;
}
많이들 따르는 css 입력 순서입니다.
position  >
display >
width >
height >
font >
padding >
margin >
transform

이미지 크기를 동일하게 합니다.
.content .container figure {
  flex: 1;
}

.content img {
  width: 100%;
  margin: 0 0 20px 0;
}

inline은 margin이 적용이 안되기 때문에 display: block으로 바꿉니다.
.content strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
line-height는 보통 1.45를 많이 씁니다.
.content p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.25;
}