4주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2

DOM API

Document Object Model, Application Programming Interface

JS로 HTML 제어할때 사용하는 여러가지 명령들

//HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector(".box");

//HTML 요소에 적용할 수 있는 메소드
boxEl.addEventListener();

//인수(Arguments)를 추가 가능
boxEl.addEventListener(1, 2);

//1 - 이벤트(Event, 상황)
boxEl.addEventListener("click", 2);

//2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener("click", function () {
  console.log("Click");
});

//요소의 클래스 정보 객체 활용
boxEl.classList.add("active");
let isContains = boxEl.classList.contains("active");
console.log(isContains);	//true

boxEl.classList.remove("active");
isContains = boxEl.classList.contains("active");
console.log(isContains);	//false

//HTML 요소 모두 검색/찾기
const boxEls = document.querySelectorAll(".box");
console.log(boxEls);

//찾는 요소를 반복해서 함수 실행
//익명 함수를 인수로 추가
boxEls.forEach(function () {});

//첫 번째 매개변수(boxEl): 반복 중인 요소
//두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});

//출력
boxEls.forEach(function (boxEl, index) {
  boxEl.classList.add(`order-${index + 1}`);
  console.log(index, boxEl);
});

//Getter, 값을 얻는 용도
console.log(boxEl.textContent); //Box

//Setter, 값을 지정하는 용도
boxEl.textContent = "H.E";
console.log(boxEl.textContent); //H.E

---

메소드 체이닝

JS의 메소드를 마치 체인처럼 연결해서 쓸 수 있음

const a = "Hello";
const b = a.split("").reverse().join(""); //메소드 체이닝

console.log(a); //Hello
console.log(b); //olleH

---

오픈 그래프(The Open Graph protocol)

웹페이지가 소셜 미디어(페이스 북 등)으로 공유될때 우선적으로 활용되는 정보를 지정

오픈 그래프 속성들: https://ogp.me/

Open Graph protocol

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

---

트위터 카드(twitter cards)

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

트위터 카드: https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

Getting started with Cards

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

---

BEM(Block Element Modifier)

HTML 클래스 속성의 작명법

• 요소__일부분: Underscore(Lodash) 기호로 요소의 일부분을 표시
• 요소--상태: Hyphen(Dash) 기호로 요소의 상태를 표시

<div class="container">
  <div class="name"></div>
  <div class="item">
    <div class="name"></div>
  </div>
</div>

<!-- 변경 후 -->
<div class="container">
  <div class="container__name"></div>
  <div class="item">
    <div class="item__name"></div>
  </div>
</div>
<!-- ------------------------------------------------------- -->
<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>

<!-- 변경 후 -->
<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div>