header .inner {
/* 가로 너비 */
width: 1100px;
/* 세로 너비 */
height: 120px;
/* 외부 여백, 가운데 정렬 효과 */
margin: 0 auto;
position: relative;
}
header .logo {
/* 결과적으로 header 영역 가운데에 수직으로 배치 */
height: 75px;
/* 부모 요소를 기준으로 로고를 배치 */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/*
- 가운데 수직 정렬 방법
- 부모 요소에 기준점(position: relative) 존재
- position: absolute 선언
- height(높이값),top과 bottom(기준값), margin(auto)
- 가운데 수평 정렬도 같은 방법(height 대신 width 사용)
*/
서브 메뉴 제작 및 배치
<!-- 서브 메뉴 제작 -->
<div class="sub-menu">
<ul class="menu">
<li>
<a href="/signin">Sign In</a>
</li>
<li>
<a href="#">My Starbucks</a>
</li>
<li>
<a href="javascript:void(0)">Customer Service & Ideas</a>
</li>
<li>
<a href="javascript:void(0)">Find a Store</a>
</li>
</ul>
<div class="search">
<input type="text" />
<div class="material-icons">search</div>
</div>
</div>
<!--
# (URL 해시(Hash) 기호) - CSS ID 선택자를 이용해 페이지 내 특정 위치로 이동할 수 있다
javascript:void(0) - 링크 이동 없음
-->
// 클래스가 search 요소를 찾아서 변수(searchEl)에 저장
const searchEl = document.querySelector('.search');
// search 안에 있는 input 요소를 찾아서 변수(searchInputEl)에 저장
const searchInputEl = searchEl.querySelector('input');
// searchEl(클래스가 search 요소)가 클릭되면 동작
searchEl.addEventListener('click', function () {
// searchInputEl(search 안에 있는 input) focus
searchInputEl.focus();
});
// searchInputEl이 focus 되면 동작
searchInputEl.addEventListener('focus', function () {
searchEl.classList.add('focused');
// html 속성 추가, 힌트(placeholder)
searchInputEl.setAttribute('placeholder', '통합검색');
});
// focus가 해제되면 동작
searchInputEl.addEventListener('blur', function () {
searchEl.classList.remove('focused');
searchInputEl.setAttribute('placeholder', '');
});
메인 메뉴 제작 및 배치
<!-- 메인 메뉴 제작 -->
<ul class="main-menu">
<li class="item">
<div class="item__name">COFFEE</div>
<div class="item__contents">
<div class="contents__menu">
<ul class="inner">
<li>
<h4>커피</h4>
<ul>
<li>스타벅스 원두</li>
<li>스타벅스 비아</li>
<li>스타벅스 오리가미</li>
</ul>
</li>
<li>
<h4>에스프레소 음료</h4>
<ul>
<li>도피오</li>
<li>에스프레소 마키아또</li>
<li>아메리카노</li>
<li>마키아또</li>
<li>카푸치노</li>
<li>라떼</li>
<li>모카</li>
<li>리스트레또 비안코</li>
</ul>
</li>
<li>
<h4>커피 이야기</h4>
<ul>
<li>스타벅스 로스트 스팩트럼</li>
<li>최상의 아라비카 원두</li>
<li>한 잔의 커피가 완성되기까지</li>
<li>클로버® 커피 추출 시스템</li>
</ul>
</li>
<li>
<h4>최상의 커피를 즐기는 법</h4>
<ul>
<li>커피 프레스</li>
<li>푸어 오버</li>
<li>아이스 푸어 오버</li>
<li>커피 메이커</li>
<li>리저브를 매장에서 다양하게 즐기는 법</li>
</ul>
</li>
</ul>
</div>
<div class="contents__texture">
<div class="inner">
<h4>나와 어울리는 커피 찾기</h4>
<p>스타벅스가 여러분에게 어울리는 커피를 찾아드립니다.</p>
<h4>최상의 커피를 즐기는 법</h4>
<p>여러가지 방법을 통해 다양한 풍미의 커피를 즐겨보세요.</p>
</div>
</div>
</div>
</li>
</ul>
<!--
-HTML 클래스 속성의 작명법-
BEM (Block Element Modifier)
요소__일부분 - Underscore(Lodash) 기호로 요소의 일부분을 표시
요소--상태 - Hyphen(Dash) 기호로 요소의 상태를 표시
-->
