네비게이션 바 만들기

   <nav>
    <div class="inner">
      <h1>iPad</h1>
      <ul class="menu">
        <li class="active"><a href="javascript:void(0)">개요</a></li>
        <li><a href="javascript:void(0)">iPad를 선택하는 이유</a></li>
        <li><a href="javascript:void(0)">제품 사양</a></li>
      </ul>
      <button class="btn">구입하기</button>
    </div>
   </nav>

nav {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #D2D2D2;
  position: sticky;
  top: 0;
  z-index: 8;
}

nav .inner {
  max-width: 1000px;
  height: 52px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

nav h1 {
  flex-grow: 1;
  font-size: 22px;
  font-weight: 500;
}

nav .menu {
  display: flex;
  gap: 12px;
  margin-right: 18px;
}

nav .menu li a {
  display: block;
  font-size: 11px;
  padding: 6px;
}

nav .menu li:hover a {
  color: #0071E3
}

nav .menu li.active a {
  opacity: 0.5;
  cursor: default;
}

nav .menu li.active:hover a {
  color: #1D1D1D;
}

마우스 스크롤이 있을 경우 네비게이션 바가 항상 최상단에 위치하고 있어야 한다. 이를 위해서는 position: sticky;를 사용하면 된다. sticky를 사영하기 위해서는 top, bottom, left, right 중 1개를 지정해야하는데 해당 페이지에서는 항상 최상단에 위치해야함으로 top: 0;을 이용하게 된다.

또한 해당 네비게이션에 위치해있는 페이지 정보는 흐릿하게 나타내기 위해 backdrop-filter: blur(20px);를 사용한다. 이때 해당 네비게이션 배경의 투명도를 정해야하는데 이를 위해 background-color: rgba(255, 255, 255, 0.7);를 사용하게 된다.

현재 위치하고 있는 페이지 정보를 나타내기 위해 현재 위치한 페이지의 class를 class="active"로 지정하였다.

nav .menu li.active a {
  opacity: 0.5;
  cursor: default;
}

nav .menu li.active:hover a {
  color: #1D1D1D;
}

active를 포함하고 있는 스타일을 지정함으로써 현재 페이지 위치를 알 수 있도록 해준다.

검색 창 만들기

<div class="search-wrap">
        <div class="search">
          <div class="shadow"></div>
          <div class="textfield">
            <input type="text" placeholder="apple.com 검색">
            <div class="search-icon"></div>
            <div class="search-closer"></div>
          </div>
          <div class="autocompletes">
            <h3>빠른 링크</h3>
            <ul>
              <li><a href="javascript:void(0)">Apple Store Online에서 쇼핑하기</a></li>
              <li><a href="javascript:void(0)">Apple Visoin Pro</a></li>
              <li><a href="javascript:void(0)">Airpods</a></li>
              <li><a href="javascript:void(0)">Apple Intelligence</a></li>
              <li><a href="javascript:void(0)">Apple Trade In</a></li>
            </ul>
          </div>
        </div>
      </div>

header .search-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
}

header .search {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

header .search .shadow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

header .search .textfield {
  position: relative;
}

header .search input {
  width: 100%;
  height: 44px;
  padding: 0 40px;
  border: none;
  outline: none;
  box-sizing: border-box;
  background-color: transparent;
  font-size: 17px;
  color: #FFF;
}

header .search .search-icon  {
  width: 40px;
  height: 44px;
  background-image: url("../images/header_search.svg");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
}

header .search .search-closer {
  width: 40px;
  height: 44px;
  background-image: url("../images/header_close.svg");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.4;
  cursor: pointer;
}

header .search .search-closer:hover {
  opacity: 1;
}

header .search .autocompletes {
  width: 100%;
  padding: 26px 40px 20px;
  border-radius: 0 0 18px 18px;
  box-sizing: border-box;
  background-color: #FFF;
  position: absolute;
  top: 44px;
  left: 0;
}

header .search .autocompletes h3 {
  font-size: 12px;
  color: #6E6E6E;
  margin-bottom: 12px;
}

header .search .autocompletes ul li a {
  display: block;
  margin: 0 -14px;
  padding: 10px 0 10px 30px;
  font-size: 14px;
  cursor: pointer;
}

header .search .autocompletes ul li a:hover {
  background-color: #F5F5F5;
  font-weight: 500;
}

header .search input,
header .search .search-icon,
header .search .autocompletes h3,
header .search .autocompletes li {
  transition: 0.6s;
  transform: translate(100px, 0);
}

header.searching ul.menu > li {
  transform: scale(0.7);
  opacity: 0;
}

header.searching .search-wrap {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

header.searching .search input,
header.searching .search .search-icon,
header.searching .search .autocompletes h3,
header.searching .search .autocompletes li {
  transform: translate(0, 0);
  transition-delay: 0.2s;
}

const headerEl = document.querySelector('header')
const headerMenuEls = [...headerEl.querySelectorAll('ul.menu > li')]
const searchWrapEl = headerEl.querySelector('.search-wrap')
const searchStartEl = headerEl.querySelector('.search-starter')
const searchCloserEl = searchWrapEl.querySelector('.search-closer')
const searchSchadowEl = searchWrapEl.querySelector('.shadow')
const searchInputRl = searchWrapEl.querySelector('input')
const searchDelayEls = [...searchWrapEl.querySelectorAll('li')]

searchStartEl.addEventListener('click', showSearch)

searchCloserEl.addEventListener('click', hideSearch)

searchSchadowEl.addEventListener('click', hideSearch)

function showSearch() {
  headerEl.classList.add('searching')
  document.documentElement.classList.add('fixed')
}

function hideSearch() {
  headerEl.classList.remove('searching')
  document.documentElement.classList.remove('fixed')
}

검색 바 등장 시 스크롤 방지

html.fixed {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
}

function showSearch() {
  headerEl.classList.add('searching')
  document.documentElement.classList.add('fixed')
}

function hideSearch() {
  headerEl.classList.remove('searching')
  document.documentElement.classList.remove('fixed')
}

위 코드에서는 showSearch() 함수를 통해 검색바가 보이면 html에 fixed 클래스를 추가하고 hideSearch() 함수를 통해 검색바가 없어지면 html에 fixed 클래스를 제거한다. 이때 html에 fixed 클래스가 추가되었다면 css에서 position: fixed; 에 의해 html은 현재 위치에 고정되게 되고 overflow-y: scroll에 의해 y축(높이)에는 스크롤이 등장하게된다. 하지만 html은 현재 위치에 고정되어 있지 때문에 스크롤을 할 수 없는 상태가 된다.

검색 바 애니메이션

검색 버튼을 터치하였을 경우 메뉴 버튼이 우측에서부터 사라지고 검색 바가 상단에서부터 출력되고 있다.

header .search input,
header .search .search-icon,
header .search .autocompletes h3,
header .search .autocompletes li {
  transition: 0.6s;
  transform: translate(100px, 0);
}

위 코드를 통해 검색 바는 기본적으로 x축 기준으로 100px만큼 우측으로 이동해있는 상태이다.

function showSearch() {
  headerEl.classList.add('searching')
  document.documentElement.classList.add('fixed')
  headerMenuEls.reverse().forEach(function(el, index) {
    el.style.transitionDelay = index * 0.4 / headerMenuEls.length + 's'
  })
  searchDelayEls.forEach(function (el, index) {
    el.style.transitionDelay = index * 0.4 / searchDelayEls.length + 's'
  })
  setTimeout(function(){
    searchInputRl.focus()
  },600)
}

만약 검색 버튼을 누르면 showSearch() 함수가 실행되고 css의 header의 클래스에 searching이 추가된다.

header.searching ul.menu > li {
  transform: scale(0.7);
  opacity: 0;
}

header.searching .search-wrap {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

header.searching .search input,
header.searching .search .search-icon,
header.searching .search .autocompletes h3,
header.searching .search .autocompletes li {
  transform: translate(0, 0);
  transition-delay: 0.2s;
}

header에 searching이 추가되면서 검색창에 스타일이 변화가 생기게 되는데, opacity: 1; 보이지 않던 검색 바가 보이게 되고 transform: translate(0, 0);를 통해 x축으로 이동해 있던 검색 바가 원위치로 이동하게 된다.

function showSearch() {
 headerMenuEls.reverse().forEach(function(el, index) {
    el.style.transitionDelay = index * 0.4 / headerMenuEls.length + 's'
  })
  searchDelayEls.forEach(function (el, index) {
    el.style.transitionDelay = index * 0.4 / searchDelayEls.length + 's'
  })
}

function hideSearch() { 
 headerMenuEls.reverse().forEach(function(el, index) {
    el.style.transitionDelay = index * 0.4 / headerMenuEls.length + 's'
  })
  searchDelayEls.reverse().forEach(function (el, index) {
    el.style.transitionDelay = index * 0.4 / searchDelayEls.length + 's'
  })
  searchDelayEls.reverse()

}

transitionDelay 함수는 CSS 전환이 시작되기 전까지의 지연 시간을 나타낸다. 페이지에서는 검색창 등장 시 기존 메뉴가 한개씩 사라지고 검색바의 검색어가 하나씩 등장하는 효과가 보여지고 있다. 이 경우에는 배열을 이용할 필요가 있다. const searchDelayEls = [...searchWrapEl.querySelectorAll('li')] searchWrapEl 안의 모든 li요소를 사용하는데 전개 연산자 [...]를 사용하여 해당 요소들을 배열로 사용할 수 있다.

searchDelayEls.reverse().forEach를 사용하여 배열의 각 요소에 transitionDelay를 지정할 수 있다. el.style.transitionDelay = index * 0.4 / searchDelayEls.length + 's' 함수를 통해 각 배열 별로 계산을 하여 검색창이 1개씩 등장하는 느낌을 줄 수 있게된다. ex) 해당 페이지의 searchDelayEls.length 값은 12이다. 첫번째 배열의 경우 index = 0이다. 그렇기에 첫번째 배열은 0 * 0.4 / 12 +'s' 이기에 0s이다. 두번째 배역의경우 index = 1이다. 그렇기에 첫번째 배열은 1 * 0.4 / 12 +'s' 이기에 0.0333s이다.

searchDelayEls.reverse().forEach 에서 reverse() 사용 이유?

검색 버튼을 터치하였을 경우 메뉴 버튼이 우측에서부터 사라지고 검색 바가 상단에서부터 출력되고 있다. 만약 reverse() 사용하지 않았다면 검색 버튼 터치 시 메뉴 버튼은 우측부터가 아닌 좌측에서부터 사라지게 될 것이다. 마찬가지로 검색 바가 사라졌을 때 검색 바가 하단에서부터 사라지고 메뉴 버튼은 좌측에서부터 등장하고 있다. 검색 바가 없어졌을 때의 함수에 reverse()를 사용함으로써 검색 바가 사라졌을 경우 상단이 아닌 하단부터 사라지고 메뉴버튼이 좌측에서부터 등장하도록 하고 있다.

검색 바 포커싱

검색 버튼을 터치했을 경우 자동으로 검색 바에 포커싱이 되도록 구성할 것이다.

const headerEl = document.querySelector('header')
const searchWrapEl = headerEl.querySelector('.search-wrap')
const searchInputRl = searchWrapEl.querySelector('input')


function showSearch() {
  headerEl.classList.add('searching')
  document.documentElement.classList.add('fixed')
  headerMenuEls.reverse().forEach(function(el, index) {
    el.style.transitionDelay = index * 0.4 / headerMenuEls.length + 's'
  })
  searchDelayEls.forEach(function (el, index) {
    el.style.transitionDelay = index * 0.4 / searchDelayEls.length + 's'
  })
  setTimeout(function(){
    searchInputRl.focus()
  },600)
}

function hideSearch() {
  headerEl.classList.remove('searching')
  document.documentElement.classList.remove('fixed')
  headerMenuEls.reverse().forEach(function(el, index) {
    el.style.transitionDelay = index * 0.4 / headerMenuEls.length + 's'
  })
  searchDelayEls.reverse().forEach(function (el, index) {
    el.style.transitionDelay = index * 0.4 / searchDelayEls.length + 's'
  })
  searchDelayEls.reverse()
  setTimeout(function(){
    searchInputRl.value = ''
  },600)

}

위 코드에서 searchInputRl.focus()을 통해 해당 창에 포커싱하도록 할 수 있다. 하지만 위 코드에서는 버튼을 터치하였을 경우 0.4s 뒤에 검색창이 출력되기에 포커싱이 되지 않는 오류가 생긴다. 이 경우에는 setTimeoutset 함수를 사용하면된다.

setTimeoutset 함수는 setTimeoutset(함수(), 시간(ms)) 형식으로 사용하는데 특정 시간 뒤에 함수() 영역이 실행된다고 할 수 있다.

setTimeout(function(){
    searchInputRl.focus()
  },600)

위 코드에서는 0.6초 뒤에 searchInputRl.focus() 함수가 실행되어 검색 창에 포커싱이 되도록 할 수 있다.

또한 검색 창을 끄고 닫으면 이전에 검색했던 단어가 남아있는 오류가 생길 수 있다. 이럴경우 검색창을 닫는 함수 뒤에 searchInputRl.value = ''을 추가하여 입력한 값을 초기화 해줄 수 있다.

<div class="container">
  The brown fox jumps over the lazy dog.
  동해물과 백두산이 마르고 닭도록 하느님이 보우하사 우리나라 만세
</div>

.container {
  width: 300px;
  border: 4px solid;
  font-size: 40px;
}

HTML에서는 한글을 쓰면 영어와 다르게 줄바꿈이 있을 경우 단어 단위가 아닌 글자 단위로 줄바꿈이 이루어진다.

.container {
  width: 300px;
  border: 4px solid;
  font-size: 40px;
  word-break: keep-all;
}

word-break: keep-all;을 사용함으로써 한글에 줄바꿈이 있어도 글자 단위가 아닌 단어 단위로 줄바꿈이 이루어지도록 해준다.

애플 사이트 만들기

메뉴 만들기

<ul class="menu">
        <li class="apple-logo"><a href="javascript:void(0)">Apple</a></li>
        <li><a href="javascript:void(0)">스토어</a></li>
        <li><a href="javascript:void(0)">Mac</a></li>
        <li><a href="javascript:void(0)">iPad</a></li>
        <li><a href="javascript:void(0)">iPhone</a></li>
        <li><a href="javascript:void(0)">Watch</a></li>
        <li><a href="javascript:void(0)">Vison</a></li>
        <li><a href="javascript:void(0)">AirPdos</a></li>
        <li><a href="javascript:void(0)">TV 및 홈</a></li>
        <li><a href="javascript:void(0)">엔터테이먼트</a></li>
        <li><a href="javascript:void(0)">액세서리</a></li>
        <li><a href="javascript:void(0)">고객지원</a></li>
        <li class="search-starter"><a href="javascript:void(0)">검색</a></li>
        <li class="basket-starter"><a href="javascript:void(0)">장바구니</li>
      </ul>

header ul.menu {
  display: flex;
  height: 44px;
  justify-content: space-between;
}

header ul.menu > li {
  display: flex;
  position: relative;
}

header ul.menu > li > a {
  padding: 0 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  color: #F5F5F5;
  opacity: 0.8;
  text-decoration: none;
}

각 버튼을 누르면 링크로 이동하기위해 a태그를 사용하였다. 하지만 아직 연결되어 있는 링크는 없기 때문에 href="javascript:void(0)"를 사용해 실제로는 이동하지 않도록 하였다. 애플, 검색, 장바구니 버튼은 텍스트가 아닌 이미지 버튼이 삽입되어 있다.

header ul.menu > li.apple-logo > a {
  background-image: url("../images/header_apple.svg");
}

header ul.menu > li.search-starter > a {
  background-image: url("../images/header_search.svg");
}

header ul.menu > li.basket-starter > a {
  background-image: url("../images/header_bag.svg");
}

background-image를 통해 해당 텍스트 위치에 이미지를 삽입시켰다. 하지만 텍스트는 남아있는 문제가 있다.

header ul.menu > li.apple-logo > a,
header ul.menu > li.search-starter > a,
header ul.menu > li.basket-starter > a {
  width: 14px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: center 13px;
}

text-indent: -9999px; 를 통해 텍스트를 -9999px 위치로 이동시켰는데 이는 대체 텍스트를 의미한다.

장바구니 버튼

장바구니 버튼을 누르면 하단에 추가 버튼이 나오도록 구성하였다.

<li class="basket-starter">
          <a href="javascript:void(0)">장바구니</a>
          <div class="basket">
            <div class="arrow"></div>
            <div class="message">
              장바구니가 비어 있습니다.
            </div>
            <ul>
              <li><a href="javascript:void(0)">장바구니</a></li>
              <li><a href="javascript:void(0)">관심 목록</a></li>
              <li><a href="javascript:void(0)">주문</a></li>
              <li><a href="javascript:void(0)">계정</a></li>
              <li><a href="javascript:void(0)">로그인</a></li>
            </ul>
          </div>
        </li>

header .basket {
  visibility: hidden;
  width: 290px;
  padding: 10px 20px;
  border: 1px solid #D2D2D2;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #FFF;
  position: absolute;
  top: calc(100% + 4px);
  right: -6px;
  transition: 0.5s;
  opacity: 0;
}

header .basket.show {
  visibility: visible;
  opacity: 1;
}

header .basket .arrow {
  width: 20px;
  height: 10px;
  overflow: hidden;
  position: absolute;
  top: -10px;
  right: 12px;
}

header .basket .arrow::before{
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid #D2D2D2;
  background-color: #FFF;
  transform: rotate(45deg);
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 50%;
}

header .basket .message {
  padding: 30px 0;
  font-size: 13px;
  color: #6E6E6E;
  text-align: center;
}

header .basket ul {
  margin-top: 10px;
}

header .basket ul li {
  border-top: 1px solid #D2D2D2;
}

header .basket ul li a {
  display: block;
  padding: 14px;
  font-size: 13px;
  color: #0071E3;
}

header .basket ul li a:hover {
  font-weight: 700;
}

const basketStaterEl = document.querySelector('header .basket-starter')
const basketEl = basketStaterEl.querySelector('.basket')

basketStaterEl.addEventListener('click', function(event) {
  event.stopPropagation()
  if (basketEl.classList.contains('show')) {
    //hide
    hideBasket()
  }else {
    //show
    showBasket()
  }
})

basketEl.addEventListener('click', function(event) {
  event.stopPropagation()
})

window.addEventListener('click', function() {
  hideBasket()
})

function showBasket() {
  basketEl.classList.add('show')
}

function hideBasket() {
  basketEl.classList.remove('show')
}

장바구니 버튼을 누를 경우 basketEl.classList.contains('show')를 통해 basketEl에 show가 포함되어 있는지 확인하게된다. 만약 포함되어 있다면 basketEl에 show를 없애고 포함되어 있지 않다면 show를 추가시킨다. window.addEventListener,basketEl.addEventListener를 통해서 장바구니 버튼 뿐만 아니라 전체 영역과 하단 버튼 영역 터치 시의 동작 또한 구현 시킬 수 있다. 하지만 클릭을 통해 이벤트 감지하는 동작에서는 버블링이라고 하는 문제가 생길 수 있다. (ex 하단 버튼 영역만을 터치하고 싶은데 window 이벤트 감지 이벤트가 동시에 발생하는 문제) 이는 event.stopPropagation()를 통해 상위 요소로 이벤트가 전달되지 않고 자신의 영역에서만 이벤트가 전달되도록 할 수 있다.

header .basket {
  visibility: hidden;
  width: 290px;
  padding: 10px 20px;
  border: 1px solid #D2D2D2;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #FFF;
  position: absolute;
  top: calc(100% + 4px);
  right: -6px;
  transition: 0.5s;
  opacity: 0;
}

header .basket.show {
  visibility: visible;
  opacity: 1;
}

위 코드를 통해 show가 없다면 visibility: hidden;로 인해 하단 메뉴는 보여지지 않고 show가 있다면 visibility: visible;를 통해 하단 메뉴가 보여지게 된다.

A) 대표적은 VCS(Version Control System)인 Git에서는 주 브랜치로 'master' 브랜치를 사용했지만, Git 2.28 버전부터 주 브랜치를 'main' 브랜치로 변경하였다.

'Maser'라는 단어는 주종 관계와 같이 인종 차별적인 것으로 인식될 수 있어, 'Main'이라는 단어로 변경되었다. 그래서 Git 2.28 미만 버전에서는 'git config --global init.defaultBranch main' 명령어로 주 브랜치를 구성하거나, 프로젝트 단위로는 'git branch -m master main' 명령어로 주 브랜치를 변경할 수 있다.

Q) Git Flow 전략을 사용하는 이유와 주 브랜치에 대해 설명해 주세요.

A) Git Flow는 복잡한 프로젝트 개발에서 안전성과 효율성을 향상시키며 버전 관리를 하기 위한 브랜치 관리 전략을 말한다.

담당자에 따라 이름은 조금씩 다를 수 있지만, 주로 'main', 'dev', 'feature', 'release', 'hotfix'로 역할에 맞게 브랜치를 구분한다.

'main'은 실제 출시 제품의 브랜치이고, 'dev'는 여러 기능을 병합하는 등의 용도로 안전할 개발을 위해 사용하는 브랜치이다.

'feature'는 'feature/login', 'feature/board'와 같이 기능별 이름을 추가해 개발을 진행하는 브랜치이고 'release'는 출시 버전을 준비해 버저닝하는 브랜치이고, 'hotfix'는 긴급 버그 수정을 위해 사용하는 브랜치이다.

이렇게 각 브랜치를 역할에 맞게 엄격하게 사용해야 브랜치 간의 병합과 충돌을 최소화해서 프로젝트의 안정성과 효율성을 높일 수 있다.

Q) Git Merge와 GitHub Pull Request의 차이점을 설명하시오

A) Git Merge는 단순히 로컬 개발 환경에서 각 브랜치를 병합할 때 사용하는 명령으로, 발생하는 충돌을 직접 해결하기 쉽고 별도의 검토나 승인 없이 빠르게 병합할 수 있다.

반면 GitHub Pull Request는 원격 저장소에서 다른 개발자와의 협업을 위해 사용하는 기능으로, 병합 전에 코드 리뷰 등의 피드백을 받을 수 있어서 여러 개발자가 변경 사항을 검토하고 토론할 수 있으며, 프로젝트에 따라 관리자 승인이 필요할 수 있기 때문에 더 안전하게 코드를 병합하는 좀 더 구조화된 과정이다.

그래서 간단한 변경 사항의 브랜치 병합은 로컬에서 Git Merge 명령을 사용하고, 더 복잡한 변경 사항이나 협업을 위한 코드는 되도록 GitHub Pull Request 기능을 사용해서 병합을 하는 것이 좋다.

Q) Markdown 문법 중 코드 블록(Code Block)과 인라인 코드(Inline Code)의 차이점에 대해 설명하시오

A) 마크다운 문법에서 코드 블록은 주로 여러 줄의 코드 영역을 표시할 때 사용하는 기능으로, 백틱(`)기호를 연속으로 3개 사용해 코드의 시작과 끝을 표시한다.

또한 코드 블록은 ```html과 같이 작성 코드의 언어를 명시할 수도 있어서 코드의 가독성을 높이고 코드 하이라이팅을 적용할 수 있다.

인라인 코드는 한 줄의 코드 영역을 표시할 때 사용하는 기능으로 `div` 처럼 백틱 기호 1개씩 코드의 시작과 끝에 사용한다.

그래서 문장 안에서 코드 부분을 강조하는 용도로 사용한다.

웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있도록 하는 도움을 준다. Github에서는 README.md를 통해 우선적으로 접하게 된다.

장점

문법이 쉽고 간결하다. 관리가 쉽다. 지원 가능한 플랫폼과 프로그램이 다양하다.

단점

표준이 없다. 모든 HTML 마크업을 대신하지 못한다.

제목 (Header)

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

줄바꿈 (Line Breaks)

줄바꿈을 하기 위해서는 줄바꿈이 있는 문장에 두 칸 띄어쓰기를 하면 된다. 간혹 띄어쓰기로 줄바꿈이 되지 않는 경우가 있는데 이 경우에는 </br>을 사용하면 된다.

동해물과 백두산이 마르고 닳도록  
하느님이 보우하사 우리나라 만세  
무궁한 삼천리 화려 강산<br />
대한 사람 대한으로 길이 보전하세

강조 (Emphasis)

_이텔릭_  
**두껍게**  
**_이텔릭 + 두껍게_**  
~~취소선~~  
<u>밑줄</u>  

목록 (List)

1. 순서가 필요한 목록
1. 순서가 필요한 목록
1. 순서가 필요한 목록
    1. 순서가 필요한 목록
    1. 순서가 필요한 목록
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
    - 순서가 필요하지 않은 목록
- 순서가 필요하지 않은 목록

동일한 숫자를 입력했음에도 자동으로 다음 숫자 목록으로 출력된다. 또한 들여쓰기를 통해 특정 목록의 상세 목록으로 만들 수 있다.

링크 (Links)

<a href="https://www.naver.com">NAVER</a>

[NAVER](https://www.naver.com)

<a href="https://www.naver.com" title="NAVER로 이동">NAVER</a>

[NAVER](https://www.naver.com "NAVER로 이동")

링크를 삽입하기 위해서는 기본적으로 []() 형태를 사용하면 된다.

이미지 (Image)

![NSTORE](https://s.pstatic.net/static/www/mobile/edit/20250417_1095/upload_1744877794098d42hA.png)

[![NSTORE](https://s.pstatic.net/static/www/mobile/edit/20250417_1095/upload_1744877794098d42hA.png)](https://shopping.naver.com/ns/home)

마크다운에 이미지를 삽입하기 위해서는 기본적으로 ![대체 텍스트](이미지 주소) 형태로 사용하면 된다. 만약 링크 이미지를 사용하고 싶다면 [![대체 텍스트](이미지 주소)](링크) 를 사용하면 된다.

인용문 (BlockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.  
> (네이버 국어 사전)

> 인용문을 작성하세요.
>> 중첩된 인용문 1
>>> 중첩된 인용문 2
>>>> 중첩된 인용문 3
>>>>> 중첩된 인용문 4

인라인 (inline) 코드 강조

CSS에서 `background` 혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있다.

블록 (block) 코드 강조

표 (table)

값 | 의미 | 기본값
:--|:--:|--:
static | 기준 없음 | O
relative | 요소 자신 | X
absolute | 위치 상 부모 요소 | X
fixed | 뷰포트 | X

원시 HTML (Raw HTML)

동해물과 <u>백두산</u>이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세

<a href="https://www.naver.com" title="NAVER로 이동" targer="_blank">NAVER</a>

<img width="70" src="https://s.pstatic.net/static/www/mobile/edit/20250417_1095/upload_1744877794098d42hA.png" alt="NSTORE">

수평선 (Horizontal Rule)

---, ***, ___를 통해 수평선을 만들 수 있다.

---

***

___

git reset --hard HEAD~2 : 2버전 전으로 버전을 되돌린다.

git reset --hard ORIG_HEAD : 되돌리기 명령을 취소한다.

git 복제하기

git clone 'Git주소' : 원하는 저장소에 GitHub 프로젝트 복사한다.

브랜치

git branch -r : 복제한 프로젝트의 브랜치의 목록을 확인할 수 있다.

git branch checkout -t '브렌치' : 복제한 프로젝트의 브랜치로 전환할 수 있다.

git branch -d '브렌치' : 브랜치를 삭제한다.

git checkout -b '브렌치' : 브랜치를 생성하는 동시에 전환한다.

충돌 방지

다른 환경에서 프로젝트를 하다 보면 버전 생성도중 충돌이 발생할 수 있다.

git pull origin master : 원격 저장소(Github)의 데이터를 가져오고 변경 사항을 자동으로 변경한다.

브랜치 변경

git branch -m master main : master라는 이름의 브랜치에서 main이라는 이름의 브랜치로 이동한다.

git config --global init.defaultBranch main : main 이름의 브랜치가 기본 브랜치로 변환한다.

Github에서 브랜치 이름 수정하기

버전관리 예외사항 파일/폴더 설정

.gitignore 파일을 생성하여 파일 안에 버전관리를 하지 않을 파일/폴더 명을 작성하면 된다. ex)

.idea
.vscode
node_modules

버전 관리 도중 .gitignore을 사용할 경우

git rm -r --cached . : 원격 저장소의 파일/폴더를 삭제한다.

브랜치 전략

Git Flow

main(master) : 기본 / 메인 / 제품 브랜치 dev(develop) : 다음 제품 출시를 위해 여러 기능을 병합하는 브랜치 feature/* : 각 기능 개발을 위한 브랜치 release : 이번 제품 출시 직전 최종 테스트(QA)를 위한 브랜치 hotfix : 제품에 버그가 확인되었을 때 긴급 수정을 위한 브랜치

브랜치 병합

Github에서 Pull requests를 통해 브랜치를 확인할 수 있다.

compare을 선택하여 내가 수정버전을 커밋한 브랜치를 선택함으로써 base(master)의 브랜치에서의 변경 사항을 확인할 수 있다. Create pull request 버튼을 통해 브랜치를 병합할 수 있다.

설명과 함께 병합이 가능하다.

Github에 변경된 파일이 정상적으로 변경된 것을 확인할 수 있다.

      <form>
        <input type="text" placeholder="아이디를 입력해 주세요." />
        <input type="password" placeholder="비밀번호를 입력해 주세요." />
        <input type="submit" value="로그인" />
        <p>
          * 타 사이트와 비밀번호를 동일하게 사용할 경우 도용의 위험이 있으므로, 정기적인 <br />
          비밀번호 변경을 해주시길 바랍니다.
        </p>
      </form>

form, input

input : 사용자에게 데이터를 입력받는 역할 type="text" : 문자 타입을 입력받기 위한 요소 input type="password" : 비밀보호 타입을 입력받기 위한 요소 input type="submit" : 타입을 'submit'을 사용하면 해당 버튼이 선택 시 실제로 서버로 form 태그 내의 내용을 전송하게 해준다.

속성 선택자

.signin__card form [type="submit"] {
  background-color: #006633;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

[type="submit"] : 타입의 속성이 submit인 요소를 선택할 수 있다.

특정 글씨 강조

 <div class="signin__card">
      <h2>
        <strong>Welcome!</strong> 스타벅스 코리아에 오신 것을 환영합니다.
      </h2>
 </div>

.signin__card h2 strong {
  font-weight: 700;
  color: #006633
}

strong : strong 태그는 주로 특정 글자를 강조할 때 사용한다.

Git

Git(깃)은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)이다.

GITHUB에 프로젝트 업로드 하기

터미널에 입력

개행 문자(Newline) 설정

git config --global core.autocrlf true(win)/auto(mac) : OS간의 줄바꿈 문자열 문제를 해결하기 위한 설정

사용자 정보 설정

유저 이름 설정

git config --global user.name 'Name' : 커밋을 위한 유저 'Name'을 설정한다.(Github의 이름과 동일하도록 설정하는 것을 추천)

유저 이메일 설정

git config --global user.email 'Email' : 커밋을 위한 유저 'Email'을 설정한다.

사용자 유저 정보 확인

git config --global --list

Git 저장소 생성

git init : 현재 프로젝트에서 변경사항 추적(버전 관리)을 시작

변경사항 지정

git add . : 현재 경로의 모든 파일의 변경사항을 추적하도록 지정 git add index.html : 변경사항을 추적할 특정 파일 지정

현재 상태 확인

git status : git add.를 통해 저장된 파일은 녹색, 저장되지 않은 파일은 빨간색으로 노출된다.

버전 생성

git commit -m 'message' : 저장된(변경된) 파일을 'message'와 버전을 생성

원격 저장소 연결

git remote add origin 'https://github....' : origin이란 별칭으로 원격 저장소 연결

파일 업로드

git push origin master : orgin이란 별칭의 원격 저장소(github)에 버전 내역 업로드

수정된 버전 생성하기

원격 저장소에 업로드되어 있는 파일이 수정될 경우 해당 파일 우측에 M(modify) 약어가 추가된 것을 확인 가능하다.

현재 상태 확인

git status를 통해 index.html 파일이 수정된 것을 알 수 있다.

변경사항 지정

git add .

버전 생성

git commit -m '뱃지 이미지 수정' : 메시지에 한글도 사용 가능하다

파일 업로드

git push origin master 메시지와 함께 Github에 수정된 파일이 업로드된 것을 확인 가능

브랜치

버전을 관리하기 위한 일종의 복사본이다.

브랜치 조회

git branch : 생성된 브랜치를 조회한다.

브랜치 생성

git branch sigin : 'signin' 이라는 브랜치를 생성한다.

브랜치 이동

git checkout signin : 'signin'이라는 브랜치로 이동한다.

브랜치를 이동할 경우 수정된 파일을 변경되지 않는다.

Netify

Github등과 계정 연동 및 빠른 호스팅을 제공해준다. Netify

Netify에 접속하여 sign up 버튼을 터치하여 회원가입을 준비한다.

원하는 방법을 통해 회원가입을 진행한다. (Github 추천)

호스팅할 프로젝트가 저장되어 있는 저장소 선택

Github에 저장되어 있으면 Github 선택

호스팅할 프로젝트 선택

Github와 연동하면 업로드 되어 있는 프로젝트를 쉽게 선택할 수 있다.

deploy 를 터치하여 호스팅

호스팅된 프로젝트 및 해당 URL을 확인할 수 있다.

수정사항

Github에 수정된 사항이 있어면 Netify에서는 자동으로 수정된 사항을 불러온다.

A) HTML Doctype 선언은 HTML 문서가 웹 브라우저에 의해 어떤 방식으로 해석되어야 하는지 알려주는 역할을 하기 때문에 Doctype 선언은 HTML 문서의 첫 줄에 위치한다.

<!DOCTYPE html> 태그는 HTML 문서가 HTML5 표준으로 작성되어 있고 웹 브라우저가 그에 맞게 해석해야 한다는 것을 명시하는 것이다.

대표적인 HTML5 표준의 특징 중 하나로 빈(Empty) 태그를 닫는 / 기호 사용이 필수가 아닌 선택 사항이라는 것이 있고 <header>, <footer>, <nav> 같은 새로운 시맨틱(의미를 가지고 있는) 요소들이 추가되어 사용할 수 있다는 것이 있다.

Q) CSS 선택자 우선순위의 개념과 계산 방법을 설명하라

A) CSS 선택자 우선순위는 하나의 요소에 여러 스타일이 적용될 때, 어떤 스타일이 최종적으로 적용될지 결정하는 개념이다.

우선순위가 가정 높은 것은 CSS 속성에서 직접 사용하는 !important 키워드이고, 다음으로 HTML style 속성에서 선언하는 인라인 스타일이 있다.

아이디 선택자(#id), 클래스 선택자(.class), 태그 선택자(tag), 전체 선택자(*), 스타일 상속 등의 순서대로 점수가 매겨지고 계산되어 순위가 결정된다,

각 점수는 인라인 스타일이 1000점, 아이디 선택자는 0100점, 클래스 선택자는 0010점, 태그 선택자는 0001점, 전체 선택자는 0000점, 상속은 점수가 없다.

만약 구글 크롬 브라우저 기준 99버전부터 지원하는 @layer 규칙을 사용하면, 스타일 우선순위를 의도적으로 조정할 수 있다.

Q) 브라우저 기본 스타일의 초기화(Reset)와 표준화(Noramlize)의 차이점을 설명하라

A) 웹 브라우저마다 기본적으로 제공하는 스타일이 조금씩 다르기 때문에, 브라우저마다 일관성 있는 화면을 보여주기 위해서 초기화(Reset) 또는 정규화라고도 하는 표준화(Noramlize) 작업이 필요하다.

그중에서 초기화(Reset)는 모든 요소의 크기나 여백, 기타 모양을 말 그대로 초기화해서 처음부터 스타일을 다시 추가할 수 있게 하는 개념이다.

반면 표준화(Noramlize)는 브라우저 간의 스타일 차이를 일관성 있게 적용하기 위해 기본 스타일을 유지하며 일치시키는 개면이다.

그래서 페이지 스타일의 많은 부분을 원하는 대로 커스터마이징하려면 초기화(Reset)을 사용하고, 브라우저의 기본 스타일을 활용하려면 표준 화(Noramlize)를 사용하는 것이 좋다.

Q) 마진 병합(Margin Collapse) 현상이란 무엇인지 설명하라

A) 마진 병합은 서로 다른 두 요소의 CSS margin 속성의 값이 중첩되어 하나의 값으로만 출력되는 현상을 말한다.

기본적으로 두 형제 요소의 위아래 마진이 만나면 중첩되어 더 큰 값으로 결합되고, 또 부모와 자식 요소의 위쪽이나 아래쪽 마진이 서로 만나면 중첩되어 부모 요소의 마진 값으로 결합됩니다.

그래서 마진 병합은 블록 요소 간의 수직 정렬 간격을 일정하게 유지하거나 자식 요소를 통한 부모 요소의 여백 설정에서 유용할 수 있지만, 레이아웃 코드에 대한 가독성이 떨어지므로 간접적인 여백 생성의 마진 병합을 피하고 최신의 Flex나 Grid를 사용하는 것이 좋다.

Q) 오픈 그래프(Open Graph)는 무엇이고 어떤 역할을 하는지 설명하라

A) 오픈 그래프는 웹 페이지의 제목, 설명, 이미지, URL 등의 메타 정보를 정의하는 규약(프로토콜)이다.

이 메타 정보를 통해 페이스북이나 카카오톡 등 다양한 플랫폼에서 URL을 공유할 때 해달 페이지의 미리보기로 표시될 정보를 제공할 수 있고, 사용자는 URL로 접속하기 전에 해당 페이지의 기본 정보를 미리 확인할 수 있다.

대부분의 플랫폼 검색 엔진은 공유된 URL의 페이지 전체 로딩을 기다리지 않고 빠르게 메타 정보만 읽어서 해당 페이지의 정보를 파악하므로, 오픈 그래프나 트위너 카드 같은 메타 정보를 잘 제공해야 검색 엔진 최적와(SEO)에도 도움이 된다.

그래서 SPA(Single Page Application) 같은 단일 HTML 제공 사이트는 페이지 구조에 따라 이러한 메타 정보를 위해 별도의 컴퓨팅 서버가 필요할 수 있다.

3D 애니메이션

.reserve-store {
  background-image: url("../images/reserve_store_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

.reserve-store .inner {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reserve-store .medal {
  width: 334px;
  height: 334px;
  perspective: 600px;
}

.reserve-store .medal .front,
.reserve-store .medal .back {
  width: 334px;
  height: 334px;
  position: absolute;
  backface-visibility: hidden;
  transition: 1s;
}

.reserve-store .medal .front {
  transform: rotateY(0deg);
}

.reserve-store .medal:hover .front {
  transform: rotateY(180deg);
}

.reserve-store .medal .back {
  transform: rotateY(-180deg);
}

.reserve-store .medal:hover .back {
  transform: rotateY(0deg);
}

.reserve-store .medal .back .btn {
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
}

transform: rotateY(-180deg) 요소를 뒤집는다.(Y축으로 -180도) backface-visibility : hidden 뒷면을 안보이도록 처리한다. perspective: 600px; 원근법을 이용해서 600px 거리에서 3차원의 효과를 시각적으로 보여준다.

.reserve-store .medal .front {
  transform: rotateY(0deg);
}

transform: rotateY(0deg);을 적는 이유. 일부 브라우저에서는 지원이 안될 수 있기에 명시적으로 작성하여 적용해준다.

스크롤 위치에 따른 애니메이션

현재 스크롤 위치에 따라 이미지와 텍스트가 좌/우에서 생성되는 느낌이 들도록 구현하였다.

   <section class="season-product scroll-spy">
    <div class="inner">
      <img src="./images/floating3.png" alt="Icon" class="floating floating3" />

      <img src="./images/season_product_image.png" alt="" class="product back-to-position to-right delay-0" />
      <div class="text-group">
        <img src="./images/season_product_text1.png" alt="" class="title back-to-position to-left delay-1" />
        <img src="./images/season_product_text2.png" alt="" class="description back-to-position to-left delay-2" />
        <div class="more back-to-position to-left delay-3">
          <a href="javascript:void(0)" class="btn">자세히 보기</a>
        </div>
      </div>
    </div>
   </section>

const spyEls = document.querySelectorAll('section.scroll-spy');
spyEls.forEach(function (spyEl) {
  new ScrollMagic
  .Scene({
    triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
    triggerHook: 0.8
  })
  .setClassToggle(spyEl, 'show')
  .addTo(new ScrollMagic.Controller());
});

scrollMagic

스크롤 요소의 상호작용을 위한 cdn 라이브러리이다. triggerHook: 0.8 페이지 상단이 0 하단이 1이다. 현재 보고 있는 페이지의 0.8의 영역을 의미한다. .setClassToggle(spyEl, 'show') 을 이용하여 페이지의 0.8 영역의 class에 show를 추가해준다.

.back-to-position {
  opacity: 0;
  transition: 1s;
}

.back-to-position.to-right {
  transform: translateX(-150px);
}

.back-to-position.to-left {
  transform: translateX(150px);  
}

.show .back-to-position {
  opacity: 1;
  transform: translateX(0);
}

.show .back-to-position.delay-0 {
  transition-delay: 0s;
}

.show .back-to-position.delay-1 {
  transition-delay: 0.3s;

}

.show .back-to-position.delay-2 {
  transition-delay: 0.6s;
}

.show .back-to-position.delay-3 {
  transition-delay: 0.9s;
}

class에 show가 있는 요소들에 애니메이션을 추가해주는 코드이다.

Fotter

html에서 특수 기호 사용하는 방법

특수문자를 삽입할 때 &와 ;를 사용하면 특수 문자를 사용 가능하다. © : © < : < > : > 참고

현재 연도 구하기

const thisYear = document.querySelector('.this-year')
thisYear.textContent = new Date().getFullYear();

Date() 생성자는 날짜와 관련된 생성자이다. new Date().getFullYear()을 이용하여 현재 연도를 구할 수 있다.

상단 이동 버튼

ScrollToPlugin은 스크롤 애니메이션을 지원해주는 GSAP 플러그 인이다.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.7/ScrollToPlugin.min.js" integrity="sha512-uLq4Xf3PvaO+NTghyBWeh43DxozRnHMM2vcwlxY+KVc7xv2PMLimAerptg7AbrdN2qZjAwExwV/IqGm4YQBPww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

const toTopEl = document.querySelector('#to-top');

window.addEventListener('scroll', _.throttle(function() {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
    // gsap.to(요소, 지속시간, 옵션 );
    // 버튼 보이기
    gsap.to(toTopEl, 0.2, {
      x: 0
    });
  } else {
    // 버튼 숨기기
    gsap.to(toTopEl, 0.2, {
      x: 100
    });
  }
}, 300))

toTopEl.addEventListener('click', function() {
  gsap.to(window, 0.7, {
    scrollTo: 0
  });
});

Y축 기준으로 500 초과일 경우 상단 이동 버튼이 보이고 이하일 경우 버튼을 이동시켜 보이지 않도록 한다. scroolTo를 이용하여 버튼 터치 시 최상단으로 이동할 수 있도록 한다.

리워드

  <section class="rewards">
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="inner">
      <div class="btn-group">
        <div class="btn btn--reverse sign-up">회원가입</div>
        <div class="btn sign-in">로그인</div>
        <div class="btn gift">스타벅스 모바일 카드 선물하기</div>
      </div>
    </div>
  </section>

.rewards .btn-group {
  position: absolute;
  bottom: 24px;
  right: 0px;
  width: 250px;
  display: flex;
  flex-wrap: wrap;
}

flex-wrap: wrap;을 이용하여 만약 버튼이 부모 요소의 크기에 넘친다면 다음줄로 줄바꿈을 해준다.

.rewards .btn-group .btn.gift{
  margin-top: 10px;
  flex-grow: 1;
}

flex-grow: 1 속성을 사용하여 너비를 전체 너비로 지정해줄 수 있다.

유튜브 영상 첨부하기

비율 조정

.youtube {
  position: relative;
  height: 700px;
  overflow: hidden;
  background-color: #333;
}

.youtube .youtube__area {
  width: 1920px;
  position: absolute;
  left: 50%;
  margin-left: calc(1920px / -2);
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);
}

.youtube .youtube__area::before{
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

일반적으로 유튜브와 같은 영상들은 16:9 비율을 통해 사용한다. padding-top: 56.25%;를 이용하여 16:9 비율로 동영상 영역의 크기를 지정하였다.

left: 50%;
margin-left: calc(1920px / -2);

해당 코드를 통해 동영상이 항상 중앙 배치되도록 하였다.

youtube iframe api

iframe player api를 통해서 youtube 영상을 제아할 수 있다.

 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 function onYouTubeIframeAPIReady() {
   new YT.Player('player', {
     videoId: 'cyD74DajmH0', // 최초 재생할 유튜브 영상 ID
     playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: 'cyD74DajmH0' // 반복 재생할 유튜브 ID 목록
     },
     events: {
      onReady: function (event) {
        event.target.mute() // 음소거
      }
     }
   });
 }

유튜브 영상 ID란 주소창에 '='이후의 부분을 통해 알 수 있다. (onYouTubeIframeAPIReady의 함수 이름을 변경하면 해당 함수를 사용할 수 없게된다. 이전에는 함수 이름의 경우 우리가 원하는 이름을 사용 가능하였지만 api를 사용하는 함수들의 경우 정해진 이름의 함수를 사용하는 것을 추천한다.)

고정 이미지 배경

.pick-your-favorite {
  background-image: url("../images/favorite_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

background-attachment: fixed 해당 이미지가 상하 스크롤 될때 같이 스크롤 되지 않고 뷰포트에 고정시켜 배경 이미지와 같이 고정시켜주다. background-size: cover 배경의 이미지를 더 넓은 너비에 맞춰서 비율을 조정해준다.

Swiper를 이용하여 움직이는 공지사항

Swiper을 이용하여 공지사항의 텍스트가 자동으로 움직으도록 구현하였다.

Swiper 에 대한 정보는 링크 참조

<div class="inner__left">
          <h2>공지사항</h2>
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="javascript:void(0)">[당첨자 발표] 2025 스타벅스 영수증 이벤트</a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">스타벅스 카드 온라인 재충전 / 모바일 카드 구매 가능 금액 안내</a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">스타벅스 카드 이용약관 개정 안내</a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">시스템 개선 및 서비스 점검 안내</a>
              </div>
            </div>
          </div>
          <a href="javascript:void(0)" class="notice-line__more">
            <div class="material-icons">add_circle</div>
          </a>
        </div>

new Swiper('.notice-line .swiper', {
  direction: 'vertical',
  autoplay: true,
  loop: true
});

new Swiper(선택자, 옵션) direction : 슬라이드 방향 지정 autoplay : 자동 재생과 관련된 설정 loop : 슬라이드 루프(무한 회전)을 활성화, 마지막 슬라이드 다음에 다시 첫 번째 슬라이드가 나타난다.

프로모션 숨기기

<div class="inner__right">
  <h2>스타벅스 프로모션</h2>
  <div class="toggle-promotion">
    <div class="material-icons">expand_less</div>
  </div>
</div>

.notice .promotion {
  height: 693px;
  background-color: #f6f5ef;
  position: relative;
  transition: height 0.4s;
  overflow: hidden;
}

.notice .promotion.hide {
  height: 0px;
}

const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
const promotionToggleBtnImg = document.querySelector('.toggle-promotion .material-icons');

let isHidePromotion = false;
promotionToggleBtn.addEventListener('click', function () {
  isHidePromotion = !isHidePromotion
  if(isHidePromotion) {
    // 숨김 처리
    promotionEl.classList.add('hide');
    promotionToggleBtnImg.textContent = "expand_more"
  }else {
    // 보임 처리
    promotionEl.classList.remove('hide');
    promotionToggleBtnImg.textContent = "expand_less";
  }
});

이전 장에서 진행한 matarial icons을 이용하여 프로모션 버튼 모양을 구현하였다. addEventListener을 이용하여 click이 일어날 때마다 함수가 호출되도록 하였다. isHidePromotion의 기본 값이 false로 지정하여 click 행위가 일어날 때마다 isHidePromotion = !isHidePromotion로 isHidePromotion 값을 반대 (만얄 false면 true로)로 변경시켰다.

만약 isHidePromotion 가 true가 되면

  promotionEl.classList.add('hide');
  promotionToggleBtnImg.textContent = "expand_more"

promotionEl class에 hide를 추가함으로 CSS 코드에 hide 부분에 해당하는 스타일을 따르도록 만들고 텍스트를 expand_more로 변경시키면서 아이콘 또한 변경시켰다.

만약 isHidePromotion 가 false가 되면 하단에 해당하는 코드가 호출되도록 하였다.

프로모션 슬라이드

    <div class="promotion">
      <div class="swiper-pagination"></div>
      <div class="swiper-prev">
        <div class="material-icons">chevron_left</div>
      </div>
      <div class="swiper-next">
        <div class="material-icons">chevron_right</div>
      </div> 
    </div>

new Swiper('.promotion .swiper', {
  direction: 'horizontal',
  slidesPerView: 3, 
  spaceBetween: 10, 
  centeredSlides: true, 
  loop: true,
  autoplay: {
    delay: 300
  },
  pagination: {
    el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
    clickable: true // 사용자 페이지 번호 요소 제어 여부
  },
  navigation: {
    prevEl: '.promotion .swiper-prev',
    nextEl: '.promotion .swiper-next'
  }
});

slidesPerView : 한번에 보여줄 슬라이드 개수 spaceBetween : 슬라이드 사이 여백 centeredSlides : 1번 슬라이드가 가운데 보이기

swiper-pagination

슬라이드 페이지 번호 및 이동

swiper-prev, swiper-next

슬라이드 이전, 다음 버튼

개발자 도구로 Swiper 살펴보기

Swiper의 경우 자동으로 클래스 명이 변경된다. 현재 슬라이드의 경우 class에 active가 붙어 있고 이전/다음 슬라이드에는 각각 prev,next가 붙었다. 이처럼 Swiper는 특정 클래스 명을 변경할 수 있다. 해당 기능을 이용하여 CSS을 이용하여 스타일을 변경할 수 있다. 하단 그림과 같이 현재 보고 있는 슬라이드는 선명하게 보이지만, 이전/다음 슬라이드의 경우 흐른 이미지로 보인다.

.notice .promotion .swiper-slide {
  opacity: 0.5;
  transform: opacity 1s;
  position: relative;
}

.notice .promotion .swiper-slide-active {
  opacity: 1;
}

swiper-slide에 스타일에 opacity를 이용하여 선명도를 0.5로 변경하였고, swiper-slide-active 해당하는 swiper-slide에만 선명도를 1로 지정하였다.

HTML, CSS, JS 에서 반응형 슬라이드 및 스와이프 기능을 쉽게 구현할 수 있도록 해주는 라이브러리

https://swiperjs.com/

사용방법

1) HTML에 Swiper 라이브러리 삽입

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

2) HTML에 Swiper 컨테이너 생성

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

GSAP (GreenSock Animation Platform)

JavaScript를 이용하여 웹 애니메이션을 만들때 도움을 주는 라이브러리 https://cdnjs.com/libraries/gsap 해당 사이트를 통해 gsap 라이브러리를 이용할 수 있다.

뱃지

<div class="badges">
  <div class="badge">
    <img src="./images/badge1.jpg" alt="Badge" />
  </div>
  <div class="badge">
  <img src="./images/badge2.jpg" alt="Badge" />
</div>

const badgeEl = document.querySelector('header .badges');

window.addEventListener('scroll', _.throttle(function() {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
    // 배지 숨기기
    // gsap.to(요소, 지속시간, 옵션 );
    gsap.to(badgeEl, 0.6, {
      opacity: 0,
      display: 'none'
    });
  } else {
    // 배지 보이기
    gsap.to(badgeEl, 0.6, {
      opacity: 1,
      display: 'block'
    });
  }
}, 300))

스크롤을 함으로써 특정 영역 이상 스크롤을 하였을 경우 뱃지를 숨긴다. gsap.to(요소, 지속시간, 옵션);을 사용함으로써 뱃지가 숨겨지거나 보여질때 지속시간을 두어 갑자기 생기거나 없어지는 등의 어색함을 없앨 수 있다. 뱃지가 숨겨졌을 때 opacity: 0만 사용하고 display: 'none'를 사용하지 않았을 경우 뱃지만 숨겨지지만 해당 숨겨진 뱃지가 터치되는 불상사가 생길 수 있다.

이미지

.visual .cup1.image {
  position: absolute;
  bottom: 0;
  right: -47px;
}

.visual .cup1.text {
  position: absolute;
  top: 38px;
  right: 171px;
}

CSS 에서 상품 이미지와 이름을 사용할때 동일한 상품끼리 .visual .cup1를 사용함으로써 image의 위치만 이동시켜도 text의 위치도 자동으로 이동시켜 코드를 추가로 수정할 번거러움을 없앨 수 있다.

순차적 애니메이션

const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * 0.7,
    opacity: 1
  });
});

fade-in의 이름의 모든 변수를 fadeEls로 선택하였다. foreach 반복문을 사용하여 fade-in 이름의 수 만큼 반복 시켰다. index의 초기 값은 0이므로 첫 번째 이미지가 생기기 위해 딜레이를 0.7초((0+1)*0.7=0.7)를 주었고 차례로 1.4, 2.1, 2.8 초의 딜레이를 적용시켰다.

HTML 클래스 속성의 작명법

요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시

BEM 미적용 코드

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

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

BEM 적용 코드

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

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

로고 (logo)

<a href="/" class="logo"> </a>

a 태그를 이용하여 특정 페이지로 이동할 수 있도록 해준다. 이때 href="/"를 입력함으로써 로고 클릭 시 메인 페이지로 이동한다는 것을 의미한다.

img {
  display: block;
}

이미지는 inline 요소이기에 하단에 불필요한 백이 생길 수 있다. 이때 이미지를 block 요소로 지정함으로써 불필요한 하단 여백이 생기는 것을 방지할 수 있다.

absolute

.inner {
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

header .logo {
  height: 75px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

부모요소에 position: relative; 속성을 추가하고 logo에 position: absolute; 속성과 margin: auto; 속성을 추가함으로써 가운데 정렬하도록 하였다. top: 0;와 bottom: 0;을 속성을 추가해야지만 수직 중앙 정렬을 할 수 있다.

링크

<li>
  <a href="javascript:void(0)">My Starbucks</a>
</li>

javascript:void(0)를 사용함으로써 a 태그에 아무 동작도 하지 않도록 할 수 있다. (javascript:void(0) 대신 #를 사용가능하나 # 사용 시 실제 #로 이동하기에 javascript:void(0)를 사용하는 것을 추천)

before

header .sub-menu ul.menu li::before {
  content: "";
  display: block;
  width: 0.7px;
  height: 12px;
  background-color: #d4d4d4;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

가상요소 ::before을 사용함으로써 해당 요소의 앞에 특정 요소를 추가할 수 있다.

header .sub-menu ul.menu li:first-child:before {
  display: none;
}

:first-child을 사용함으로써 첫번째 태그에는 가상요소가 출력되지 않도록 할 수 있다.

focus

header .sub-menu .search input:focus {
  width: 190px;
  border-color: #669900;
}

해당 태그를 포커스(클릭 시)하는 동안 해당 속성을 추가해준다. 위 코드에서는 가로 길이와 테두리 색을 바꿔준다.

:hover

header .main-menu .item .item__contents {
  width: 100%;
  position: fixed;
  left: 0;
  display: none;
}

header .main-menu .item:hover .item__contents {
  display: block;
}

상단 메뉴를 터치하고 있는 동안 하단 메뉴가 나오도록 해준다. 기본으로 display: none 속성을 통해 해당 메뉴가 출력되지 않도록 한 후 :hover 속성을 통해 해당 메뉴에 마우스가 이동해있을 때 disply: block을 통해 출력되도록 해준다.

웹 사이트가 쇼셜미디어(카카오톡 등)에 공유될때 우선적으로 활용되는 정보 지정

  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Starbucks" />
  <meta property="og:title" content="Starbucks Korea" />
  <meta property="og:description" content="스타벅스에서 매일 새로운 커피 경험을 만나보세요." />
  <meta property="og:image" content="./images/starbucks_seo.jpg" />
  <meta property="og:url" content="https://starbucks.co.kr" />

og:type : 페이지의 유형 og:site_name : 속한 사이트의 이름 og:title : 페이지의 이름(제목) og:description : 페이지의 간단한 설명 og:image : 페이지의 대표 이미지 주소(URL) og:url : 페이지 주소(URL)

ex) 카카오톡의 오픈그래프 예시

트위터 카드

웹 사이트가 쇼셜미디어(X(구 트위터))에 공유될때 우선적으로 활용되는 정보 지정

  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="Starbucks" />
  <meta property="twitter:title" content="Starbucks Korea" />
  <meta property="twitter:description" content="스타벅스에서 매일 새로운 커피 경험을 만나보세요." />
  <meta property="twitter:image" content="./images/starbucks_seo.jpg" />
  <meta property="twitter:url" content="https://starbucks.co.kr" />

twitter:card : 페이지(카드)의 유형 twitter:site : 속한 사이트의 이름 twitter:title : 페이지의 이름(제목) twitter:description : 페이지의 간단한 설명 twitter:image : 페이지의 대표 이미지 주소(URL) twitter:url : 페이지 주소(URL)

ex) X(구 트위터)

파비콘 (Favicon)

웹페이즈를 나타내는 아이콘 루트 경로에 위치하며 이미지 파일의 이름은 favicon으로 지정하는 것이 원칙 <link rel="icon" href="./favicon.ico" >

Google Fonts

웹 페이지에서 사용할 폰트 지정

  <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">

CSS 파일에서 폰트 적용

  font-family: "Nanum Gothic", sans-serif;

Google Material Icons

구글에서 제공하는 아이콘을 사용 가능

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<div class="material-icons">search</div> ex)

=Document Object Model, Application Programming Interface 자바스크립트에서 HTML을 제어하는 명령들 (이미 약속되어 있는 명령)

defer

<script defer src="./main.js"></script> defer : 가져온 JS 파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성

// HTML 요소(Element) 1개 검색 / 찾기
let boxEl = document.querySelector('.box');

// HTML 요소에 적용할 수 있는 메소드
box.El.addEventListener();

// 인수(Arguments)를 추가 가능
box.El.addEventListener(1, 2);

// 1 - 이벤트(Event, 상황)
box.El.addEventListener('click', 2);

// 2 - 핸들러(Handler, 실행할 함수)
box.El.addEventListener('click', function () {
  console.log('Click');
});

// HTML 요소(Element) 검색 / 찾기
const boxEl = document.querySelector('.box');

// 요소의 클래스 정보 객체 활용
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true

boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false

// HTML 요소(Element) 모두 검색 / 찾기
const boxEls = document.querSelectorAll('.box')
console.log(boxEls);

// 찾은 요소들 반복해서 함수 실행
// 익명 함수를 인수로 추가
boxEls.forEach(function () {});

// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});

//출력
boxEls.forEach(function (boxEl, index) {
  boxEls.classList.add(`order-${index + 1}`);
  console.log(index, boxEl);
});

const boxEl = document.querSelector('.box');

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // box의 내용 반환

// Setter, 값을 지정하는 용도
boxEl.textContent = 'Hello!';
console.log(boxEl.textContent); // Hello!

메소드 체이닝 (Method Chaining)

메소드를 체인처럼 이어서 만드는 것

const a ='Hello';
// split : 문자를 인수 기준으로 쪼개서 배열로 전환
// reverse : 배열을 뒤집기
//join : 배열을 인수 기준으로 문자로 변합해 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝

console.log(a); // Hello
console.log(n); // olleH

dash-case(kebab-case)

hello-yello-green-apple 단어 사이에 '-'를 사용하는 방식 HTTML, CSS에서 주로 사용

snake_case

hello_yello_green_apple 단어 사이에 '_'를 사용하는 방식 HTTML, CSS에서 주로 사용

camelCase

helloYelloGreenApple 첫 번째 단어를 제외하고 단어 앞 글자에 대문자를 사용하는 방식 JS에서 주로 사용

ParcelCase

HelloYelloGreenApple 단어 앞 글자에 대문자를 사용하는 방식 JS에서 주로 사용

Zero-based Numbering

0 기반 숫자 매기기 특수한 경우를 제외하고 0부터 숫자를 시작한다.

데이터 종류 (자료형)

String (문자데이터)

따옴표를 사용한다.

let myName = "pond_98";
let hello = 'Hello ${myName}';

console.log(myName); // pond_98
console.log(hello); // Hello pond_98

Number (숫자 데이터)

정수 및 부동소수점 숫자를 나타낸다.

let number = 123;
let opacity = 1.23;

console.log(number); // 123
console.log(opacity); // 1.23

Boolean (불린 데이터)

true, flase 두 가지 값밖에 없는 논리 데이터

let checked = true;
let fake = false;

console.log(checked); // true
console.log(fake); // false

Undefined

값이 할당되지 않은 상태를 나타낸다.

let undef;
let obj = { abc: 123 };

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.def); // undefined

Null

어떤 값이 의도적으로 비어있음을 의미한다

let empty = null;

console.log(empty); // null

Object (객체 데이터)

여러 데이터를 Key:Value 형태로 저장한다.

let user = {
  // Key: Value,
  name: 'Pond_98',
  age: 27,
  isValued: true
};

console.log(user.name); // Pond_98
console.log(user.age); // 27
console.log(user.isValued); // true

Array (배열 데이터)

여러 데이터를 순차적으로 저장한다.

let fruits = ['Apple', 'Banna', 'Cherry'];

console.log(fruits[0]); // 'Apple'
console.log(fruits[0]); // 'Banna'
console.log(fruits[0]); // 'Cherry'

변수

데이터를 저장하고 참조(사용)하는 데이터의 이름 ex) var, let, const

// 재사용 가능
// 변수 선언
let a = 2;
let b = 5;

console.log(a + b); // 7
console.log(a - b); // -3

// 값(데이터)의 재할당 가능
let a = 2;
console.log(a); // 2

a = 15;
console.log(a); // 15

// 값(데이터)의 재할당 불가
const a = 2;
console.log(a); // 2

a = 15;
console.log(a); // 에러 발생

예약어

특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

let this = 'Hello'; // SyntaxError
let if = 123; // SyntaxError
let break = true; // SyntaxError

함수 (function)

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

// 함수 선언
function helloFunc() {
  // 실행 코드
  console.log(123);
}

// 함수 호출
helloFunc(); // 123

function returnFunc() {
  return 123;
}

let a = returnFunc();

console.log(a); // 123

function sum(a, b) { // a와 b는 매개변수(Parameters)
  return a + b;
}

// 재사용
let a = sum(1, 2); // 1과 2는 인수(Arguments)
let b = sun(5, 7)

console.log(a, b) // 3, 12

// 기명(이름이 있는) 함수
// 함수 선언
function hello() {
  console.log('Hello')
}

// 익명(이름이 없는) 함수
// 함수 표현
let world = function() {
  console.log('World')
}

// 함수 호출
hello() // Hello
world() // World

// 객체 데이터
const myData = {
  name: 'Pond_98'
  age: 27,
  // 메소드(Method)
  getName: function() {
    return this.name
  }
};

const hisName = myData.getName();
console.log(hisName); // Pond_98
console.log(myData.getName()); // Pond_98

조건문

조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문

let isShow = true;
let checked = false;

if (isShow) { // if문이 참이기에 아래 코드 실행 
  console.log('Show'); //show
}

if (chekced) { // if문이 거짓이기에 아래 코드 미실행
  console.log('Chekced');
}

let isShow = true;

if (isShow) { 
  console.log('Show'); //show , isShow가 참이기에 해당 코드 실횅
} else {
  console.log('Hide'); // 만약 isShow가 거짓이면 해당 코드 실행
}