2022.08.17. ~ 2022.08.18.
수업내용
풀페이지 맛보기
리액트는 자바스크립트를 기본으로 함
뷰는 따로 쓰는 언어가 있음
swiper는 자바스크립트(바닐라 자바스크립트: 플러그인이나 라이브러리를 사용하지 않은 순수한 자바스크립트)기반
fullpage 3.버전부터 자바스크립트 기반
자바스크립트는 객체, 배열 아주 중요!
fixed는 모바일에서 작동하지 않음 -> 플러그인 페럴렉스 사용가능
translateZ
* {
outline: 1px solid darkblue;
}
👉레이아웃은 레이아웃을 깨지 않음//
넘치는 거 잡기 쉬워서 반응형할 때 좋음
h2태그는 거진 섹션마다 타이틀이라는 개념으로 들어가줘야한다.
비포 애프터는 긁어서 읽어지지 않기 때문에 의미있는 텍스트는 들어가면 안된다.(도형, 특수문자 정도만 넣을 것)
그리드의 갭은 포함하고, 플렉스의 갭은 포함하지 않음
자식의 z-index는 부모의 z-index를 역전하지 못함
transform과 transrate 가 겹쳐있는 박스가 있다 -> 제트 인덱스가 높은 게 위로 올라옴
플렉스에도 z-index가 있음
#Premium .container figure::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 0px;
👉라벨 만들기 : box-sizing때문에 라벨모양이 만들어짐
border-top: 20px solid burlywood;
border-bottom: 20px solid burlywood;
border-left: 20px solid burlywood;
border-right: 20px solid transparent;
}원래는 a태그로 div박스를 싸지 않았는데, 요즘은 싸긴 함. 근데 인라인태그로 박스를 싸는 건 지양할 것.
h2 태그 : 타이틀 적는. h2태그 안에는 p태그와 div는 넣지 않는다.
p태그 안에도 인라인이 아닌 div 박스 는 넣지 않는다
address태그 필수 태그 아님
필수태그: h1, nav, header같은 거에 들어가는 시멘틱 태그(main은 필수 태그가 아님)
footer 아래쪽 패딩을 적게 잡는 건..안됨 = 라인하고 텍스트가 붙을 수 있기 때문!
document.querySelector('.to_top').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' })
}) 👉 behavior: 'smooth'가 안되면, 디스플레이가 없는 컴퓨터 사용에서 필요 없는 애니메이션 모두 끄기 부분 체크✔
엥간해서는 포지션 픽스드 위에 픽스드
✨숙제✨
윈도우 설정을 건드리지 않고 탑으로 가는 애니메이션 구현(라이브러리 도입하면 됨 - 트윈맥스, gsok : 이거 쓰면 하수)
풀페이지 3.대 버전은 유료여서 2.9.7버전 다운받아서 써야함
2.버전은 display: table이 되어 있고, 3.버전은 flex되어 있음
<body>
<header class="Header"></header>
<div class="main"> 👉 풀페이지는 섹션에 section이 꼭 들어가야함
<section class="section page01"></section>
<section class="section page02"></section>
<section class="section page03"></section>
<section class="section page04"></section>
<section class="section page05"></section>
<section class="section page06"></section>
</div>
<footer class="Footer"></footer>
</body>
📌풀페이지는
$(function () {
// fullpage
$('.main').fullpage({
anchors: ['page01', 'page02', 'page03', 'page04', 'page05', 'page06'],
navigation: true, 👉을 사용해서 메뉴바를 만드는 것보다는 html nav로 만드는 게 좋음 커스텀하기
});})$(function () {
var TXT = ['HOME', '01', '02', '03', '04', 'ysl']
// fullpage
$('.main').fullpage({
anchors: ['page01', 'page02', 'page03', 'page04', 'page05', 'page06'],
afterLoad: function (page, num) {
setTimeout(() => {
$('.section').eq(num - 1).addClass('on').siblings().removeClass('on');
}); 👉 풀페이지2.9.7은 첫페이지에 애니메이션이 붙지 않음. 그래서 setTimeout을 해서 딜레이를 두면 첫페이지에 애니메이션이 붙는 것처럼 보임
// document.querySelectorAll('.section').forEach(el => {
// el.classList.add('on')})
$('.Gnb li').eq(num - 1).addClass('on').siblings().removeClass('on');
$('.this_page').text(TXT[num - 1]);
// $('.this_page').text(page);
// $('.this_bg').css({
// backgroundPositionY: - 100 * (num - 1) + "px"
// });
// $('.this_pic img').attr({
// src: `./assets/img/lesedilarona0${num}.jpg`
// });
// $('.this_tp').css({
// backgroundImage: `url(./assets/img/lesedilarona0${num}.jpg)`
// })
},
});
// $('.Gnb li').
})'수업내용' 카테고리의 다른 글
| [javascript] 현대엘리베이터 실습_javascript (0) | 2022.09.20 |
|---|---|
| [수업내용] 현대엘리베이터 실습_jquery(feat. float) (0) | 2022.09.20 |
| [수업내용] 2022.08.16.(+스크롤이벤트) (1) | 2022.09.20 |
| [수업내용] 2022.08.11. ~ 2022.08.12. (0) | 2022.09.20 |
| [수업내용] 2022.08.09(+php) (0) | 2022.09.20 |
