3주차에 이어 4주차에서도 스타벅스 페이지 만들기 실습을 진행했다.
4주차 학습 일지
1. VISUAL SECTION
COMMON CSS
: 공통적으로 자주 쓰이는 스타일은 css파일을 따로 만들어두거나, 한 css 파일 내에서도 분리 시켜 작성해둔다.
: 보통 html에서 먼저 구조를 만들고 구조에 맞춰 css 스타일을 적용하기도 하지만,
반대로 미리 css에서 자주 쓰이는 선택자를 만들어두고 선택자에 맞게 html에다가 클래스를 추가해주기도 한다.
bootstrap
: ui 라이브러리, 이미 부트스트랩에 정의되어져있는 스타일을 가져와 클래스만 추가해서 사용할 수 있다.
gsap.js ANIMAITION - 시간차 두고 비주얼 요소 나타내기
gsap 라이브러리를 이용해서 애니메이션 적용하기
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
// .fade-in 요소에 순차적으로 1초동안 opacity: 1;을 적용하고 요소마다 시작 지연 시간을 지정
gsap.to(fadeEl, 1, {
delay: (index + 1) * .7, // 0,7, 1.4, 2.1, 2.8
opacity: 1
});
});
// 자바스크립트는 굉장히 많은 요소에 하나씩 처리하지 않고 반복적으로 처리한다. => 자동화
// 로직을 이용해 최대한 자동화 시켜주는 것이 중요하다.2. NOTICE SECTION
css를 활용한 html 요소의 정렬 방법
요소 사이에서 상호작용되는 구조를 잘 활용할 수 있어야한다.
flex-grow
: flex-items가 flex-container내에서 차지할 수 있는 공간의 정도
:flex-grow: 1;이면 아이템이 컨테이너 내에서 가질 수 있는 최대한의 너비를 가진다.
: 단, 형제인 아이템들이 모두flex-grow: 1;값을 가지면 1:1:1..의 비율로 공간을 나눠가지게 된다.align-items
: 플렉스 컨테이너의 교차축 정렬방법을 지정한다.
: 기본값은align-items: stretch;이라서 아이템에 높이값이 지정되어있지 않다면 컨테이너의 높이값만큼 늘어난다.
: 기본값인 stretch를 제외하고는 아이템의 높이값이 지정되지 않다면 아이템의 컨텐츠 크기만큼 가진다.
토글 기능 적용하기
/*
toggle 기능 만들기
# 요소가 보이고 안보이고 정도의 애니메이션은 자바스크립트로 클래스리스트만 제어하고 css로 처리해주는것을 권장
# gsap - css만으로는 한계가 있는 애니메이션을 편하게 제어하기 위해 사용 권장
*/
const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
const promotionToggleBtnIcons = document.querySelector('.toggle-promotion .material-icons');
let isHidePromotion = false;
promotionToggleBtn.addEventListener('click', function () {
isHidePromotion = !isHidePromotion; // 클릭할 때 마다 true/false 값을 반대로 바꿔줌
if (isHidePromotion) {
// 숨김 처리
promotionEl.classList.add('hide');
promotionToggleBtnIcons.textContent = 'download';
} else {
// 보이게 처리
promotionEl.classList.remove('hide');
promotionToggleBtnIcons.textContent = 'upload';
}
});
3. youtube 영상 삽입
youtube, vimeo 등 영상의 비율을 유지하면서 나타내기
<div class="container">
<div class="item"></div>
</div>.container {
width: 500px;
background-color: salmon;
}
.item {
width: 100%;
height: 0;
padding-top: 50%;
}
height크기를 지정하지 않으면 기본값을 auto로 정의되어서
가지고 있는 컨텐츠 크기 만큼만 height값을 가지게 된다.
.container에 height값을 지정하지 않고, .item의 height:0;으로 지정했을 때
높이가 0이기 때문에 화면에 아무것도 보이지 않는다.
이 때, .item에 padding-top:50%;를 지정했더니 도형이 나타났다..
padding-top, padding-right, padding-bottom, padding-left; 모두
부모요소의 너비에 대한 50%의 크기를 같는다고 한다. (부모요소의 높이 X)
이런 특징을 youtube, vimeo 처럼 비율이 중요할 때 사용한다고 한다.
youtube 영상은 보통 16:9 비율의 크기를 가지니까
100% : 56.25% = 16 : 9
.item의 padding-top: 56.25%;로 지정해 .container의 너비가 바뀌더라도
.item을 16:9의 비율로 유지할 수 있다.
온전히 스타일을 위한 요소는 최대한 css의 가상요소를 이용해서 해결하려고 한다.
여기서 영상은 제어를 할 수 있는 영상이 아닌, 배경으로 이용되어서 배경을 어둡게 처리 해준다.
youtube iframe api
youtube 영상을 삽입하는 방법 중
1. youtube 영상 주소에서 '공유 - 퍼가기' 혹은 '영상에서 오른쪽 클릭 - 소스코드 복사'방법으로
iframe 태그 소스 코드를 html에 붙여넣는 방법이 있지만
이 방법으로는 영상 출력만 가능하고 기능 제어를 해줄 수는 없다.
- youtube iframe api를 이용해 영상을 삽입하면 음소거, 자동재생, 반복재생 등 다양한 기능을 제어할 수 있다.
https://developers.google.com/youtube/iframe_api_reference?hl=ko
위 주소의 참조 문서에서 사용에 필요한 스크립트 소스를 확인 할 수 있다.
<!DOCTYPE html>
<html>
<body>
<!-- 재생될 영상의 iframe이 이 요소에 나타날거다. -->
<div id="player"></div>
<script>
// 스크립트 태그를 생성한다.
const tag = document.createElement('script');
// 생성한 스크립트 태그에 외부 라이브러리를 연결한다.
tag.src = "https://www.youtube.com/iframe_api";
//html 문서에 있는 여러개의 스크립트태그 중 첫 번째 스크립트 태그를 찾는다.
const firstScriptTag = document.getElementsByTagName('script')[0];
// 실제 html에 생성한 스크립트 태그를 넣어줄거다.
// 첫번째 스크립트 태그의 부모노드에 삽입한다. (생성한 스크립트 태그를, 첫번째 스크립트 태그 앞에)
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// onYouTubeIframeAPIReady라는 이름의 함수를 생성한다.
// 이 함수의 이름은 위에 삽입한 https://www.youtube.com/iframe_api 라이브러리에서 찾을 수 있도록 이미 정의된 이름이다.
/*
YT라는 객체에서 유튜브를 재생하는 Player라는 method가 실행된다.
첫번째 인수는 player라는 html 요소의 id값이 들어간다. id값이라고 #을 넣으면 안된다. <div id="plater"></div>
두번째 인수는 옵션이 들어간다.
유튜브를 재생하는 옵션에는 mute(음소거) 옵션이 없다.. 이를 보완해주기 위해서 아래에 mute()메소드를 실행한다.
*/
function onYouTubeIframeAPIReady() {
new YT.Player('player', {
videoId: 'An6LvWQuj_8', // 처음 재생할 유튜브 영상 id, id는 영상 주소의 마지막 부분을 확인하면 된다.
playerVars: { // 재생을위한 매개변수들
autoplay: true, // 자동 재생 유무
loop: true, // 반복 재생 유무, true일때는 반복 재생할 유튜브 영상 id 목록을 제공해줘야 한다.
playlist: 'An6LvWQuj_8', // 반복 재생할 유튜브 영상 id 목록
},
events: {
onReady: function (event) {
// * method: 객체 데이터에 할당된 함수
// 여기서 사용되는 동영상 플레어가 준비되면 이 함수(method)를 실행한다.
// event라는 인수를 사용할 수 있다.
// 동영상이 플레이되는 상황 자체를 데이터로 event라는 매개변수의 인수로 할당한다.
// 매개변수 event의 속성 중 target = 지금 재생되는 영상 그 자체
// mute라는 method를 실행한다. (음소거 기능)
event.target.mute()
}
}
});
}
</script>
</body>
</html>https://developers.google.com/youtube/player_parameters?hl=ko
위 주소에서 옵션으로 이용할 매개변수들의 종류도 더 확인 할 수 있다.
#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의 #React&Redux로시작하는웹프로그래밍
