2021-07-10~14 Part(1)_ch(10)_(1~10)

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

카카오톡

<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로 정해진다.