☕️ JS 스타벅스 페이지 클론 코딩 #오픈 그래프, 구글 폰트, 드롭다운

해당 글은 스타벅스 페이지를 클론 코딩 하면서 필요한 기능들을 정리한 내용입니다.

🍪 css 스타일 초기화

구글에 reset.css cdn 검색 후 jsdelivr 사이트 클릭! 아래에 있는 reset.min.css 파일을 Copy HTML 해준다음 헤드 부분에 링크 태그를 삽입해주면 됩니다.

🍪 오픈 그래프 & 트위터 카드

웹 페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정하여 HTML 헤드 부분에 내용을 추가해줍니다.

⬇️ 트위터 카드 ⬇️

오픈 그래프 속성 참고 자료 - https://ogp.me/
트위터 카드 속성 참고 자료 - https://bit.ly/3Gk9diB

🍪 구글 폰트 설정

google fonts 사이트에서 nanum 폰트 검색! 원하는 폰트 두께를 Select 후 오른쪽 상단에 Selected families 확인합니다. Use on the web 부분에서 링크 태그를 복사하여 HTML 헤드 부분에 추가해줍니다.

다음으로 링크 태그 밑에있는 CSS rules to specify families 부분의 폰트 패밀리 속성을 복사하여 css 파일 body 부분에 추가합니다.

폰트를 사용할때에는 라이센스를 꼭 확인하고 사용해주는 것이 좋습니다.

🍪 폰트 어썸 아이콘 & 구글 아이콘

폰트 어썸에서는 kits 에서 Your Kits에서 스크립트 태그를 복사 후 헤드 부분에 붙여넣기 해줍니다. icons 에서 원하는 아이콘 검색 후 태그를 복사해서 HTML 파일 원하는 위치에 붙여넣기 해줍니다. pro라고 붙어있는 아이콘은 유료입니다.

google fonts 사이트 안에 있는 icons 탭에서 원하는 아이콘 선택후 링크 태그는 HTML 파일 헤드 부분에 아이콘 태그는 원하는 위치의 body부분 안에 붙여넣기 해줍니다. 아이콘은 폰트 사이즈로 크기 조절이 가능합니다.

🍪 헤더와 드롭다운 메뉴

🥨 메인 페이지로 이동

• a태그 하이퍼링크에 ' / '만 입력해도 로고 클릭 시 메인페이지로 이동합니다.

<a href="/">
  <img src="./images/starbucks_logo.png" alt="STARBUCKS" />
</a>

🥨 img 태그

• img 태그는 인라인 요소! 인라인 요소는 가로, 세로값을 가질 수 없고 margin과 padding의 위아래 값을 가질 수 없습니다. 인라인 요소는 글자를 다루는 용도입니다. baseline 이라는 하단에 약간의 공간을 가지고 있습니다. 따라서 css파일 맨 위에서 img { display : block;} 요소를 추가해 초기화 시켜줍니다.

🥨 수직, 수평 가운데 정렬

• div 수평 가운데 정렬 : { width: 1100px; margin: 0 auto; }
• 수평 가운데 정렬 : 부모 요소에 { position: relative; } 자식 요소에 { position: absolute; width: 100px; left: 0; right: 0; margin: 0 auto; }
• 수직 가운데 정렬 : 부모 요소에 { position: relative; } 자식 요소에 { position: absolute; heigth: 100px top: 0; bottom: 0; margin: auto 0; }

🥨 페이지 이동

• 페이지를 이동시키기 위해 절대경로(/)뒤에 정확한 주소를 입력해줍니다.
• 아직 주소가 정해져 있지 않는 경우에는 해시(#)를 사용하거나 자바스크립트 내용으로 임시적으로 요소를 관리해줄 수 있습니다.

<!-- href 안에 연결될 페이지의 정확한 주소(signin)를 입력 -->
<a href="/signin">Sign In</a> 

<!-- 연결될 주소가 준비되어 있지 않다면 해시(#)를 사용 -->
<a href="#"></a>
<!-- 연결될 주소가 준비되어 있지 않다면 자바스크립트 보이드 속성 사용 -->
<a href="javascript:void(0)"></a>

🥨 클릭영역 넓히기

• a태그는 인라인 요소로 display: bolck; 값을 추가해준 뒤 padding 위아래, 좌우 영역 값을 넣어줌으로 클릭 영역을 넓혀 줄 수 있습니다.

🥨 가상요소 선택자 ::before 활용

• 가상요소 선택자를 이용하여 하나의 구분선을 만들어 줄 수 있습니다. 가상요소 선택자는 인라인 요소입니다.

header .sub-menu ul.menu li {
  position: relative;
}

/* 아래의 내용에 display: block; 값이 원래는 필요하지만 
position: absolute; 값에 의해 블럭 요소로 전환됩니다. */
header .sub-menu ul.menu li::before {
  content: "";
  width: 1px;
  height: 12px;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* 맨앞에 있는 요소에는 안보이도록 처리 */
header .sub-menu ul.menu li:first-child::before {
  display: none;
}

🥨 input 태그

• input 태그를 넣고 화면에서 클릭해보면 기본적으로 바깥으로 파란색 라인이 생기는것을 볼 수 있습니다. 이때 파란색 선을 사용하고 싶지 않다면 css 속성에 outline: none; 을 입력해 주시면 됩니다.

• 아래 코드는 검색 input 클릭 시, 크기 변환 css 적용하는 내용입니다.

/* transition 속성을 사용하여 너비갑과 0.4초 값을 지정해 
자연 스럽게 바뀔 수 있도록 설정해 줍니다.*/
header .sub-menu .search input {
  width: 36px;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px;
  outline: none;
  background-color: #fff;
  color: #777;
  font-size: 12px;
  transition: width .4s;
}

/* focus를 사용하여 너비를 길게 바꿔주고 테두리 색을 변환시켜 줍니다 */
header .sub-menu .search input:focus {
  width: 190px;
  border-color: #669900;
}

🥨 JS focus, blur 적용

const searchEl = document.querySelector('.search'); // div 태그 선택
const searchInputEl = searchEl.querySelector('input');
// search div 안에 있는 input 태그 선택

// search div 클릭했을 때 
searchEl.addEventListener('click', function () {
  searchInputEl.focus(); // input 태그에도 포커스 효과 추가
});

// input 태그가 포커스 됐을 때
searchInputEl.addEventListener('focus', function () {
  searchEl.classList.add('focused'); // 돋보기 모양 가려주는 클래스 추가
  searchInputEl.setAttribute('placeholder', '통합검색');
  // placeholder 값 생성
});

// input 태그가 포커스 해제됐을때 blur 사용
searchInputEl.addEventListener('blur', function () {
  searchEl.classList.remove('focused'); // 돋보기 모양 다시 나타나도록 설정
  searchInputEl.setAttribute('placeholder', '');
  // placeholder 값 '' 빈문자열로 설정
});

🥨 드롭다운

• 최상위 감싸주는 태그에 z-index 속성의 값을 1로 적용해 맨위에 노출될 수 있도록 합니다.
• 각각의 카테고리 내용이 나타날 수 있도록 hover의 위치를 하위 카테고리를 감싸고 있는 상위 카테고리에 적용시켜 줍니다.

/* z-index 속성 추가 */
header .main-menu {
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

/* hover 위치 학인! */
header .main-menu .item:hover .item__name {
  background-color: #2c2a29;
  color: #669900;
  border-radius: 6px 6px 0 0;
}

/* hover 위치 학인! */
header .main-menu .item:hover .item__contents {
  display: block;
}

🥨 백그라운드 이미지 삽입

• 백그라운드에 이미지를 적용하고 싶은 경우 background-image 속성에 url을 삽입하여 사용합니다.

/* background-image 기본 값은 repeat으로 이미지가 연속되어 나타납니다. */
header .main-menu .item .item__contents .contents__texture {
  padding: 26px 0;
  font-size: 12px;
  background-image: url("../images/main_menu_pattern.jpg");
}

BEM? HTML 클래스 속성의 작명법
요소__일부분 : 언더바를 두번 작성하면 요소의 일부분을 나타냅니다.
요소--상태 : 하이픈을 두번 작성하면 요소의 상태를 표시합니다.