2주차 정리 (05/23 ~ 05/27)

10일 사이에 많은 것을 배웠고 배우고 있지만, 아직은 초반이라 그런지 반복하여 손에 익히는 시간이 많습니다.

이번 주 목요일 부터는 9:00~18:00 총 8시간의 수업으로 전환됩니다. 

체력이 받쳐줘야 할 것 같습니다. 운동도 빠지지 않고 사흘에 한 번 이상은 할 수 있도록 노력해야겠습니다.

2주차 노트

• 5월27일 10일차 - slick-slider, 가상요소선택자로 pattern 입히기
• 5월26일 9일차 - side menu, keyframes 구현
• 5월25일 8일차 - 슬라이드 top 사이즈바꾸기, JS로 toggle("on ") 학습
• 5월24일 7일차 - 헤더 메뉴 구현하기, 슬라이드 활용하기
• 5월23일 6일차 - slick 슬라이드 구현, 3단 이미지 코딩
• [node.js] 2775 부녀회장이 될테야 (자바스크립트) 2차원 배열

---

6일 차
reset.css font, icon 설정 / jquery로 slick 슬라이드 구현

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

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

---

모듈화

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

---

.Wrap : 한 섹션을 크게 둘러싸는 박스의 클래스명입니다.

전체 구조를 .Wrap으로 감싸준 뒤에 작업을 시작합니다.

<div class="Wrap">

    <header></header>
    <main></main>
    <footer></footer>

</div>

---

.container : 1200px 안에 넣을 내용은 보통 .container 클래스를 부여합니다.

---

<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 : 부드럽게 슬라이드를 만들 수 있는 플러그인 입니다.

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();
});

---

7일 차
html 구조 css 코드 바르게 작성하기

[오늘 학습한 내용으로 구현한 사이트의 화면입니다.]

hr은 문장과 문장 또는 컨텐츠와 컨텐츠 사이를 나눌때 사용합니다.
디자인적으로 이용하기 위해서는 bolder를 사용합니다.

---

#dddddd는 경계선에 사용되는 표준 색상입니다.
dd처럼 반복되는 경우에는 #ddd로 표현할 수 있습니다.
.header .top_banner {
  border-bottom: 1px solid #dddddd;
}

---

1200px의 박스에는 .container 클래스를 부여합니다.
          <ul class="container">

---

inline과 block이 혼재한 경우. 예를 들어서,

img에는 padding이 적용이 될 때, inline의 경우에는 padding이 적용이 안되는 경우가 있습니다.
하지만 처음부터 line-height로 조절을 하면 block과 inline에 있어서 손쉽게 관리할 수 있습니다

.header .top_banner {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
  line-height: 30px;
}

---

bootstrap에 사용된 색상을 style로 추출해 이용하는 것입니다. 보기에 편안한 색상을 찾을 수 있습니다.
#dc3545;

---

색상은 변수에 담아 이용할 수 있습니다. (보통은 mc와 같이 이름을 정합니다. mc는 메인컬러를 의미합니다.)
인터넷 익스플로러에서는 적용되지 않습니다.
색상을 변경하기 위해서 해당 색을 일일이 찾아 변경할 필요 없어집니다.
변수의 색깔만을 수정하면 모든 색깔을 동시에 바꿀 수 있어 편리합니다.
:root {
  --mc: #dc3545;
  --gc: #dddddd
}
.header .top_banner {
  border-top: 2px solid var(--mc);
  border-bottom: 1px solid var(--gc);
}
.header .top_banner li {
  border-right: 1px solid var(--gc);
}

---

rem : 기본 폰트사이즈를 html 에 px로 적용하고 나머지 폰트사이즈를 rem으로 설정한다면 나중에 모바일 웹페이지로 변경할 때 유용합니다. 
모든 폰트 사이즈를 기본 사이즈의 배율로 지정했기 때문에 html의 폰트사이즈만을 수정해 모든 폰트 사이즈를 동시에 바꿀 수 있습니다.
html {
  font-size: 20px;
}
rem은 html에서 정한 사이즈의 배율 단위입니다.
body {
  font-size: 0.8rem;
}
.header .top_banner {
  font-size: 0.65rem;
}

---

최상단으 banner와 같이 레이아웃에도 없어져도 전체 구조에 영향이 없는 부분은 따로 빼냅니다.
        <div class="top_banner">
          <ul class="container">
            <li>DK스틸 : 수입파이프 일반파이프 환봉SS41 S45C 주문생산</li>
            <li>
              <a href="">
                <i class="xi-pause"></i></li>
              </a>
          </ul>
        </div>

---

로고는 h1안에 넣습니다.
          <h1>
            <a href="">
              <img src="./img/logo.png" alt="">
            </a>
          </h1>

---

nav는 반.드.시 nav태그 안에 만듭니다. 중요합니다.
          <nav>
            <ul>
              <li><a href="">회사소개</a></li>
            </ul>
          </nav>

---

메뉴를 왼쪽에 있는 logo와 띄우기 위해서 margin: 0 0 0 auto; 를 적용합니다.
.header nav {
  margin: 0 0 0 auto;
}

---

메뉴에서는 부모를 확실하게 잡아줍니다.
.header nav>ul
.header nav ul 도 상관은 없지만, 메뉴에는 많은 박스가 생기기 때문에 처음부터 확실하게 정하고 갑니다.

---

reset.css 에 빠진 내용이 있습니다.
img {
    vertical-align: middle;
}

---

가상요소 선택자 ::before 로 메뉴 사이의 경계선을 만들 수 있습니다.
.header nav > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0.6rem;
  background: var(--gc);
}

기준은 li 마다로 합니다.
.header nav > ul > li{
  position: relative;
}

위치는 position: absolute; 로 조절합니다.
.header nav > ul > li::before {
  content: "";
  position: absolute;
  inset: 50% auto atuo -0.75rem;
  width: 1px;
  height: 0.6rem;
  background: var(--gc);
  transform: translateY(-50%);
}

---

.header nav > ul > li~li::before {
~표시는 형제를 의미합니다. 자기자신을 뺀 형제 모두를 선택합니다.
입력하게 되면 제일 앞의 객체는 사라집니다.

---

슬라이드는 div 안에 생성하게 됩니다.
section엔 항상 이름을 줍니다.
        <section class="main_visual">
          <div class="main_slider">
            <figure>
              <img src="./img/main_bg01.jpg" alt="">
            </figure>
          </div>
        </section>

$(function () {
  $(".main_slider").slick({
    arrows: false,  // 화살표를 표시합니다. false
    autoplay: true,  // 자동으로 슬라이드가 실행됩니다. true
    pauseOnHover: false,  // 마우스를 얹었을 때 슬라이드가 멈춥니다. false
        pauseOnFocus: false,  // 마우스를 포커스 했을 때 슬라이드가 멈춥니다. false
  });
});

---

슬라이드 위의 글씨는 position: absolute; 로 나타냅니다.
.main_visual {
  position: relative;
}
.main_visual .slogan {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  text-align: right;
  color: #fff;
}

---

text-shadow는 글자에 그림자를 주는 방법입니다.
.main_visual .slogan {
  text-shadow: 0 0 2px var(--dc);
}

---

8일차
jquery로 슬라이드 버튼 구현

jquery로 class의 index를 변수로 지정하고 css 속성의 top에 index 값을 곱해주면 이미지가 위로 올라가는 듯한 슬라이드를 구현할 수 있습니다.

$(function () {
  $(".num li").on("click", function () {
    var idx = $(this).index();
    $('.shoes .case ul').css({ top:-450 *idx})   })  });

[버튼을 누르면 top 위치가 변하는 슬라이드]

 

그리고 이미지를 배경에 두고 전면의 레이아웃만 움직이는 효과를 배웠습니다.

하지만 실수로 파일을 백업하지 않았습니다. 남아있는 코드로 복습한 뒤에 직접 구현해보도록 합니다.

---

css 속성 순서가 잘 기억나지 않을 때마다 복습해야겠습니다. 헷갈릴 때마다.

100% 정확하지는 않을 수도 있습니다. 크게는 가장 자주 이용하는 다음 6가지를 외우면 좋을 듯 합니다.

포지션 > 디스플레이 > width-height > 패딩마진 > 폰트 > 애니메이션

position  (z-index) >
display >
size >
padding margin  >
font (font-size color text-align) >
background >
border >
animation (transform transition)

---

 

background 속성입니다.

bg안에서 이미지가 자신의 크기만큼 들어가고 default 값은 repeat입니다. 여백이 있다면 이미지가 반복됩니다.
.test_bg {
  background-color: #f00;
  background-image: url(../img/logo.png);
  height: 444px;
}
  background-repeat: no-repeat;

 no-repeat 속성을 부여하면 반복되지 않습니다.

  background-size: cover; 

이미지를 이미지의 크기대로 보여줍니다. 박스가 작으면 이미지가 잘립니다.
  background-size: contain; 

박스가 작으면 이미지를 축소해서라도 모든 모습을 보여줍니다.

---

이미지를 배경에 두고 전면의 레이아웃만 움직이는 효과를 구현합니다. background: fixed를 활용합니다.
.test_bg {
  background-image: url(../img/main_banner01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 300px;
  margin-bottom: 1000px;
}
축약형은 다음과 같습니다. 아이폰, 사파리에서는 적용되지 않습니다.
(칼라, 이미지, 리피트, 픽스드, bgposition x, bgposition y/cover)
.test_bg {
  background: #f00 url(../img/main_banner01.jpg) no-repeat fixed center center/cover;
  height: 300px;
  margin-bottom: 1000px;
}

---

이를 슬라이드에 적용해봅니다. background를 설정한 뒤에 사이즈를 줍니다.
          <div class="main_slider">
            <figure class="item01"></figure>
            <figure class="item02"></figure>
            <figure class="item03"></figure>
          </div>
주의사항입니다. 슬릭은 .main_slider>figure 과 같이 자식을 선택하는 것이 안됩니다.

높이를 줍니다.
.main_visual figure {
  height: 30rem;
}
background를 지정합니다.
.main_visual .item01 {
  background: url(../img/main_banner01.jpg) no-repeat center center/cover;
}

---

현재 슬라이드가 선택되었을 때 크기가 변화하는 효과를 줍니다.
현재 슬라이드에는 on 클래스명을 주고, 형제객체에는 on 클래스명을 제거합니다.
$(function () {
  $(".main_slider").on("init reInit afterChange", function () {
    var here = $(".slick-current");
    here.addClass("on").siblings().removeClass("on");
  });
현재 슬라이드(.on 이 붙었다면)의 크기를 150%로 커지게 합니다. transition도 0.5s 줍니다.
.main_visual .item01 {
  background: url(../img/main_bg01.jpg) no-repeat center center/100%;
}
.main_visual .item01.on {
  background: url(../img/main_bg01.jpg) no-repeat center center/150%;
  transition: 0.5s;
}
fade: true; 를 주게 되면 옆에서 날아오지 않고 제자리에서 이미지가 페이드인 합니다.
  $(".main_slider").slick({
    fade: true,
  });
});

---

overflow: hidden;을 활용해 클릭에 반응하여 top 위치가 변하는 슬라이드를 구현합니다
우선 html section을 만듭니다.
    <section class="shoes">
        <div class="case">
            <ul>
                <li>
                    <img src="../img/01s.png" alt="">
                </li>
            </ul>
        </div>
        <ul class="num">
            <li>01</li>
        </ul>
    </section>
css를 설정합니다.
body{
    background: #333;
}
.shoes {
    padding: 100px 0;
}

position: relative; 로 기준을 잡고 overflow: hidden; 으로 넘치는 사이즈는 가립니다.
.shoes > .case {
    position: relative;
    width: 809px;
    height: 450px;
    margin: 0 auto; /* 가운데로 이동합니다. */
    overflow: hidden;
}
position: absolute; 설정합니다.
.shoes ul {
    position: absolute;
    top: 0;
    left:0;
}
js로 이벤트를 구현합니다. this 는 'click'이벤트를 실행한 대상입니다. 
    var idx = $(this).index(); 는 index(); 
$(function () {
  $(".num li").on("click", function () {
    var idx = $(this).index();
    console.log(idx);
  });
});
    var idx = $(this).index(); li의 index 값을 표시합니다.
$(function () {
  $(".num li").on("click", function () {
    var idx = $(this).index();
    $('.shoes .case ul').css({ top:-450 *idx})
  })
});

---

jquery 효과 확인은 https://jqueryui.com/ 에서 합니다.
transition 에는 다음과 같은 속성들이 있습니다.
transition: 1s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;

---

9일차
side bar 구현 / keyframes

JS로 클릭을 하면 화면에 없다가 나타나는 사이드바를 구현했습니다.

나타나고 사라질 뿐만 아니라 버튼의 텍스트를 OPEN <-> CLOSE 로 바꿉니다.

---

dl 태그는 dt 또는 dd 만을 자식으로 가집니다.
정의 및 특징
<dl> 태그는 용어(term)와 그에 대한 설명(description)을 리스트 형식으로 정의할 때 사용합니다.
<dl> 요소는 용어(term)나 이름(name)을 나타내는 <dt> 요소와 해당 용어에 대한 설명을 나타내는 <dd> 요소로 구성됩니다.

---

 position: relative, absolute, fixed 모두 기준이 될 수 있습니다.

---

atuo와 0사이에는 중간단계가 없기 때문에 transition이 적용되지 않습니다.
.top_banner .container {
  transition: 0.5s;
}
.top_banner .container.on {
  height: 0;
  overflow: hidden;
}

---

close 버튼의 텍스트를 open 으로 바꾸는 방법입니다.
우선 html을 만듭니다. 버튼 안에 icon을 넣습니다.
    <div class="top_banner">
        <div class="container">
            <h2>Lorem ipsum dolor sit.</h2>
            <p>Lorem, ipsum dolor.</p>
        </div>
        <button>
            <i class="xi-arrow-top"></i>
        </button>
    </div>

css로 가상요소선택자를 만듭니다.
.top_banner button::after {
    content: "close";
}
.top_banner.active button::after  {
    content: "open";
}
JS로 클래스명 .active 가 없다면 close .acitve가 있다면 open으로 바뀌도록 이벤트를 만듭니다.
$(function () {
    $('.top_banner button').on('click', function(){
        $('.top_banner').toggleClass('active');
    })
  });
css로 크기와 위치를 조절하고, overflow: hidden; 으로 height가 메뉴 컨텐츠를 가릴 수 있도록 합니다.
.top_banner .container {
  overflow: hidden;
}
.top_banner.active .container {
  height: 0;
}
.active가 붙으면 화살표아이콘을 180도 회전시킵니다. 
.top_banner.active i {
  transform: rotate(180deg);
}
.top_banner {
  position: relative;
  background-color: #ff0;
  border-bottom: 3px red solid;
}
마우스포인터는 cursor 속성으로 바꿀 수 있습니다.
.top_banner button {
  cursor: pointer;
}

---

이어서 옆에서 나오는 기능을 구현합니다.
html을 만듭니다. 
    <ul class="right_banner">
        <li><i class="xi-bars"></i><span>Lorem, ipsum.</span></li>
        <li><i class="xi-close"></i><span>Lorem, ipsum.</span></li>
        <li><i class="xi-heart"></i><span>Lorem, ipsum.</span></li>
    </ul>
vh는 화면크기의 배율입니다. top:50vh는 화면크기의 반이 됩니다.
.right_banner {
  position: fixed;
  top: 50vh;
  right: -100px;
  background: #ff0;
  transition: 0.5s;
}
.right_banner.active {
  right: 0;
}

---

10일차
position / slick / pattern 입히기

실제로 구현을 해보며 얻어가는 것이 많습니다.

position, slick-slider, 가상요소선택자 pattern 입히기 뿐만이 아니라,

올바른 semantic 사용법, 실제 현장에서 이용하는 size 등을 반복하며 배울 수 있습니다.

[수업 중 구현한 페이지의 주소입니다.]

---

image 이름을 붙일 때 m01 : main, 두자릿수를 대비해 01 부터 시작합니다.
이미지 크기가 넘칠 때는 max-witdth 를 적용하면 됩니다.
img {
    max-width: 100%;
}

---

transform: scale로 이미지 크기를 키울 때 overflow: hidden; 을 적용했음에도 이미지 크기가 넘친다면,

img 를 div로 감싸서 해결합니다. 
              <div class="box">
                <img src="./img/main_bg01.jpg" alt="" />
              </div>

---

strong은 inline이고 p는 block입니다.
line-height가 적용이 되는 부분, margin이 적용이 되는 부분이 겹쳐도 관습적으로 적용하는 속성 위치가 있습니다.

여기서는 strong을 block으로 만들고 마진을, p안의 글자는 line-height로 조절합니다.

.content strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 17px 0;
}
.content p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
}

---

shortcut
.left+.right

---

가로로 화면 전체를 가로지르는 경계선을 만드는 방법입니다. container의 부모에 border를 주면 됩니다.
        <section class="product">
          <div class="container">
.product {
  padding: 30px 0;
  border-top: 1px solid var(--gc);
}

---

flex 활용하는 방법입니다. 중요합니다.
3칸 중에 2칸을 차지하게 됩니다.
.product .container .left {
  flex: 2;
}
3칸 중에 1칸을 차지하게 됩니다.
.product .container .right {
  flex: 1;
}

---

a에 전화번호와 이메일 입력하는 방법입니다. tel:, mailto:
                <li><a href="tel:051-325-0355">051-325-0355</a></li>
                <li>Fax : 051-326-0356</li>
                <li>
                  <a href="mailto:kgbds97@naver.com">

                  e-mail : kgbds97@naver.com

                  </a>
                </li>

---

text-align: right; 글자를 오른쪽 끝으로 붙이는 방법입니다.
.customer .left {
  text-align: right;
}

---

 text-transform으로 글자를 대문자로 바꾸는 등의 변환을 할 수 있습니다.
.customer>div a p {
  text-transform: uppercase;
}

---

이미지 위의 글자를 깔끔하게 보이도록 하는 방법은 text-shadow입니다.
  text-shadow: 0 0 3px var(--dc);

---

이미지 위에 패턴을 넣는 방법입니다.  background: url(../img/pt-bg01.png);
작은 패턴들이 반복되면서 이미지 전체를 덮습니다.
.customer > div a {
  background: url(../img/pt-bg01.png);
}

---

<address> 태그는 회사 정보를 나타낼 때 씁니다. 글자기울기 효과가 들어갑니다.
font-style: normal; 을 적용하여 기울기를 없앨 수 있습니다.
카피라이트의 마크는 &copy; 로 만듭니다.
            <div class="copy">&copy; DK스틸 All Rights Reserved.</div>

---

flex로 5만큼에 대해서 1대 4로 나눕니다.
.footer .logo {
  flex: 1;
}
.footer address {
  flex: 4;
}

---

글자 사이 경계선을 만드는 방법입니다.
만들고자 하는 box가 inline-block일 경우에는
.footer address ul li {
  display: inline-block;
}
가상요소선택자도 마찬가지로 inline-block으로 만들어 주고 li~li 로 첫번째 li는제외합니다.
.footer address ul li~li::before{
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--gc);
}

---

패턴 넣기 2 입니다. 가상요소 선택자로 section::after에 만듭니다.
.main_visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
}
문제는 이미지만이 아니라 slogan도 함께 가려집니다.
z-index를 주어 해결합니다.
.main_visual .slogan {
  z-index: 999;
}

---