word-break

<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;를 통해 하단 메뉴가 보여지게 된다.