제발 제 코드에 훈수하세요

다음은 슬라이드 쇼처럼 넘어가는 slider부분이다

이는 main이라기보다는 aside에 가깝다

퀵메뉴처럼 활용 되고 있기 때문이다

우리는 동적인 부분을 제외한 나머지를 만들기로 했기 때문에 슬라이드 부분은 한 개의 메뉴만 만들도록 하겠다.

먼저 수정한 부분이 조금씩 있다.

원래 있던 html문서에서 slider부분을 main 밖으로 빼고 header밑에 div태그로 감쌌다. 

또한 한 장면만 할 것이므로 문장과 a태그를 하나씩만 넣었다.

    </header>
  </div>
 <!--header 밑에-->
  <div id="slider"><!--slider전체의 공간을 주기위해 div로 감쌌다.-->
    <h3 class="hidden">슬라이더 메뉴</h3>
      <div><!---->
        <p>이미지에서 텍스트를 인식하는 기술<br />클로바OCR</p>
        <a href="https://clova.ai/speech" target="_blank">자세히 보기</a>
        <video loop muted preload="auto" autoplay style="width:100%">
          <source src="https://static-clova.pstatic.net/static/public/video/CH_OCRmain.mp4" type="video/mp4">
<!--video의 소스는 네이버 클로바에서 가져온것이다. 배경이 비디오 이므로 video태그를 이용해 자동 재생하도록 하였다.-->
        </video>
      </div>
  </div>
 <!--main 위에-->
 <main>
    <section>
      <h2 class="hidden">본문</h2>

작업 전

밑의 작업 후 와 비교해볼 때 어떤 속성을 적용해야 할지 생각해보자

1. slider의 공간이 생겼다

=> 기본 공간, margin, padding을 조사하고 값을 적용해 준다.

2. 공간들의 위치를 지정해 준다. 비디오 안에 텍스트가 들어가 있다.

=> margin 또는 padding으로 가능한 것은 그것으로 지정해준다.

그 외의 것은 position을 적용해준다.

3. 텍스트 색, 크기, 간격이 적용되었다. 테두리가 적용되었다.

=> color, font-size, letter-spacing, text-align, line-height , border를 지정해준다.

4. 자세히 보기에 마우스를 갖다 대면 배경색이 바뀐다. 하단의 메뉴 바를 클릭하면 배경색이 바뀐다.

=> a:hover를 이용하여 바꾸어 주도록 한다.

=> a:visited를 이용하여 바꾸어 주도록 한다.

     background-color 

5. 하단의 메뉴 바의 위치를 지정해 준다.

=> 각각의 메뉴들이 서로 동일하게 떨어져 있고 배경은 동일하게 가지고 있다.
    따라서 각각의 메뉴에 id값을 주어 margin값을 준다.

작업 후

원본과 비교

id값 지정 및 선택자 적기 

hmtl의 slider부분

  <div id="slider">
    <h3 class="hidden">슬라이더 메뉴</h3>
    <div>
      <p>이미지에서 텍스트를 인식하는 기술<br />클로바OCR</p>
      <a href="https://clova.ai/speech" target="_blank">자세히 보기</a>
      <video loop muted preload="auto" autoplay style="width:100%">
        <source src="https://static-clova.pstatic.net/static/public/video/CH_OCRmain.mp4" type="video/mp4">
      </video>
      <div id="menus">
        <a href="#" id="menu1"></a>
        <a href="#" id="menu2"></a>
        <a href="#" id="menu3"></a>
        <a href="#" id="menu4"></a>
        <a href="#" id="menu5"></a>
      </div>
    </div>
  </div>

css의 slider부분

/*slider*/
#slider {}
#slider div p {}
#slider div a {}
#slider div a:hover {}
/*하단의 메뉴바*/
#slider div div a {}
#slider div div a:visited {}
#menu2 {}
#menu3 {}
#menu4 {}
#menu5 {}

1. & 2. slider의 공간이 생겼다. 공간들의 위치를 지정해 준다. 비디오 안에 텍스트가 들어가 있다.

작업 후

이미지를 video태그 안에 넣고 제일 우선으로 보이게 하기 위해 새로운 속성을 배우게 되었다.

/*slider*/
#slider {
  width: 100%
}
#slider video{
  vertical-align: middle;
}
#slider div p {
  width: 560px;
  position: absolute;
  top: 248px;
  left: 674px;
  z-index: 1;
}
#slider div a {
  display: block;
  width: 141px;
  height: 50px;
  position: absolute;
  top: 387px;
  left: 880px;
  z-index: 1;
}
#slider div a:hover {}

/*하단의 메뉴바*/
#slider div div a {
  display: block;
  width: 40px;
  height: 1px;
  position: absolute;
  top: 640px;
  left: 831px;
  z-index: 1;
}
#slider div div a:visited {}
#menu2 {}
#menu3 {}
#menu4 {}
#menu5 {}

작업 내용(모든 공간들은 원본 페이지에서 참고할 수 있다.)

1. width와 height를 사용하여 기본 공간을 지정해 주었다. (a요소에 공간을 지정하려면 display:block;잊으면 안 된다.)

2. 비디오 태그 안에 텍스트를 넣기 위해서는 margin을 사용할 수 없었다
   margin을 사용하면 텍스트들이 비디오 밖으로 튀어 나가기 때문이었다.
   따라서 #slider div p, #slider div a, #slider div div a에 각각의 position과 그 값을 주었다.

3. vertical-align을 사용하여 video태그 밑의 공간을 없애 주었다.
   높이가 따로 정해져 있지 않고 나중에 나올 하단 메뉴바의 테두리 공간이 div태그의 공간을 차지하기 때문에
   video 밑으로 빈 공간이 튀어나온다. vertical-align으로 인라인 요소를 중간으로 잡아주어 그것을 방지한다.
4. 여기서 새로 배운 z-index를 활용한다.
   z-index란 레이어 들에게 순서를 정해주는 속성이다.
   ex) video레이어와 text레이어의 순위를 조절해서 video안에 text를 집어 넣었다.

3. & 4. 텍스트 색, 크기, 간격이 적용되었다. 테두리가 적용되었다. 자세히 보기에 마우스를 갖다 대면 배경색이 바뀐다. 하단의 메뉴 바를 클릭하면 배경색이 바뀐다.

작업 후

거의 완성되어 간다.ㅎ

/* slider */
#slider {
  width: 100%;
}
#slider div p {
  width: 560px;
  letter-spacing: -5px;
  position: absolute;
  top: 248px;
  left: 674px;
  color: #fff;
  font-weight: 900;
  font-size: 39px;
  text-align: center;
  z-index: 1;
  font-family: sans-serif;
}
#slider div a {
  display: block;
  width: 141px;
  height: 50px;
  border: 1px solid #fff;
  border-radius: 28px;
  position: absolute;
  top: 387px;
  left: 880px;
  z-index: 1;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
}
#slider div a:hover {
  background-color: rgb(73, 231, 146);
  border: 1px solid rgba(228, 230, 202, 0);
}
#slider div div a {
  display: block;
  width: 40px;
  height: 1px;
  position: absolute;
  top: 640px;
  left: 831px;
  z-index: 1;
  background-color: rgba(119, 116, 116, 0.5);
  border: 1px solid rgba(252, 252, 247, 0);
}
#slider div div a:visited {
  background-color: #fff;
  border: 0;
}
#menu2 {}
#menu3 {}
#menu4 {}
#menu5 {}

작업내용

1. 헤더의 배경색을 임의로 바꾸었다. 아쉽게도 헤더를 배경과 겹치게는 하지 못하였다.
2. color와 font-size, font-weight, font-famliy를 이용하여 글자의 색과 크기, 굵기, 글꼴을 바꾸어 주었다.
   p, a에 각각 적용
3. text-align과 line-height를 이용하여 글자들을 중앙 정렬해 주었다.
4. border와 border-radius를 이용해 자세히 보기에 테두리를 적용해 주었다.
   또한 하단의 메뉴바에도 테두리를 적용해 주었다.
5. a:hover와 a:visited 선택자를 이용해 각각의 a태그에 마우스를 갖다 대거나 클릭했을 때
   배경색(background-color)과 테두리(border)를 바꾸어주었다.

5. 하단의 메뉴 바의 위치를 지정해 준다.

작업 후

완성이다.

#slider div div a {
  display: block;
  width: 40px;
  height: 1px;
  position: absolute;
  top: 640px;
  left: 831px;
  z-index: 1;
  background-color: rgba(119, 116, 116, 0.5);
  border: 1px solid rgba(252, 252, 247, 0);
}
#slider div div a:visited {
  background-color: #fff;
  border: 0;
}
#menu2 {
  margin-left: 50px;
}
#menu3 {
  margin-left: 100px;
}
#menu4 {
  margin-left: 150px;
}
#menu5 {
  margin-left: 200px;
}

작업 내용

1. 원래 겹쳐져 있던 menu바들에게 margin-left값을 적용해 주어 서로 떨어지게 끔 만들었다. 

slider부분을 마무리해 보았다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바