>>iframe
html안에 html을 넣는다고??
>> 탭 구조
무언가 관련된 것들이 그룹핑이 되어있고, 탭을 하면 해당 영역으로 변경되는 것
컨텐츠가 들어가는 영역을 미리 텅빈상태로 만들어놓고 탭이 활성화 됐을때 탭과 관련된 내용이 보여진다.
>> transform
확대,축소,회전시킬때 사용하는 css코드래
-webkit 붙이는건 다른 브라우저랑 호환성땜에 쓸때가 있는 것
>> wrap
wrap은 왜 감싸는거지?
>>swiper.js
좌우/ 위아래로 흘러가는 슬라이더를 만들때 가장 많이 사용되는 플러그인 중 하나
스크립트를 복사해와서 아래 script문법을 이용할 예정
스와이퍼를 사용하려면 스와이퍼에서 제공하는 css랑 자바스크립트 파일 필요
>> 탭 구조
- 탭 구조에 대한 이해
네이버 우측 하단에 보면 "트렌드쇼핑" 섹션이 있고 이 우측에 상품, 쇼핑몰, MEN 이라는 3개의 메뉴가 존재합니다. 이 메뉴는 비활성화된 메뉴를 클릭했을때 하단의 컨텐츠 영역을 바꿔주는 역할을 합니다.
이처럼 N개의 버튼과 1개의 컨텐츠 영역을 가진 구조를 "탭 구조" 라 합니다. 요약하면 다음과 같아요.
—-----------------------------
원래는 클래스에 on을 추가하거나 그런 식으로 활성화 시켰는데
aria-selected 가 true일 때 적용할, css를 지정해주어도 된다.
이런식으로!!
>> 함수 생성하는 방법
| const function1 = function(){ } const function2 = () => { } |
functio1 과 function2 함수를 만든 방법인데
내부적으로 약간 다르긴 하지만 거의 같게 사용한다고 함
>> 어떤 컨텐츠를 보여줄건지 설정하는 js 부분
| // shop_content안에 있는 3개인 shop_content 들을 의미함 const $content = $contents.children(".shop_content"); // content 불러 오는 함수 // type을 받는데 이 type이 3가지 타입으로 들어올 것 const callContent = (type) => { switch (type) { case "tab_product": $content.hide(); //첫번째를 보여주고 $content.eq(0).show(); break; case "tab_mall": $content.hide(); //두번째를 보여주고 $content.eq(1).show(); break; case "tab_men": $content.hide(); //세번째를 보여준다. $content.eq(2).show(); break; } }; |
>> tap 예제
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 제이쿼리 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <title>Document</title> <style> .tab-link { display: inline-block; cursor: pointer; } .tab-content { display: none; } .tab-content.on { display: block; } </style> </head> <body> <a class="tab-link on" data-type="tab-1">첫번째 탭</a> <a class="tab-link" data-type="tab-2">두번째 탭</a> <a class="tab-link" data-type="tab-3">세법째 탭</a> <hr /> <div id="tab-1" class="tab-content on">첫번째 탭 내용</div> <div id="tab-2" class="tab-content">두번째 탭 내용</div> <div id="tab-3" class="tab-content">세번째 탭 내용</div> <script> // tab-link 라는 것에 click을 하면 $('.tab-link').click(function () { // 해당 태그의 data-type이라는 어트리뷰트 값을 가져온다. (tab-1를 가져올 것) var tab_id = $(this).attr('data-type'); //tab-link의 on을 모두 다 삭제한다. $('.tab-link').removeClass('on'); //tab-contentd에 있는 on을 모두 다 삭제한다. $('.tab-content').removeClass('on'); // 현재 클릭한 탭 링크 버튼에 on클래스를 추가해주고 $(this).addClass('on'); //tab_id를 가진 블록을 선택해서 거기 addclass를 해서 클래스를 부여해줌 $('#' + tab_id).addClass('on'); }); </script> </body> </html> |
spa (single page application)
>> 체크리스트
> mpa spa 차이
> js spa 에서 헤쉬 라우팅이 필요한 이유
> 공유된 코드를 참조하여 js로 spa routing을 구현할 자신이 있다
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [js] 리액트 들어가기전 꼭 알아야되는 ES6 문법 복습 (0) | 2022.12.04 |
|---|---|
| [드림코딩] 유투브 드림코딩 보면서 자바스크립트 기초 다시 한번 훑기~! (0) | 2022.12.02 |
| [스파르타-깃허브] 2주차 강의 내용정리 (0) | 2022.11.16 |
| [css] CSS 트렌지션 (0) | 2022.11.15 |
| [스파르타-웹퍼블리셔] 웹퍼블리셔 2주차 강의 정리 (0) | 2022.11.15 |
댓글