(1) header 부분 html, css, js
일단 헤더부분만 완성.. !!
[ HTML ]
오픈 그래프(The Open Graph protocol)
웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정합니다.
==> 카드 형식으로 미리보기 할 수 있는 부분
<meta property="og:type" content="website" />
og: open graph 의 약어
discription : 사이트 소개는 너무 길지않게 줄여쓰는것이 좋다.
글자를 표시하는 요소는 baseline 이라는 특정한 공간이 초과되어있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starbuck Coffe Korea</title>
<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" />
<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" />
<link rel="icon" href="./favicon.png"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="stylesheet" href="./css/main.css"/>
<script defer src="./js/main.js"></script>
</head>
<body>
<!--header -->
<header>
<div class="inner">
<a href="/" class="logo">
<img src="./images/starbucks_logo.png" alt="STARBUCKS">
</a>
<div class="sub-menu">
<ul class="menu">
<li>
<a href="/signin">Sign In</a>
</li>
<li>
<!-- javascript를 통해서 기능을 void로 동작 시킬것이다. -->
<a href="javascript:void(0)">My Starbucks</a>
</li>
<li>
<!-- javascript를 통해서 기능을 void로 동작 시킬것이다. -->
<a href="javascript:void(0)">Customer Service & Ideas</a>
</li>
<li>
<!-- javascript를 통해서 기능을 void로 동작 시킬것이다. -->
<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>
</div>
</header>
</body>
</html>
[ CSS ]
CSS를 편하게 작성하기 위해서는 사용하지않더라도 선택자를 먼저 나열한 후
코드를 작성하자!!
/* common( 공통적으로 영향을 미치는 css style) */
body{
color: #333;
font-size: 16px;
font-weight: 400;
/* 줄 높이 */
line-height: 1.4;
font-family: 'Nanum Gothic', sans-serif;
}
/* img 블럭요소로 처리 */
img{
display: block;
}
a {
text-decoration: none;
}
/* header */
header{
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
}
header .inner{
position: relative;
width: 1100px;
height: 120px;
margin: 0 auto;
}
header .logo{
height: 75px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
header .sub-menu{
display: flex;
position: absolute;
top: 10px;
right: 0;
display: flex;
}
header .sub-menu ul.menu{
/* sub-menu 수평 정렬 (flex) */
display: flex;
/* 전체 글꼴 설정했지만 해당 태그만 따로 글꼴 설정 */
font-family: Arial;
}
header .sub-menu ul.menu li{
position: relative;
}
header .sub-menu ul.menu li::before{
/* sub-menu 구분선 :: 가상선택자 이용 */
content: "";
display: block;
width: 1px;
height: 12px;
background-color: #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
header .sub-menu ul.menu li:first-child:before{
/* :: 가상선택자의 첫번째 선택자 안보이게 */
display: none;
}
header .sub-menu ul.menu li a {
font-size: 12px;
padding: 11px 16px;
display: block;
color: #656565;
}
header .sub-menu ul.menu li a:hover {
/* 마우스 올렸을때 글자 색상 블랙 */
color: #000;
}
header .sub-menu .search {
height: 34px;
position: relative;
}
header .sub-menu .search input{
width: 36px;
height: 34px;
padding: 4px 10px;
border: 1px solid #ccc;
box-sizing: border-box;
border-redius: 5px;
outline: none;
background-color: #fff;
color: #777;
/* 가로너비만 전환효과*/
font-size: 12px;
transition: width .4s;
}
header .sub-menu .search input:focus{
width: 190px;
border-color: #669900;
}
header .sub-menu .search .material-icons{
height: 24px;
position: absolute;
top: 0;
bottom: 0;
/* 돋보기 오른쪽으로 가버림 */
right: 5px;
margin: auto;
transition: .4s;
}
/* 포커스가 된 상태에는 아이콘을 안보이게하겠다. */
header .sub-menu .search.focused .material-icons {
opacity: 0;
}
[ javascript ]
event 1) 헤더 부분 검색창을 입력할때만 열기
event 2) 입력창에 placeholder로 통합검색 넣기
돋보기 가리기는 css 쪽 opacity 가 안먹힘.. 어디서 뭐가 잘못됐는지 찾아봐야겠다
const searchEl = document.querySelector('.search');
// 찾아놓은 searchEl 에서 input을 찾겠다는 변수를 선언
const searchInputEl = searchEl.querySelector('input');
// 돋보기 클릭했을때 input focus 설정
searchEl.addEventListener('click',function(){
//Logic
searchInputEl.focus();
});
// focus가 됐을때 함수가 실행되게 설정 (핸들러)
searchInputEl.addEventListener('focus',function(){
searchInputEl.classList.add('focused');
// 속성 지정
searchInputEl.setAttribute('placeholder','통합검색');
});
// input요소에 focus가 해제되면 제거
searchInputEl.addEventListener('blur',function(){
searchInputEl.classList.remove('focused');
// 속성 지정
searchInputEl.setAttribute('placeholder','');
});
'공부 > javascript' 카테고리의 다른 글
| 2022.02.15 - 약관동의 체크 버튼 비활성화/활성화 (+에러 Error) Cannot read properties of null 해결 (0) | 2022.02.15 |
|---|---|
| 2022.02.12 - 약관동의 js, jquery (0) | 2022.02.12 |
| 2022.01.29 - javascript (1) (0) | 2022.01.29 |
| 2022.01.15 - 바닐라javascript - 실습예제 TODO list (0) | 2022.01.15 |
| 2022.01.12 - 바닐라javascript - 반복문, OOP, DOM (0) | 2022.01.13 |
