20210527 StarbucksClone01 : 오픈 그래프, fonts, Icons, 헤더 만들기( absolute를 활용한 정렬), 서브 메뉴(구분선, a태그 임시 href, JS로 요소 강제 focus 시키기, classList, setAttribute, 이벤트 함수로 CSS 제어)

Starbucks Clone01

기본 환경 만들기

• 사용할 images 따오기 (favicon 포함)
• HTML 파일 만들기
  • html lang 속성 ko
  • title 변경
  • favicon 연결 하기
    • link 태그의 rel icon
  • css reset 연결하기
  • css 연결하기
• CSS 파일 만들기

오픈 그래프 (The Open Graph protocol)

• 웹페이지가 소셜 미디어 등으로 공유 될때 우선적으로 활용되는 정보를 지정(공유시 북마크 미리보기 같은 느낌)
• 검색엔진에게 제공하는 정보 (SEO)
• 오픈 그래프 작성하기
  • html meta 태그의 property 속성 값으로 "og:속성값 과 content 속성 값을 쌍으로 지정하여 작성함
  • <meta property="og:속성값" content="내용 또는 URL, 경로" />
    • og:type : 페이지의 유형 (website, video.movie)
    • og:site_name : 속한 사이트의 이름
    • og:title : 페이지의 이름(제목)
    • og:description : 페이지 최대한 간단한 설명
    • og:image : 페이지의 대표 이미지 주소 (URL)
    • og:url : 페이지 주소(URL)

트위터 카드(Twitter Cards)

• 트위터 소셜 미디어에서 제공하는 오픈 그래프
• 사용법은 똑같지만 og 대신 twitter 라는 키워드를 대체하여 넣고, type은 card라는 키워드를 넣는다.
• 예) <meta propert="twitter:card" content="summary" />
  • twitter:card : 페이지의 유형 (summary, player)
  • twitter:site_name : 속한 사이트의 이름
  • twitter:title : 페이지의 이름(제목)
  • twitter:description : 페이지 최대한 간단한 설명
  • twitter:image : 페이지의 대표 이미지 주소 (URL)
  • twitter:url : 페이지 주소(URL)

Google fonts

• 기본적으로 fontfamily를 지정하지 않으면 브라우저 마다 폰트가 다르게 나옴 (일치할 필요가 있음)
• site : Google fonts
• 폰트의 파일 크기가 생각보다 큰편이기 때문에 폰트를 남발하면 안되고 사이즈를 고려해 쓸것만 가져와 써야 한다.
  • Google fonts 에서 제공하는 해당 html link를 통해서 연결하고, 사용법도 복사해 붙여넣기 하여 body 태그에 사용한다.
• dev tool의 computed에서 font-family 적용 부분 확인
• 폰트 저작권에 걸리지 않게 무료, 상업적 사용 가능한 폰트를 사용하는 것을 주의! (라이센스 확인 주의!)

Google Material Icons

• site : Google Material Icons
• site : material design
• html과 연결
  • <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
• 구글의 경우 outlined는 연결에 문제가 있는 것 같고, filled의 icon들은 잘 반응 함
• 사용
  • 예) <span class="material-icons">login</span>
• 아이콘의 크기는 font-size를 통해서 변경 가능함 (결국, 글씨처럼 취급)

헤더 만들기

• 현재 만들 페이지의 헤더 구성은 헤더에 로고, 메인메뉴들, 서브메뉴들 이 있음
• 기본적으로 html에는 header라는 태그가 존재 (딱히 다른 기능이 있는 것은 아니고 알아보기 쉬움, 의미만 가지고 있음)
  • div 태그에 class 이름에 header라고 해도 상관은 없음

기본 CSS setting

• body 태그에 주로 처음에 사용하는 세팅으로
  • color : #333; (검정보다는 회색 아닌 검정으로 세련되게)
  • font-family : 원하는것;
  • font-size : 16px; (물론 원래 16px이지만, 명시를 통해 알려줌)
  • line-height : 1.4; (보통 이렇게 씀)
• img 태그의 경우 inline 요소라서 baseline 현상이 생김 (img를 어느 요소에 넣었을 때 밑에가 뜨는 현상)
  • display: block; 처리 하면 해결 됨

요소 중앙 정렬 (margin : 0 auto ;)

• (margin : 0 auto ;)
  • 헤더에서 정보가 들어가는 영역을 따로 지정하고 margin 좌우를 auto로 줌으로써
  • 정보 영역크기에 도달하기 전까지는 margin이 동등하게 줄어 계속 가운데 정렬을 유지하게 됨
  • 그리고 정보 영역보다 줄어드는 경우, 그때서야 정보영역이 줄어들게 하기 위해서
  • 결국엔 반응형 웹을 위해서 임

absolute를 활용한 수직 또는 수평 중앙 배치 (logo)

• 브라우저가 가운데를 연산하기 위해서 수직정렬을 위한 기준점이 필요하므로position: absolute, top:0, bottom:0을 통해서 부모의 높이를 참고하고,
• height의 값을 통해 현재 요소의 높이를 참고하여 세로 margin auto를 계산함
• 단 부모가 누군지 기준이 또 필요하기 때문에, 부모 요소에 position: relative가 필요함

.container {
  width: 400px;
  height: 250px;
  background-color: royalblue;
  position: relative;
}
.item {
  width: 100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

• 또한 부모의 높이를 참고하는 기준점을 left:0 , right: 0을 하고 margin: 0 auto 그리고 width 값 지정 -> 수평 중앙 배치
• left:0, right:0, top: 0, bottom: 0, margin: auto auto; , width, height 값 지정 -> 수평 수직 중앙 (센터) 배치

See the Pen PopKpoY by RaccoonCode96 (@raccooncode96) on CodePen.

서브 메뉴

• 서브 메뉴는 메뉴 이기 때문에 이동할 여러 메뉴로 구성되어 있으므로, ul, li, a 태그를 이용해서 만든다.
• a 태그는 inline 요소이며, 각 구조 배치는 li 태그를 이용해서 배치한다.
  • 해당 서브 메뉴의 a 태그의 경우 text-decoration을 통해서 underline을 제거하고, :hover 에 컬러를 배치해 변화를 준다.
• li 자체는 block 요소이기 때문에 ul 태그에 display: flex를 통해서 수평 배치를 만든다.
• 영어 폰트의 경우에는 Arial 폰트가 깔끔하다고 한다. (ul에 적용해준다.)

서브 메뉴 구분선

• 그리고 각 서브 메뉴를 구분하는 구분 선은 가상요소(::before)를 이용해서 바를 만들어 준다.
• 가상요소는 inline 요소 이기 때문에 width, height를 조정하기 위해서는 display: block으로 해준다.
  • 만약, position: absolute; 를 사용한다면 알아서 block으로 바뀌므로 display는 지워줘도 된다.
• 구분선중에 하나를 제거 할때는 가상요소를 붙이는 요소에 가상 클래스(:first-child)를 붙여 display: none을 통해서 안보이게 한다.

a 태그 임시 herf

• a 태그 사용시 href 에 들어 갈 url이 마땅히 없을 때 임시적으로 # 또는 javascript:void(0) 을 써주면 되겠다.
  • # 은 약간의 변화가 페이지에 발생할 수 있기 때문에 정말로 아무 일도 일어 나지 않는 javascript:void(0)을 추천 함

input 과 Search Icon

• Search Icon의 경우에는 input과 합쳐저서 사용자가 해당 요소에 focus를 띄우면 input이 넓어지는 것을 구현하고자 한다.

<div class="search">
  <input type="text" />
  <div class="material-icons">search</div>
</div>

• search 클래스 요소는 해당 기능을 나타내는 container 이고 안에는 input과 icon이 있다.
• 두 요소는 겹쳐 icon이 위로 올라오게 해야 하므로 icon에 absolute를 주어 search 클래스 요소에 잘 배치한다.
• input 요소는 기본적으로 focus가 되면 outline이 발생하므로 outline: none으로 없앤다.
• focus되면 늘어 날 수 있게 input:focus에 width 값을 변경하고 border-color를 변경하여 focus를 표시한다.
• focus에 따른 input width 전환에 transition을 준다.

Icon을 눌러 input focus 시키기

• 위에 처럼 하면 icon을 누르면 focus가 되지 않고, 조그마한 input 요소만 눌러야 focus가 된다.
• icon을 눌러도 focus를 시키기 위해서는 JS의 도움을 받아야 한다.
• 차라리 모두를 아우르는 search 클래스 요소를 누르면 반응하게 하고자 한다.

const searchEl = document.querySelector(".search");
const searchInputEl = searchEl.querySelector("input");

searchEl.addEventListener("click", function () {
  searchInputEl.focus();
});

searchInputEl.addEventListener("focus", function () {
  searchEl.classList.add("focused");
  searchInputEl.setAttribute("placeholder", "통합검색");
});

searchInputEl.addEventListener("blur", function () {
  searchEl.classList.remove("focused");
  searchInputEl.setAttribute("placeholder", "");
});

• input 자체를 focus하기 위해서 element를 js로 가져와야 하고, search 클래스 영역을 다루기 위해서 search 클래스 element도 가져와야 한다.
  • 그래서 searchEl에 이벤트 리스너를 달아 click 시에 searchInputEl이 focus를 강제하기 위해서 요소에 focus 함수를 사용한다.
• focus가 되었을 때 icon은 안보이고 input의 placeholder 속성을 발현 시키고자 한다.
  • 그래서 classList를 사용해서 focused 라는 클래스를 넣고 제거하여 focused 클래스 CSS에 담겨 있는 opacity (투명도)를 제어한다.
  • 또 setAttribute 라는 함수를 사용해서 요소의 특정 html 속성을 제어가능하다.
  • 그리하여 placeholder 값을 '통합검색', ''으로 제어하여 보였다 안보였하게 한다.

사용된 JS 기술 정리

• classList의 add , remove 함수를 사용하여 CSS 제어
• setAttribute 함수를 사용하여 html 요소의 특정 속성 제어
• 요소 자체에 들어 있는 이벤트 함수들을 통한 상태(CSS 가상클래스) 제어