7월6일34일차 - float-responsive, prett-ig, slick 웹코딩3(식품)

float으로 responsive를 구현하는 방법을 배웠습니다.

처음 보는 속성이기 때문에 생소하여 어느 정도까지만 이해가 되고 그쳤습니다.

실제로 현장에서 많이 사용하지는 않는다고 합니다.

오래 된 사이트의 경우엔 float가 코드에 들어가 있을 테니 알아는 두라고... 

 

[220706 식품코딩Mc] [ 220706 식품코딩Mc html / css / js ]

 

---

.prettierignore를 사용하면 원하는 파일에 format save가 적용되지 않도록 할 수 있습니다.
css를 작성할 때는 prettier의 format save를 적용해 실수 없이 편하게 작성하고

완성된 코드를 가로로 길게 쓰고 싶다면 .prettierignore에 *.css를 입력하여 저장합니다.
그리고 css-compact extension을 이용하여 한 줄로 바꾸어 저장하면 됩니다.

css-compact로 정렬을 하면 아래와 같이 코드가 한 줄로 길게 나열됩니다. 

 

float으로 display: flex; 처럼 가로로 배치하는 방법입니다.
figure 각각에 float을 적용합니다.
width: 33.333333%로 크기를 동일하게 만듭니다.
padding으로 gap처럼 간격을 맞춥니다.
.float01 .container figure { float: left; width: 33.333333%; padding: 0 15px; } 

float을 적용하면 떠오르게 되면서 figure를 싸고 있는 box의 height가 0이 됩니다.
높이를 살려주기 위해서는 해당 box에 가상요소 선택자를 만들어 clear: both; 를 적용해야 합니다.
.float01 .container::after { content: ""; display: block; clear: both; }

모든 박스에 동일한 방식 적용할 것이기 때문에 reset에 class를 만들어 저장하고 필요한 요소에 class를 줍니다.
.clearfix::after { content: ""; display: block; clear: both; } 

          <div class="container clearfix">
            <figure><img src="./img/lesedilarona01.jpg" alt="" /></figure>
          </div>
          
          

         
header를 float으로 만드는 방법입니다.
.header .container { width: 1200px; margin: 0 auto; }
h1을 container의 left로 보냅니다. 
.header h1 { float: left; padding: 0 15px; }
nav를 container의 right로 보냅니다. 
.header .gnb { float: right; } 
nav안의 li를 left로 보내면 menu01 ~ menu05 순서대로 배열됩니다.
.header .gnb > ul > li { float: left; } 
.header .gnb > ul > li > a { display: block; padding: 0 15px; } 
padding: 0 15px; 은 가운데로 정렬하기 위함입니다. width는 1170px이 됩니다.

 

 

float을 반응형 메뉴로 만드는 방법입니다.
header container의 width: auto; 속성을 auto로 바꿉니다.
.header .container { width: auto; margin: 0 auto; } 
nav의 float을 none으로 바꾸고 위치를 잡습니다.
.header .gnb { float: none; position: fixed; top: 0; left: 0; width: calc(100% - 90px); height: 100vh; background: #fff; border-right: 1px solid #ddd; padding: 50px 15px 0 15px; } 
li의 float을 none으로 바꾸고 border로 경계선을 만듭니다.
.header .gnb > ul > li { float: none; border-bottom: 1px solid #ddd; } 

section container의 width: auto; 속성을 auto로 바꿉니다.
.float01 .container { width: auto; margin: 0 auto; } 
figure의 width를 33% > 100%로 바꿉니다.
.float01 .container figure { float: left; width: 100%; padding: 15px 15px; } 
메뉴 버튼을 만듭니다.
.mopen { display: block; position: fixed; top: 30px; right: 10px; line-height: 1;} 

menu가 사라지고 나타나도록 left를 조절합니다.
.header .gnb { left: -100%; transition: 0.5s; } 
.header .gnb.on { left: 0; } 

hamburger menu 플러그인을 이용하면 메뉴버튼을 쉽게 만들 수 있습니다.
다양한 메뉴 버튼이 있습니다.
https://jonsuh.com/hamburgers/
https://github.com/jonsuh/hamburgers

 

설명서를 따라 필요한 위치에 button을 추가합니다.
<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
원하는 모양을적용시키기 위해서 class를 추가하면 됩니다.
            <button class="hamburger hamburger--collapse is-active" type="button">
is-active를 js로 toggle해줍니다.
  $(".hamburger").on("click", function () {
    $(this).toggleClass("is-active");
  });

---

slick의 focusOnSelect로 클릭한 슬라이드로 이동하는 이벤트를 만들 수 있습니다. 

Enable focus on selected element (click)
focusOnSelect
default: false


js로 선택을 하는 간편한 팁은 parent의 index를 이용하는 것입니다.
  $(".pageNums li a").on("click", function (e) {
    e.preventDefault();
    $(this).parent().siblings().removeClass("on");
    $(this).parent().addClass("on");
    var idx = $(this).parent().index();
    $(".promoPages>div").removeClass("on");
    $(".promoPages>div").eq(idx).addClass("on");
  });