7월5일33일차 - git push, 반응형, slick-rtl, 웹코딩2(식품)

이번 코딩은 slide를 중점적으로 연습합니다.

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

시안부터 디자인 하는 것은 어렵고 계속 바뀌기 때문에 대략적인 레이아웃과 아이디어만 구상한 뒤에

코딩을 하면서 간격이나 폰트를 맞추기로 했습니다.

러프한 레이아웃을 따라 러프한 코딩을 구현했습니다.

---

git을 terminal로 이용하는 설명은 github에서 repository를 만들고 난 직후에 잘 정리되어 있습니다.

…or create a new repository on the command line
echo "# responsive_web" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/youngentry/responsive_web.git
git push -u origin main

…or push an existing repository from the command line
git remote add origin https://github.com/youngentry/responsive_web.git
git branch -M main
git push -u origin main

 

 

 

reset에 overflow-x: hidden을 설정해 놓으면 가로로 scroll bar가 생기지 않습니다.



설정에서 css만 기본 format save를 해제할 수 있습니다.
css > Format:Enable [체크박스 해제]
현장에서는 css를 가로로 길게 씁니다.

 

 

 

container는 항상 쓰이면서도 속성은 대부분 동일하기 때문에 전체 적용되도록 하고,

수정이 필요할 때 별도의 container 속성을 줍니다.
.container { display: flex; gap: 1.5rem; width: 60rem; margin: 0 auto; }

 

 

반응형 기본 폰트는 html 20px, body 0.8rem입니다.
html { font-size: 20px; }
body { font-size: 0.8rem; }

 

 

반응형이 되었을 때 container는 width: auto로 설정합니다.
@media (max-width: 1200px) {
  .container { width: auto; }

 

 

화면 크기별 px 사이즈 입니다.

@media (max-width: 1200px) { 작은 화면
@media (max-width: 768px) { 아이패드
@media (max-width: 560px) { 스마트폰

 

 

 

반응형으로 만들 때 겹치는 속성은 지우고 format save를 없애 코드를 정리합니다.

개발자에 따라서 원래 형태로 두고 수정을 하기도 합니다.
@media (max-width: 1200px) {
  .container { width: auto; }
  .step01 { background: #f00; }
}
@media (max-width: 768px) {
  .container { padding: 0 0.75rem; }
  .step01 { background: #369; }
}
@media (max-width: 560px) {
  html { font-size: 16px; }
  .container { flex-direction: column; }
  .step01 { background: #369; color: #fff; }
  .step01 h2 { font-size: 1.25rem; margin: 0 0 0.5rem 0; }
  .step01 p { font-size: 0.75rem; margin: 0 0 1.5rem 0; }
}

 

 

 

vw는 pc버전에서는 스크롤 바가 생기기 때문에 잘 쓰지 않지만, 
주로 모바일 버전에서 mainVisual의 slogan의 font-size에 적용하게 됩니다.
@media (max-width: 560px) {
  .step01 h2 { font-size: 8vw; }
}

 

 

nav는 global navigation bar의 약자를 class로 사용합니다.
          <nav class="gnb">

 

 

메뉴버튼을 만들고 560px이하의 사이즈에서 보이도록합니다.
.mbtn { display: none; }
.container { flex-direction: column; }
.mbtn { position: fixed; inset: 1rem 1rem auto auto; display: block; }

 

 

---

slick의 slides를 가운데로 이동시키는 방법입니다. 
container 사이즈를 1230px로 늘려주고 요소에 padding을 15px만큼 주면 됩니다.

 

rtl을 적용하기 위해서는 attribute dir="rtl"을 포함시켜주면 됩니다.

 

화살표 함수에는 this가 없습니다

 

스크롤 이벤트로 header가 사라지고 나타나는 효과를 구현합니다.
  $("html, body").on("mousewheel", function (e) {
    var d = e.originalEvent.deltaY;
    if (d > 0) {
      $(".header").addClass("on");
      // console.log("내림");
    } else if (d < 0) {
      $(".header").removeClass("on");
      // console.log("올림");
    }