front-end 국비과정 일차 11일차 학습일지 Starbucks Project(1)

1 스타벅스 Project 진행 

 

2 Project 진행하면서 유용한 팁

--- WEB Project 시작할 때 초기 설정에 유용한 내용 ---
오픈 그래프란? 
1 웹페이지가 sns로 공유될 때 우선적으로 활용되는 정보를 지정한다 
2 meta태그 안에 property로 속성을 명시하고 content로 해당 속성의 내용을 명시한다
ex)
<meta property="og:type" content="website">

오픈 그래프에 사용되는 속성들 
og:type = 페이지의 유형을 명시한다 ex) website, video, movie 등등
og:site_name = 사이트의 이름을 명시한다 
og:title = 페이지의 제목을 명시한다
og:description = 페이지의 간단한 설명을 명시한다
og:image = sns에 공유될 때 보이는 페이지의 대표 이미지의 주소(url)를 명시한다
og:url = 페이지 주소를 명시한다 

오픈 그래프는 작성시 되도록 link태그보다 위쪽에 작성해주는 것이 좋다 

seo(검색엔진 최적화)란? 브라우저에 웹사이트를 노출할 수 있도록 정보를 최적화하는 작업을 의미한다.
font-family를 외부에서 가져올 때에는 항상 라이센스를 제대로 확인해야 한다, google-font는 수많은 종류의 font를 제공하기 때문에 유용하다
icon이 inline요소라면 font-size를 이용해 크기 조정을 하는 것이 좋다 
google material icons를 이용하면 수많은 무료 아이콘을 이용 할 수 있다. 이때 link태그를 google material icons site에서 link태그를 이용해 아이콘을 사용에 대한 설정을 해야 한다 해당 내용을 site에 get start
부분 참조

#은 Hash라고 부른다

--- Project 진행 하면서 유용하다고 판단되는 내용 ---

1a태그의 경로를 명시할때 /라고 명시하면 해당 사이트 도메인 즉 메인 페이지로 이동 가능한 형태로 만들 수 있다

2 브라우저마다 제공되는 font-size가 다를 수 있기 때문에 body태그에 16px이라고 명시해주는 것도 좋은 방법이다 글자 관련 속성은 하위 요소에 상속된다는 점을 항상 숙지하자

3 img 태그는 inline 요소이기 때문에 baseline이 존재하기 때문에 img 하단에 여백이 생기는데 이때 img에 display를 block요소로 바꿔주면 해당 현상을 해결할 수 있다. 

4 css 작성 시 공통적으로 사용되는 부분이 있다면 COMMON이라는 주석을 작성하여 주석 아랫부분에  공통적으로 사용되는 속성들을 명시하면 가독성이 좋아진다 

5 position에 속성 값으로 absolute 사용 시 항상 위치상 부모 요소를 제대로 명시해서 사용해야 문제가 생기지 않는다 위치상 부모 요소는 relative로 작성하는 것이 안전하다

6 margin에 속성값으로 auto와 0을 이용해서 가운데로 요소를 몰아줄 수 있다. 이때 요소의 너비가 명시되어있어야 한다 

7 JS로 DOM을 다룰때 setAttribute 메서드를 사용하면 해당 요소에 속성 값을 설정할 수 있다 이때 1번 파라미터에는 속성을 명시하고 2번 파라미터에는 속성 값을 명시한다
ex)
searchInputEl.setAttribute('placeholder','통합검색')

8JS로 classlist에 add()메소드로 class를 추가했다면 css에서 해당 내용을 꾸밀 때에는 해당 요소의 class와 js로 추가된 class를 일치 선택자 즉 붙여 써줘야 한다

9 BEM이란? HTML class 속성의 작명법으로써 __(언더바*2) = 요소의 일부분을 명시하고 --(하이픈*2) = 요소의 상태를 명시한다

10 js에서 window란 브라우저에 창(개발자 등등이 위치한 tab)을 의미한다 

11 js에서 throttle()은 이벤트가 동작되는 시간을 ms단위로 지연시킨다 이때 throttle의 괄호 안에 1번파라미터에는 콜백 함수를 뜻하는 익명 함수와 실행 내용을 명시하고 2번째 파라미터에는 지연시간을 ms로 명시한다 이때 1 파라미터와 2 파라미터의 구분은 , 로 한다
ex)
window.addEventListener("mousemove", throttle(function() {
    dispThrottle.textContent = ++mouseThrottleCount
}, 500))

12 js에서 css의 속성을 다룰 수 있다 
ex)
badgeEl.style.display = 'none'
위코드는 badgeEl이라는 변수에 DOM을 이용해 요소의 class이름을 가져온 것이고. style은 css를 사용할게 라는 의미이다
. display 부분에는 css속성을 작성할 수 있고 'none' 부분에는 속성 값을 작성한다

13 padding의 설정값을 %로 설정할때 부모 요소의 너비 값이 하나이면 그 너비를 기준으로 padding을 설정한다  사이트에 유튜브 영상을 삽입할 때 16:9 비율로 삽입하고자 한다면  부모 요소에 width값만 명시하고
자식 요소에는 width 100% height 0 padding-top은 56.25%로 설정한다 
 ex)

14 가상요소 선택자는 display가 inline이므로 css로 레이아웃을 잡고자 하는 용도로 사용한다면 display를 block으로 만들어 줘야 함

15 youtube영상을 웹페이지에 삽입할때 iframe태그를 사용하는 방법 외에도 js iframe API를 이용해 삽입 가능하다 이 방법에 익숙해지자 
사용법과 관련해서 익숙하지않으므로 https://github.com/ParkYoungWoong/starbucks-vanilla-app 이 링크에 목차 YOUTUBE API에 있는 IFrame Player API링크와 플레이어 매개변수(playerVars) 링크를 참조하자

16 전환 효과 부여 시 자연스럽게 하기 위해선 hover에는 붙이지 말자