FRONT-END

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

카카오톡

<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%가 세로길이가 된다.