[카테캠 선택강의] 섹션과 푸터 만들기

섹션을 만드는 레이아웃은 다음과 같다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

Video 태그

 

 

주로 사용하는 속성

autoplay

자동 재생 여부를 정할 수 있다.

 

controls

소리조절, 일시 정지 , 재시작을 할 수 있는 컨트롤러를 제공한다.

 

loop

루프를 true 설정하면 비디오가 반복재생된다.

 

muted

음소거를 설정할 것인지 여부를 정할 수 있다.

 

src

삽입할 동영상의 주소를 명시한다.

 

 

mask-image

비디오 태그의 영상을 사각형 형태로 출력이 된다.

하지만 아래 아이패드 레이아웃은 살짝 기울여져 있기 때문에 검은 영역이 튀어나오는 현상이 발생한다.

 

 

 

mask-image 를 사용하면 문제를 해결할 수 있다.

다음처럼 살짝 아이패드 영역에 맞게 기울여진 영역을 mask-image 로 사용하면 해당 영역에 비디오가 출력된다.

 

 

 

can I use 에서 살펴보면 크롬브라우저에서는 -webkit- 벤더프리픽스를 사용하면 해당 CSS 를 사용할 수 있다.

 

 

 

사파리에서는 별도의 벤더프리픽스 없이 표준기술로써 사용이 가능하다.

 

 

 

따라서 아래처럼 표준기술인 브라우저와 시범기술인 브라우저에 적용하기 위해 각각 CSS 를 명시해주면 된다!

.camera .stage video {
  ...
  -webkit-mask-image: url('../images/camera_video_mask.png');
  mask-image: url('../images/camera_video_mask.png');
}

 

 

자바스크립트로 video 태그 제어하기

play( ) , pause( ) 메서드를 사용하면 video 태그를 제어할 수 있다.

const video = document.querySelector('.stage video');
const playBtn = document.querySelector('.stage .controller--play');
const pauseBtn = document.querySelector('.stage .controller--pause');

playBtn.addEventListener('click', () => {
  video.play();
  playBtn.classList.add('hide');
  pauseBtn.classList.remove('hide');
});
pauseBtn.addEventListener('click', () => {
  video.pause();
  playBtn.classList.remove('hide');
  pauseBtn.classList.add('hide');
});

 

 

 

자바스크립트 모듈화

main.js 에서 import 예약어를 사용하기 위해서는 script 를 type="module" 로 명시해주어야한다. 

<script defer type="module" src="./js/main.js"></script>

 

 

 

 

데이터 보간

데이터 보관 아닙니다. 데이터 보간입니다.

백틱을 사용하여 문자열에서 JS 변수의 값을 사용할 수 있습니다.

 colorList += `<li style="background-color: ${color};"></li>`;

 

 

 

 

vscode 하이라이팅 extenstion

JS 로 innerHTML 을 사용하여 데이터를 삽입할 때 코드하이라이팅이 되지 않는다.

 

 

 

위 익스텐션을 설치하면 주석을 사용하여 코드 하이라이팅을 지원 받을 수 있다.

 

 

 

 

바닐라 자바스크립트로 HTML 요소 추가하기

아래 코드는 section.compare .items 요소에 itemEl 를 추가하는 코드이다.

const itemsEl = document.querySelector('section.compare .items');
ipads.forEach(ipad => {
  const itemEl = document.createElement('div');
  itemEl.classList.add('item');

  let colorList = '';
  ipad.colors.forEach(color => {
    colorList += `<li style="background-color: ${color};"></li>`;
  });

  // VS Code 확장 프로그램 - Comment tagged templates
  itemEl.innerHTML = /* html */ `
    <div class="thumbnail">
      <img src="${ipad.thumbnail}" alt="${ipad.name}" />
    </div>
    <ul class="colors">
      ${colorList}
    </ul>
    <h3 class="name">${ipad.name}</h3>
    <p class="tagline">${ipad.tagline}</p>
    <p class="price">₩${ipad.price.toLocaleString('en-US')}부터</p>
    <button class="btn">구입하기</button>
    <a href="${ipad.url}" class="link">더 알아보기</a>
  `;

  itemsEl.append(itemEl);
});

 

 

 

box-shadow 다르게 사용하는 방법

box-shadow 에 inset 을 사용하면 그림자가 외부가 아닌 내부에 그려진다.

 box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);

 

 

 

 

toLocaleString

toLocaleString 을 사용하면 숫자에 , 를 표기할 수 있다.

 

 

 

 

 

미쳤다. 푸터

푸터 부분의 다음과 같은 UI 를 만드는 방법을 보고 오 했다.

 

 

왜 flex-direction: column 으로 값을 주고 flex-wrap: wrap 을 사용할 생각을 안해봤을까? 

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

특정 요소에 margin 또는 padding 값을 주어 다음 요소를 다음줄로 넘길 수 있다.

 

 

 

 

CopyRight

CopyRight 에 사용되는 년도는 JS Date 클래스를 사용하는 것이 갱신이 되기 때문에 편리하다.

<div class="copyright">
  Copyright ©
  <span class="this-year"></span>
  Apple Inc. 모든 권리 보유.
</div>

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

 

 

 

 

main 태그

이미지가 큰 경우 다음처럼 레이아웃을 초과하는 경우가 발생한다.

 

이러한 경우 main 태그를 사용하여 튀어나가는 요소들을 overflow-x: hidden 으로 잘라줘야한다.

main {
    overflow-x: hidden;
}