[패스트캠퍼스] 프론트엔드 강의 학습후기 3주차

3주차 강의도 수강완료

패스트캠퍼스 프론트엔드 강의의 완성 포트폴리오인 스타벅스 페이지의 
헤더 부분 작업 내용을 담고있었다!

너무 오랜만에 새 페이지 작업을 한거라 감회가 새로웠고..
패캠 선생님의 코딩을 통해 새롭게 알게 된 내용을 정리하려고 한다!

< 3주차 강의 내용의 완성본 >

오픈그래프

• 웹페이지가 소셜 미디어(메신저)에 공유될 때 우선적으로 활용되는 정보 지정
• meta property로 설정
• description이 너무 길면 카카오톡 같은 곳에서 이상한 사이트로 인식할 수 있음

<meta property="og:type" content=""/> <!-- 페이지의 유형 -->
<meta property="og:site_name" content=""/> <!-- 속한 사이트의 이름-->
<meta property="og:title" content=""/> <!-- 페이지의 이름(제목) -->
<meta property="og:description" content=""/> <!-- 페이지의 간단한 설명 -->
<meta property="og:image" content=""/> <!-- 페이지의 대표 이미지 주소 (url) -->
<meta property="og:url" content=""/> <!-- 페이지 주소(url) -->

트위터카드

• 웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보 지정

<meta property="twitter:card" content=""/>
<meta property="twitter:site" content="" />
<meta property="twitter:title" content=""/>
<meta property="twitter:description" content=""/>
<meta property="twitter:image" content=""/>
<meta property="twitter:url" content=""/>

기본 아이콘

• google material icons 에서 가져오기
• 아이콘 크기를 늘리려면 font-size 를 키워야함

로고 가운데 배치

• margin: auto
  • 마진이라는 외부 여백을 브라우저가 자동으로 계산함
  • 요소의 너비값을 명시하게 되면 속성들을 이용하여 가운데에 배치가 됨

a 태그

• a href="/"
  • 현재의 index 파일로 이동하겠다 라는 뜻의 /

• a href="javascript:void(0)"
  • void : 아무것도 없다
  • 자바스크립트로 아무 기능이 없겠다는 뜻으로 명시
  • 링크가 들어갈 자리지만 아직 링크가 생성되지 않아 임시적으로 요소를 관리할때 쓰인다

BEM

• html 에서 class 속성의 작명법
  : 구체적, 직관적으로 알아볼 수 있도록 이름을 지정하는 방식

• 요소__일부분
  • Lodash 기호로 요소의 일부분을 표시
  • ex) item > item__name
  • 아이템이라는 요소의 일부분이라는 것을 알 수 있음

• 요소--상태
  • dash 기호로 요소의 상태를 표시
  • ex) btn btn--primary
  • 버튼이 있고 그 버튼의 상태가 primary 인 것을 알 수 있음

오픈소스

• gsap
  • lodash cdn
  • gsap.to(요소, 지속시간, {옵션})
  • _.throttle(함수, 함수가 실행될 시간)
  • 스크롤 이벤트를 넣을 때 많이 사용됨

    window.addEventListener('scroll', _.throttle(function(){
    if(window.scrollY > 500){
    /*
    	window 객체 : 브라우저의 탭 (우리가 보고있는 화면 자체)
    */
     gsap.to(example, .6, {
       opacity: 0,
       display: 'none'
     });
    } else {
     gsap.to(example, .6, {
       opacity: 1,
       display: 'block'
     });
    }
    }, 300));

querySelector

• document.querySelector 에서 document 는 속성을 의미함
• const example = document.querySelector('div');
  const exampleEl = example.querySelector('input');
  이라 기재할 경우 div 태그 안에 있는 input 태그가 선택 됨