HTMl/CSS/JS - 스타벅스 예제(1)

패스트캠퍼스 프론트엔드 초격차패키지의 스타벅스 예제 강의를 수강하면서 새롭게 배운것들을 정리해보았다.

목차

1. 스타일 초기화, 파비콘
2. 오픈그래프와 트위터카드
3. Google Fonts
4. 헤더메뉴와 드롭다운 메뉴
5. 자동정렬
6. 이동할 페이지가 아직 없는 경우
7. 요소 재사용
8. 자바스크립트 이벤트 추가
9. cursor 속성
10. BEM(Block Element Modifier)

---

1. 스타일 초기화, 파비콘

스타일 초기화

앞서 배웠듯이 구글에 ‘reset.css cdn’을 치고 나온 사이트에서 html코드를 복사해와 head태그내에 붙여준다.

브라우저의 기본 스타일이 초기화된다.

파비콘 적용

favicon.ico 파일이 index.html파일과 같은 경로, 즉 루트 경로에 있으면 자동으로 적용되지만 안될경우에 link태그를 통해 직접 지정할 수 있다.

<link rel="icon" href="./favicon.png"/>

2. 오픈그래프와 트위터 카드

오픈그래프(The Open Graph Protocol)

웹페이지가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보를 말한다.

<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="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<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)

트위터 카드(Twitter Cards)

웹페이지가 트위터로 공유될 때 우선적으로 활용되는 정보를 말한다.

<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="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<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)

SEO(검색 엔진 최적화, Search Engine Optimization)

구글이나 네이버 등에 자신의 웹 사이트/페이지를 노출할 수 있도록 정보를 최적화하는 작업을 말한다.

3. Google Fonts

Google Fonts

구글에 “Google Fonts”를 검색하고 들어간 사이트에서 원하는 폰트를 고르고 select 버튼을 누르게 될경우 고른 폰트들을 사용할 수 있게 해주는 link 태그와 css 문법을 제공해준다.

폰트 주의점

폰트는 저작권에 예민한 요소이기 때문에 유료 폰트를 사용하게 될경우 주의해서 사용해야 한다.

Google Material Icons

구글에 “Google Material Icons”를 검색하고 들어간 사이트에서 원하는 아이콘을 클릭하고 link태그를 복사해서 적용하면 된다. 또한 적용할 수 있는 예시 Html코드도 복사해갈 수 있다.(요소에 작성한 텍스트값마다 다른 아이콘이 적용된다)

이 아이콘은 ‘font-size’속성을 이용해서 크기를 조절할 수 있다.

4. 헤더메뉴와 드롭다운 메뉴

로고

<header>
  <div class="inner">
    <a href="javascript:void(0)" class="logo">
      <img src="./images/starbucks_logo.png" alt="STARBUCKS" />
    </a>
  </div>
</header>

위의 html 코드대로 작성할경우 헤더영역에 나타낸 로고의 밑부분에 작은 공간이 생기게 된다.

img 태그는 기본적으로 ‘인라인 요소’이기 때문에 글자를 다루는 요소로 취급된다.

영어의 ‘y’, ‘j’, ‘p’ 등과 같이 줄 밑으로 넘어가는 글자의 경우 baseline이 생기는데 위에서의 공간이 그 영역에 해당된다.

img {
	display: block;
}

이를 해결하기 위해 display 속성의 값으로 block을 할당해 블록요소로 사용하겠다고 선언해주면 불필요한 공간을 없애줄 수 있다.

5. 자동정렬

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

.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;
}

위의 코드는 item 클래스의 영역을 container 클래스의 수직을 기준으로 가운데로 정렬한 코드이다.

가운데정렬이 가능한 이유는 item의 position속성을 absolute로 주고, container의 position속성을 relative로 지정해 구조상 item의 부모요소임을 나타냈다. 그리고 top, bottom을 이용해서 위아래의 기준점을 정해주고 margin속성을 이용해서 상하는 auto, 좌우는 0을 이용해 지정한 top, bottom의 위치를 기준으로 위아래 여백을 자동으로 계산해 가운데 정렬되도록 했다. 그러나 위아래 auto 값을 이용하려면 요소의 height 속성으로 높이를 지정해줘야 계산해줄 수 있다.

left: 0;
right: 0;
margin: auto;

위 코드에서 수평으로 가운데 정렬까지 하고 싶다면 위와 같이 left, right 속성으로 좌우의 기준점을 지정해주고 margin 속성의 값을 auto 로 지정해줌으로써 상하좌우 모두 자동 계산하게끔 해주면 수평으로 가운데 정렬까지 할 수 있다.(width 속성을 지정되어 있는 상태이므로 auto 값을 사용해 좌우의 여백을 자동계산할 수 있다)

6. 이동할 페이지가 아직 없는 경우

<a href="#"></a>
<a href="javascript:void(0)"></a>

• # : ‘해시’를 이용해서 값을 비워둘 수 있다.
• javascript:void(0) : 해당 코드를 이용해서 값을 비워둘 수 있다. (권장)

7. 요소 재사용(요소를 이용해 요소 찾기)

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

위의 코드에서 input 태그를 선택해서 자바스크립트로 변화를 주고 싶을 경우

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

위와 같이 document.querySelector(’.search input’) 을 이용해서 선택해도 되지만 위에 이미 search클래스를 찾아 변수에 담은 상태이다. 따라서 해당 변수를 이용해서 하위의 요소를 검색할 수도 있다.

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

위의 코드처럼 찾아놓은 searchEl에서 querySelector() 함수를 사용하고 선택자로 ‘input’을 지정해서 선택할 수 있다.

8. 자바스크립트 이벤트 추가

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

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

// .search 영역을 클릭할경우 input요소가 포커스된다
searchEl.addEventListener('click', function() {
  searchInputEl.focus();  // 포커스를 강제적용한다.
});

현재 search 클래스를 갖고 있는 div 요소안에 input태그가 들어가 있는 상태이다. 따라서 div요소의 영역을 클릭할경우 input요소가 focus되게끔 하고 싶다. 위의 코드처럼 addEventListener() 함수를 사용해서 이벤트를 ‘click’으로 지정해주고 선택될시 실행될 함수의 로직으로 focus() 함수를 사용하면 만들 수 있다.

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

input 요소가 focus될경우 search클래스를 갖고 있는 div요소의 클래스에 ‘focused’를 추가하고 싶을 경우 똑같이 addEventListener()를 이용해서 이벤트를 ‘focus’를 선택하고 해당 이벤트가 발생될경우 실행될 함수의 로직에 classList.add(’focused’) 를 사용해서 클래스를 추가할 수 있다. 또한, input 요소에 placeholder 속성을 포커스될 경우에 추가해주고 싶기 때문에 setAttribute() 함수를 이용해서 속성명과 속성값을 지정해줘 값을 동적으로 추가할 수 있다.

9. cursor 속성

cursor: pointer;

css 스타일로 cursor 속성을 ‘pointer’로 지정해주면 마우스 포인터를 선택 포인터로 바꿔준다.

10. 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>

위와 같은 코드가 있을 때 css 선택자로 ‘.container .name’과 같이 지정했을 때 2개의 요소가 모두 선택되게 된다.

<div class="container">
	<div class="container__name"></div>
	<div class="item">
		<div class="item__name"></div>
	</div>
</div>

위와 같이 container의 자식요소는 ‘container_name’, item의 자식 요소는 ‘item__name’으로 BEM을 사용해각각 container의 일부분, item의 일부분임을 나타내고 동시에 중복을 피할 수 있다.

<!--btn은 버튼을 나타내고 뒤의 키워드는 버튼의 상태를 명시한다-->
<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>

위와 같이 작성할경우 버튼과 상태가 묶여있다는 느낌이 거의 들지 않는다.

<div class="btn--primary"></div>
<div class="btn--success"></div>
<div class="btn--error"></div>

위처럼 ‘—’ 하이픈을 이용해 BEM을 사용함으로써 상태를 명시할 수 있다.