FRONT-END

&copy 는 특수문자 c커피 출력

&lt;div는 <div>를 그대로 출력
또는 &lt; div &gt;

실시간 날짜 출력하기
자바스크립트로
new Date( ) 현재 날짜
new Date( ).getFullYear( ) 현재 년도

자바스크립트에서
document.quertselector를 쓸필요없이
html에서 선택자를 class가 아닌 id로 하여
'#id'로 자바스크립트에서 바로쓸수있다.

[스크롤버튼을 만들어 버튼을 누를시 화면을 맨위로 올리기]

const scrollEl = document.querySelector('.스크롤버튼클래스')

gsap의 ScrollToPlugin 를 head에 사용 선언

특정 자식한테 positon: absolute을 주어 자식간에 상호위치를 무너뜨려서 곂쳐 보이게 한다.

backface-visibility:hidden을 적용한 요소의 180도 회전이 된것들(transfrom :rotate(180deg)은 보이지 않게된다.

원근법(더욱 입체화하게 보이게함) perspective는 가장 부모요소에 적용한다.

transition-delay 옵션을 통해 transition이 몇초 동안작동하는것을 떠나 그 transition이 몇초뒤에 시작을 하는지 지연을 정의할수 있다.

[각 요소들이 스크롤에 따라 움직일때 클래스가 삽입되기]

const spyEls = document.querySelectorAll("section.scroll-spy")

spyEls.forEach( function (spyEl) {
  new ScrollMagic
  .Scene({ //감시기능
    triggerElement: spyEl, // 보여짐을 감시한다.
    triggerHook: .8 // 뷰포트 기준 80% 부근에 위 요소가 도달하면 작동
  }) 
  .setClassToggle(spyEl, 'show') //.Scence에서 감시완료된 것 spyeEl에 show클래스를넣음
  .addTo(new ScrollMagic.Controller());
});

[요소별 클래스에 따른 움직임 설정]

*이미 숨겨져 있는 모습을 구현한뒤 특정 클래스 .show가 들어가면 나타나게 설정한다.

.back-to-position{

  opacity: 0;

  transition: 1s;

}

.back-to-position.to-right{

  transform: translateX(-150px);

}

.back-to-position.to-left{

  transform: translateX(150px);

}

.show .back-to-position{

  opacity: 1;

  transform: translateX(0);

}

.show에 딜레이 주기

.show .back-to-position.delay-0{

  transition-delay: 0;

}

.show .back-to-position.delay-1{

  transition-delay: 0.3s;

}

.show .back-to-position.delay-2{

  transition-delay: 0.6s

}

.show .back-to-position.delay-3{

  transition-delay: 0.7s;

}

[youtube iframe api]

// 2. This code loads the IFrame Player API code asynchronously.

      var tag = document.createElement('script'); =>html에 script라는 요소의 변수 tag를 생성

      tag.src = "https://www.youtube.com/iframe_api"; => tag안의 script의 src를 작성

      var firstScriptTag = document.getElementsByTagName('script')[0]; => html에서 script태그들의 0번인 맨처음을 변수 firstScriptTag에 생성

      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); => html에서 firstScriptTag인 script태그의 맨처음의 부모 즉 header의 맨 앞인 firstScriptTag앞에 tag를 삽입 즉, 맨 처음 이 스크립트가 실행되도록 설정하는것

      // 3. This function creates an <iframe> (and YouTube player)

      //    after the API code downloads.

      function onYouTubeIframeAPIReady() {

        new YT.Player('player', { =>html에서 선언한 <div id="player></div>

          videoId: 'M7lc1UVf-VE',

playVars:{autoplay:true, loop:true, playlist:'비디오번호'}, =>재생옵션들(loop는 반복한 playlist로 영상번호가 함께 다시작성 되어야한다.)

          events:{

            onReady: function(event){ => 영상시작 준비가 되면 function 함수작동 / event 는 위 모든 영상 요소들이다.

              event.target.mute();

            }

        });

      }

─────────────────────────────────────────────────────g[gsap로 이미지 반복움직이기]

function floatingObject(selector){

  gsap.to(selector, 1, {

    y:20, //y로 20움직이기

    repeat:-1, //반복횟수로써 -1로할 시 무한반복

    yoyo:true, //1회 끝날시 반대로 되돌림

 //+gsap easing 함수로 부드러운 처리를 할수있다.

 //+delay 로 시작 시간을 조절 할 수 있다.

  });

}

floatingObject('.floating') // 바로 작동시키기

[gsap로 이미지 랜덤 수치로 움직이기]

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 문자 데이터를,
  // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}

특정 행동 시("click") 변수가 바뀌도록 하려면
변수 = ! 변수 로 true, false를 순환하며 작동하도록한다.

요소의 크기를 줄이고 늘리고 할때는 부드러운 작동을 위해 overflow를 히든으로 고정시켜 커지고 작아질때 튀어나온는 부분은 실시간으로 잘려나가게 만든다.

display : flex 사용으로 flex-wrap: wrap을 쓰게되면 적용한 부모크기만큼 내에서 가로로 넘는 요소들은 아래로 내려서 포장한다.

flex-grow 를 써서 1로 값을 적용할시 자기칸에서 쓸수 있는 최대 넓이를 사용한다.

background-color 투명도

background-color: rgba(0,0,0,투명도 0~1);

─────────────────────────────────────────────────────

부모요소의 width은 자식요소의 padding-top의 기준이 된다
자식요소에 padding-top: 50%를 주면 부모요소의 가로 width의 값의 50%가 기준되어 부모요소도 height가 width의 50%가 된다.

css스타일만을 위해(부모16:9) div를 생성해야한다면
생성하지말고 가상선택자::before를 사용해본다. 대신 before에 content:""와 인라인인지 블록인지 모르니 display: block을 선언한다.

16:9 비율 주기

[부모에게]
width:값
[자식에게(::before)]
width:100%
height:0;
padding-top:56.25% (기준은 부모의 width값)

[swiper 구조]
<div>swiper-container</div>
  <div>swiper-wrapper</div>
    <div>swiper-slide</div>

[swiper 슬라이드 움직이도록 JS작성]
//new Swiper("선택자",{옵션});
new Swiper(".notice-line .swiper-container",{
direction:'vertical' //수직 ( 안적을시 기본수평)
autoplay:true //자동 재생 (autoplay:{delay: 3000} 3초 지연 설정),
loop:true //반복
slidesPerView: 3 //한번에 보여줄 슬라이드수
spaceBetween:10 //슬라이드 사이 여백 (margin-right 값으로 들어감)
centeredSlides: true, //1번슬라이드부터 중앙에 보이기
});

[Pagination(점 점 점 버튼 눌러서 페이지 슬라이드) 와 navigation(화살표 버튼으로 슬라이드 넘기기) 설정]

[pagination 선언]

new Swiper(".promotion .swiper-container",{

pagination:{

el : '.promotion .swiper-pagination',

clickable:true

}

})

[navigation 선언]

new Swiper(".promotion .swiper-container",{

navigation:{

prevEl: '.promotion .swiper-prev',

nextEl: '.promotion .swiper-next'

}

})

─────────────────────────────────────────────────────

display:flex는 정렬할때 안에 요소들을 flex선언한 요소 크기안에 압축넣는것으로
부모에게 선언해야 안에 자식들이 압축되어모이며 그것을 정렬배치할수있다.

position:absolute를 사용하여 가운데배치
수평은 left:0 right:0 margin:auto;
수직은 top:0 bottom:0 margin:auto;

width: calc();
width: calc(819px * 3 + 20px);
width 전체적인 수치 계산으로 사칙연산 사이에 띄어쓰기에 조심해야한다.

─────────────────────────────────────────────────────

[요소를 가운데배치 & 확대시 가운데배치]
1.

요소에 position: absolute를 주고
그 요소를 포함하는 부모에겐 position: releative를 준다

그런뒤 left:50%를 주어 왼쪽으로 밀어낸다음에 margin-left:를 주어 요소의 절반만큼을 -px한다. ( 요소크기px / -2 )

2. 부모요소에 display:flex와
justify-content: center;
align-items: center; 를 준다.

부모요소가 position: releative가 아닌 position: absolute이면

releative와 관계없이 부모요소에 기준하여 자식들이 움직인다.

document.querySelectorAll(" ")
html에서 특정 클래스를 갖는 모든 영역들을 찾는다

forEach(function(각 요소별 이름, index){ })를 통해
이후 forEach를 통해 각각 맨위부터 나열하여 index로 숫자순서로 나열한다.

이후 함수에
gsap.to(맨처음부터 하나씩 작동할 요소, 지속시간, {옵션})를 넣게되면

각 요소별 넣은 같은 옵션들이 동시에 적용된다.

이후 각 요소별 작동 시간을 다르게하려면 요소별로 위 gsap의 옵션추가로 delay를 주어야한다.

gsap.to에서 옵션에 delay 값을 넣게되면 각요소 사이마다 dealy가 들어가게 된다.

delay를 delay : (index+1) * 0.7 같이
forEach로 만들어진 요소별 인덱스는 delay를 다 다르게 계산되도록 설정한다. index로 복리식으로 더 커지면서 하나씩 더욱 뒤로 밀려나게된다.

언더바와 하이푼

container 과 container__name은 일부분관계

btn과 btn--primary는 어떤 상태를 나타내는 관계

border-radius로 모서리깎은뒤 이미지깎기

를 위해서 이미지는 밖으로 튀어나가는데 이부분은 overflow:hidden으로 숨긴다.

box-shadow 박스 뒤 그림자
box-shadow : x축 y축 blur축 rgba(r,g,b,투명도 .15)

box-shadow : x축 y축 blur축 rgba(0,0,0, .15)

position값이 fixed나 absolute일시 가로값이 최대한 늘어나려는게아니라 최대한 줄어들려고한다. 가로 사이즈를 100%로 하면 뷰포트로 기준으로 100%사용가능하다.

자바스크립트 window와 lodash.js , gsap.to

document는 html구조이고
window는 브라우저 탭 구조이다.

._throttle(함수,시간)
lodash.js선언후 _.throttle(function( ){console.log('hello')}, 300))
단위 300은 0.3초 3000은 3초로
lodash에서 _.throttle기능으로 0.3초 마다 작동되도록 설정하는 기능이다.

badegeEl.style.css속성 = "block"
형식으로 선언할수있다. badege.El.style.display="block"

gsap.to(처리할요소, 지속시간(s생략), 옵션(값이 숫자가아니면 " "처리)

애니메이션 처리하는 기능이다.

gsap.to(badgeEl, .6, {css옵션:값} ) 

gsap.to(badgeEl, .6, {css옵션:값} ) 

display:none같은 속성은 숫자가아니라서 transition이나 gsap으로 수치변화를 통한 자연스러운 전환을 만들수 없다.

[소셜미디어로 공유될때 우선제공]

카카오톡

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="설명~~~~" />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />

og:type: 페이지의 유형(E.g, website, video.movie)
og:site_name: 속한 사이트의 이름
og:title: 페이지의 이름(제목)
og:description: 페이지의 간단한 설명
og:image: 페이지의 대표 이미지 주소(URL)
og:url: 페이지 주소(URL)

트위터

<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="Starbucks" />
<meta property="twitter:title" content="Starbucks Coffee Korea" />
<meta property="twitter:description" content="설명~~~~" />
<meta property="twitter:image" content="./images/starbucks_seo.jpg" />
<meta property="twitter:url" content="https://starbucks.co.kr" />

twitter:card: 페이지(카드)의 유형(E.g. summary, player)
twitter:site: 속한 사이트의 이름
twitter:title: 페이지의 이름(제목)
twitter:description: 페이지의 간단한 설명
twitter:image: 페이지의 대표 이미지 주소(URL)
twitter:url: 페이지 주소(URL)

─────────────────────────────────────────────────────

구글 매터리얼 사용 선언

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

─────────────────────────────────────────────────────

스타벅스제작

position : absolute를 주기위해
자식요소에는 width와 height가 정의되어야하며 가운데 배치할시 top,bottom외에도 margin :auto도 적용되어야함

a태그 링크 설정이 안되었을시
#이나 javascript:void(0)으로 임시지정

메뉴마다 사이에 세로줄을 넣는것은 ::before을 사용하여 width 1px의 height 12px정도의 black 줄을 만든다.

검색버튼과 검색창이 곂쳐있을때 material-icons만 눌러도 검색창이 열릴수 있도록

먼저 

        <div class="search">

          <input type="text">

          <div class="material-icons">search</div>

        </div>

에서 자바스크립트를 활용해 search 클래스를 가진 div를 추출한다

const searchel = document.querySelector(".search")

이후 input 버튼을 추출한다 const searchinputel = searchel.querySelector("input")

searchel이 클릭될때 input에 포커스를 가동시킨다.

searchel.addEventListner("click",funtion() {searchinputel.focus()});

클릭시 통합검색 placeholder와 검색버튼을 없애기위해

searchinputel.addEventListner("focus",function() {searchel.classList.add("focused"), searchinputel.setAttruibute("placeholder,"통합검색")

추가하여 searchinputel이 focus 되면 searchel에 focused클래스를 추가하고 placeholder로 통합검색을 띄운다.

반대로 포커스가 취소되면

searchinputel.addEventListner("blur",function() {searchel.classList.remove("focused"), searchinputel.setAttruibute("placeholder,"")

이후

css에서 focused와 search가 클래스가 포커스중일때 공존하면 검색버튼을 투명화시킨다.

opacity:0;

material.setAttribute('style','opacity:0') 이란 style=""이 들어가고 opacity:0이 되어

요소 속성에 style="opacity:0"이 들어가게된다.

fixed는 top이나 bottom값이 없을시 요소의 원래위치로 이동된다. 개발자도구 요소클릭으로 현재 들어갈 위치확인가능

자식선택자만 css선언할때는 예를 들어 div아래 ul태그가 자식선택자와 하위선택자 모두에게 있을시 > 없이 .클래스선택자를 할시 2개 모두에게 적용되므로 부모 > .자식클래스를 통하여 하위선택자는 빼고 자식만 선택하여 선언한다.

div등 블록요소는 내부에 값이 없으면 가로는 최대한 늘어나려고하고 높이는 0이되므로 높이를 지정해주어야 크기가 나타나며 값이 있으면 높이를 지정하지않아도 값이 다들어갈만큼 높이가 auto로 정해진다.

[JS구문종류]
dash-case 하이푼사용
snake_case 언더바사용
camelCase 첫단어는소문자후 단어첫단어는대문자로
PascalCase 모든단어 첫글자는 대문자로

String 문자 "abc"
Number 숫자 123
Boolean 불린데이터 true, false

[함수선언 VS 함수표현]
기명함수/함수선언!
function hello( ) {console.log("a")}

익명함수/함수표현!
let world=function( ) {console.log("a")}

getName:function() {return this.name}
this란 자기가포함한 데이터들{ }사이에서 .name를 찾는다.

[DOM API]

요소1개찾기
변수 = document.querySelector('.box')

요소모두찾기
변수 = document.querySelectorAll('.box')

찾은 여러요소들에 반복적으로 함수 실행
변수.forEach(function(반복매개변수, index) { 함수내용 })

index생략가능
반복매개변수에는 앞 변수의 여러요소를 하나하나 나눈거 하나씩을 넣고 index는 0부터 순서대로 번호가 써진다.

핸들러-특정동작감지시 특정동작하기
변수.addEventListner(1,2)
청취하고있다가
1번 동작시 예를들면 "click"같은 마우스 좌 클릭
2번 익명함수 등 인수 실행 예를들면 function( ) {boxel.classList.add("active")} // active클래스를 boxel에 넣음

특정변수에 클래스 추가하기
변수.classList.add("active")

특정변수에서 클래스 삭제하기
변수.classList.remove("active")

특정클래스가 있나 없나 boolean으로 저장하기
let 변수=boxEl.classList.contains('active')
contains를 써서 있나 없나 확인하며 let으로 선언한 변수에는 True 또는 False 저장

text만 출력하기
.textContent 이며 이것은 값을 지정도 할수 있다.

메소드 체이닝(문자)
a.split('값')
'값'을 기준으로 앞뒤로 나누어 배열로 만듬
값을 안넣을시 a 문자 하나하나 배열로만듬

a.reverse()
a 값을 거꾸로 만듬

a.join('값')
배열된 a 값들에 '값'을 사이 사이넣어 하나의 문자로 합침

flex container 부모요소 축 정렬

수평정렬 : 자식에게 적용하기위해 부모요소에 display:flex를 준다.
flex적용시 부모는 flex container가 되고 자식은 flex items가 된다.

flex종류 : flex와 inline-flex
flex는 기본 block 값을 가지므로 가로세로가 auto
inline-flex는 inline값을 가지므로 가로세로가 최대한 작으려고 맞춤

[flex를 준 부모요소에 적용할 값들]

1. flex-direction : 주 축을 설정
row(수평정렬) 기본값
row-reverse 행축(우-좌)
column (수직정렬)

2. flex-wrap : 줄 바꿈
no-wrap 기본값
wrap 크기를 보장하기위해 줄 바꿈

3. justify-content : 주 축 정렬 방법 (수평)
flex-start 기본값
flex-end 플렉스 컨테이너 끝을 기준으로 오른쪽으로 밀어버림
flex-center 가운데로 배치함

4. align-content 교차축의 여러줄(한꺼번에) 정렬(수직)
flex-start 맨위가 시작 기준으로
flex-end 아래가 시작 기준으로
center 중간이 기준
조건 1: wrap으로 되어야하며 부모에게 여백이있어야하며 자식이 2줄이상이어야함.

5. align-items 교차축 한줄 정렬(수직)
flex-start 맨위가 시작 기준으로
flex-end 아래가 시작 기준으로
center 중간이 기준

─────────────────────────────────────────────────────

[flex item 자식요소]

order 순서 1 2 3
0 기본값 숫자가 작을수록 먼저

flex-grow 증가 너비 비율
0 기본값 숫자가 증가비율

flex-shrink 감소 너비 비율
1 기본값 숫자가 증가비율

flex-basis 공간 배분전 기본너비설정
auto 콘텐트너비기본값
0 기본너비가 없음

─────────────────────────────────────────────────────

전환 transition

transition : 속성명 지속시간(필수) 타이밍함수 대기시간

transition-property : 속성이름
transition-duration : 지속시간(필수)

transition-timing-function : 타이밍함수
값
ease 느리게-빠르게-느리게
linear 일정하게
ease-in 느리게-빠르게
ease-out 빠르게-느리게
ease-in-out 느리게-빠르게-느리게

transition-delay : 대기 시간 지정

2D,3D 변환함수

transform : 변환함수1 변환함수2 변환함수3;
transform: 원근법 이동 크기 회전 기울임;

[2d변환함수]
translate(x,y) 이동
translateX(x) 이동
translateY(y) 이동

scale(x,y) 크기배로증가

rotate(degree)회전 // rotate(14deg) 14도회전

skewX(x) x축기울임
skewY(y) y축기울임


[3d변환함수]
rotateX(x) 회전x축 *perspective 랑 같이 써야함
rotateY(y) 회전x축  *perspective 랑 같이 써야함

perspective(n) 원근(거리) 바라보는위치 *transfrom맨앞에 작성

perspective 원근법 기준 위치
perspective: 600px; 관찰대상의 부모 (선호)
transform: perspective(600px); 관찰대상자체

backface-visibility 뒷면 숨김 여부 (rotate로 회전시켰을때 뒷면)
visible 기본값 뒷면보임
hidden 뒷면 숨김

─────────────────────────────────────────────────────

[오버워치 만들면서 Feedback]
1. width를 잡았을때 페이지를 줄이면 요소가 잘려나가거나 덮어질때 max-width로 주어서 최대 가로 밑으로는 자유자재로 크기를 줄였다 폈다한다.

2. hover나 가상클래스를 사용하면 변화시 transform같은 값들이 기존 설정 값에서 변화한 값으로 다시 설정되므로 확인이 다시 필요하다.

3. 요소가 곂쳤을때 margin으로 공간을 줄수도 있지만 쌓임요소순위에 의한 z-index를 기본값인 0 이상으로 주어도 된다.

4. 백그라운드 이미지의 위치는 포지션으로 이동시키지 않고 transform: translate(px)로 가능하며 skewX(~deg)를 활용해 기존에 기울어짐에 +-를하여 0으로 만들어주면 다시 이미지가 기울어지지 않는다.

5. 백그라운드 이미지 포지션을 센터로 주어 가운데 맞출수있으며 굳이 포지션을 X,Y값으로 이동시킬 필요가 없다.

6. 클래스 작성을 할때 동일한 값이 반복되는것만 한 클래스에 모아쓰고 다른값들이 들어가는것은 개별적으로 클래스를 생성한다.

7. 100vh란 뷰포트의 100%가 세로길이가 된다.