5월24일 7일차 - 헤더 메뉴 구현하기, 슬라이드 활용하기

헤더의 메뉴와 자동슬라이드를 구현했습니다.

슬라이드 기능은 필수라고 생각하기 때문에 추가로 더 배우고 싶습니다.

[오늘 학습한 내용으로 구현한 사이트 화면입니다.]

---

hr은 문장과 문장 또는 컨텐츠와 컨텐츠 사이를 나눌때 사용합니다.
디자인적으로 이용하기 위해서는 bolder를 사용하는 것이 좋습니다.

---

클래스명을 _로 연결하는 것을 스네이크 케이스라고 합니다.
        <div class="top_banner">

---

#dddddd는 경계선에 사용되는 표준 색상입니다.
dd처럼 반복되는 경우에는 #ddd로 표현할 수 있습니다.
.header .top_banner {
  border-bottom: 1px solid #dddddd;
}

---

1200px의 박스는 클래스를 부여합니다.
          <ul class="container">

.header .top_banner .container {
  display: flex;
  justify-content: flex-end;
  width:1200px;
  margin: 0 auto;
}

---

inline의 높이를 조절할 때는 padding이 적용이 안됩니다. line-height를 이용합니다.
.header .top_banner {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
  line-height: 30px;
}

padding으로 조절하지 않고 line-height를 쓰는 이유는 blcok과 inline이 혼재되었을 때 높이 조절이 편리하기 때문입니다.
img에는 padding이 적용이 될 때, inline의 경우에는 padding이 적용이 안됩니다.
하지만 처음부터 line-height로 조절을 하면 block과 inline에 있어서 신경을 쓸 부분이 줄어들게 됩니다.

---

li를 만들 때 border-right를 주어 경계선을 만들 수 있습니다.
.header .top_banner li {
  border-right: 1px solid #ddd;
  padding: 0 10px;
}

---

bootstrap이 생기기 이전에는 2~3일이 걸려서 홈페이지를 만들었다면, 

bootstrap을 이용하고 난 뒤로는 하루만에 홈페이지를 만들 수 있게 되었습니다.
하지만 정해진 형식을 따라야 하기 때문에 홈페이지가 획일화 됩니다.

지금 목적은 bootstrap에 사용된 색상을 style로 추출해 이용하는 것입니다. 보기에 편안한 색상을 찾을 수 있습니다.
#dc3545;

---

색상은 변수에 담아 이용할 수 있습니다. (보통은 mc를 정합니다. mc는 메인컬러를 의미합니다.)
인터넷 익스플로러에서는 적용되지 않습니다.
색상을 변경하기 위해서 해당 색을 일일이 찾아 변경할 필요 없어집니다.
변수의 색깔만을 수정하면 모든 색깔을 바꿀 수 있어 편리합니다.
:root {
  --mc: #dc3545;
  --gc: #dddddd
}
.header .top_banner {
  border-top: 2px solid var(--mc);
  border-bottom: 1px solid var(--gc);
}
.header .top_banner li {
  border-right: 1px solid var(--gc);
}

---

rem : 기본 폰트사이즈를 html 에 넣어 이용하게 되면 나중에 모바일 웹페이지로 변경할 때 유용합니다. 
모든 폰트 사이즈를 기본 사이즈의 배율로 지정했기 때문에 html의 폰트사이즈만을 수정해 모든 폰트 사이즈를 변경할 수 있게 됩니다.
html {
  font-size: 20px;
}
rem은 html에서 정한 사이즈의 배율 단위입니다.
body {
  font-size: 0.8rem;
}
.header .top_banner {
  border-top: 2px solid var(--mc);
  border-bottom: 1px solid var(--gc);
  font-size: 0.65rem;
  line-height: 30px;
}

---

레이아웃에도 없어져도 전체 구조에 영향이 없는 부분은 따로 빼냅니다.
        <div class="top_banner">
          <ul class="container">
            <li>DK스틸 : 수입파이프 일반파이프 환봉SS41 S45C 주문생산</li>
            <li>
              <a href="">
                <i class="xi-pause"></i></li>
              </a>
          </ul>
        </div>

---

로고는 h1안에 넣습니다.
      <header class="header">
        <div class="container">
          <h1>
            <a href="">
              <img src="./img/logo.png" alt="">
            </a>
          </h1>
        </div>
      </header>

---

nav는 반.드.시 nav태그 안에 만듭니다. 중요합니다.
          <nav>
            <ul>
              <li><a href="">회사소개</a></li>
            </ul>
          </nav>

          <div class="top_link">
            <a href="">
              <i class="xi-bars"></i>
            </a>
          </div>

---

메뉴를 왼쪽에 있는 logo와 띄우기 위해서는 margin: 0 0 0 auto; 를 적용합니다.
.header nav {
  margin: 0 0 0 auto;
}

---

메뉴에서는 부모를 확실하게 잡아줍니다.
.header nav>ul
.header nav ul 이것도 상관은 없지만, 메뉴에는 많은 박스가 생기기 때문에 처음부터 정하고 가는 것입니다.

---

reset.css 에 빠진 내용이 있습니다.
img {
    vertical-align: middle;
}

---

메뉴 아이콘을 만듭니다. border-radius: 3px; 각진 부분을 둥글게 합니다.
.header i {
  font-size: 1.25rem;
  padding: 0.25rem;
  background: var(--gc);
  border-radius: 3px;
  margin: 0 0 0 1rem;
  vertical-align: middle;
}

---

가상요소 선택자 ::before 로 메뉴 사이의 경계선을 만듭니다.
.header nav > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0.6rem;
  background: var(--gc);
}

기준은 li 마다로 합니다.
.header nav > ul > li{
  position: relative;
}

위치는 position: absolute; 로 조절합니다.
.header nav > ul > li::before {
  content: "";
  position: absolute;
  inset: 50% auto atuo -0.75rem;
  width: 1px;
  height: 0.6rem;
  background: var(--gc);
  transform: translateY(-50%);
}

---

.header nav > ul > li~li::before {
~표시는 형제를 의미합니다. 자기자신을 뺀 형제 모두를 선택합니다.
입력하게 되면 제일 앞의 객체는 사라집니다.

---

슬라이드를 구현합니다. div 안에 생성하게 됩니다.
section엔 항상 이름을 줍니다.
        <section class="main_visual">
          <div class="main_slider">
            <figure>
              <img src="./img/main_bg01.jpg" alt="">
            </figure>
          </div>
        </section>

$(function () {
  $(".main_slider").slick({
    arrows: false,  // 화살표를 표시합니다. false
    autoplay: true,  // 자동으로 슬라이드가 실행됩니다. true
    pauseOnHover: false,  // 마우스를 얹었을 때 슬라이드가 멈춥니다. false
        pauseOnFocus: false,  // 마우스를 포커스 했을 때 슬라이드가 멈춥니다. false
  });
});

---

슬라이드 위의 글씨는 position: absolute; 로 나타냅니다.
.main_visual {
  position: relative;
}
.main_visual .slogan {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  text-align: right;
  color: #fff;
}

---

text-shadow는 글자에 그림자를 주는 방법입니다.
.main_visual .slogan {
  text-shadow: 0 0 2px var(--dc);
}

---

경계선은 가상요소 선택자로 만듭니다.
.main_visual .slogan h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  background: var(--wc);
  margin: 1rem 5px 0 auto;
}