# 메타브레인 **[사이트 바로가기](https://metabrain.com/)** ## 상단바 ### 0단계: 세팅 - [코드펜](https://codepen.io/ej-201/pen/OJKOxzP) ### 1단계: 기본적인 구조 및 커스텀 - [코드펜](https://codepen.io/ej-201/pen/wvVPrjM?editors=1000) ### 2단계: 메뉴 호버 커스텀 - [코드펜](https://codepen.io/ej-201/pen/BaXmwEz?editors=1000) ### 3단계: contact 호버 커스텀 - [코드펜](https://codepen.io/ej-201/pen/dyxZZXy?editors=1000) +) 질문 ![image.png](data:image/png;base64,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)
# 삼성웰스토리 **[사이트 바로가기](https://360fnbsolution.com/)** ## 상단바 ### 0단계: 세팅 - [코드펜](https://codepen.io/ej-201/pen/dyxVXRX) ### 1단계: 메뉴 빼고 - [코드펜](https://codepen.io/ej-201/pen/poMWbrq?editors=1100) ### 2단계: 2차메뉴 - [코드펜](https://codepen.io/ej-201/pen/rNXGLoa?editors=1000) ### 3단계: 2차메뉴 토글 - [코드펜](https://codepen.io/ej-201/pen/xxvXEwg?editors=1000) ㄴ 버튼 질문
# SK True Innovation **[사이트 바로가기](https://www.true-inno.com/ko/main.do)** ## PC 상단바 ### 0단계: 세팅 - [세팅](https://codepen.io/EONJENOG/pen/PoMpwLj?editors=1100) *** ### 1단계: 구조 - [pc 상단바 구조](https://codepen.io/EONJENOG/pen/qBerEwd?editors=1100) *** ### 2단계: 로고 - [pc 상단바 - 로고](https://codepen.io/EONJENOG/pen/PoMpwMJ?editors=1100) *** ### 3단계: 1차 메뉴 - [pc 상단바 - 1차 메뉴](https://codepen.io/EONJENOG/pen/mdNWJbm?editors=1000) *** ### 4단계: 사용자 메뉴 - [pc 상단바 - 사용자 메뉴](https://codepen.io/EONJENOG/pen/wvVJaKm) *** ### 5단계: 2차 메뉴 * [로고 사이즈 줄어드는 문제 해결 ](https://codepen.io/EONJENOG/pen/KKOWpoL) ㄴ max-w-[크기] 유틸리티를 img 태그에 적용 ```html

``` * 5-1) [2차 메뉴 아이템 하나 완성](https://codepen.io/EONJENOG/pen/zYgZGLq?editors=1000) * 5-2) [2차 메뉴 아이템 모두 적용](https://codepen.io/EONJENOG/pen/GRVWpNz?editors=1100) *** ### 6단계: 스크립트 적용 **<실패>** * 6-1) [1차 메뉴 아이템 하나 완성](https://codepen.io/EONJENOG/pen/NWQpGvP?editors=1000) * 6-2) [1차 메뉴 모두 적용](https://codepen.io/EONJENOG/pen/mdNWejY) * 6-3) [2차 메뉴 모두 적용](https://codepen.io/EONJENOG/pen/KKOWdjm) ㄴ 1차 메뉴 아이템에서 마우스가 벗어나면 2차 메뉴가 사라지는 오류 발생 **<질문>** * [질문](https://codepen.io/EONJENOG/pen/yLmMegv?editors=0110) ```js $(".top-menu-01").mouseenter(function () { $("header").addClass("on"); }); $(".top-menu-01").mouseleave(function () { $("header").removeClass("on"); }); /* $(".top-menu-01 > ul > li").mouseenter(function () { const $this = $(this); $this.find(' > a').addClass('on'); $this.find(' > .depth2').addClass('on'); }); $(".top-menu-01 > ul > li").mouseleave(function () { const $this = $(this); $this.find(' > a').removeClass('on'); $this.find(' > .depth2').removeClass('on'); }); */ ``` **<재도전-성공>** * 6-4) [2차 메뉴 모두 적용, 스크립트 최소화](https://codepen.io/EONJENOG/pen/wvVJMPd?editors=0010) **<실패>** * 6-5) [2차 메뉴 나올 때 배경 변화](https://codepen.io/EONJENOG/pen/gOVmrLo?editors=1100) ㄴ if 조건문만 따로 사용한다면 내가 원할 때 작동할 수 없다. **<재도전-성공>** * 6-6) [2차 메뉴 나올 때 배경 변화](https://codepen.io/EONJENOG/pen/JjgWvQP?editors=0010) * 추가연습) [2차 메뉴 배경 calc 사용해보기](https://codepen.io/EONJENOG/pen/wvVJXBp?editors=1000) **<설명>** * [코드펜 바로가기](https://codepen.io/EONJENOG/pen/jOgBWRK?editors=1000) *** ### 7단계: fixed 적용 및 디테일 수정 * 7-1) [fixed 적용](https://codepen.io/EONJENOG/pen/KKOWegr?editors=1000) ㄴ 검은 배경 fixed에 inset-0을 적용하면 fixed가 header 위로 올라오는 문제 발생 ㄴ left-0 right-0 height-100dvh로 문제 해결 ㄴ fixed는 높이가 화면을 벗어나도 스크롤이 생기지 않는다. * 7-2) [2차 메뉴 아이템 간격 조정](https://codepen.io/EONJENOG/pen/GRVWGLG?editors=1000) *** ### 8단계: 반응형 적용 * 8-1) [1차 메뉴 a태그 높이 상속 받도록 변경](https://codepen.io/EONJENOG/pen/vYoxaEj?editors=1000) ㄴ 기존의 py값을 제거하고 div에 flex h-full 적용 * 8-2) [반응형 적용](https://codepen.io/EONJENOG/pen/abeJjeK?editors=1000) * 8-3) [해상도 커스텀-3xl](https://codepen.io/EONJENOG/pen/MWNpqKE?editors=1000) * 8-4) [브레이크 포인트 xl 추가](https://codepen.io/EONJENOG/pen/eYqvLeK?editors=1000)
## 모바일 상단바 ### 1단계: 구조 * 9-1) [구조잡기](https://codepen.io/EONJENOG/pen/OJKpoEW?editors=1000) *** ### 2단계: 버튼 * 10-1) [hover를 활용하여 버튼 커스텀](https://codepen.io/ej-201/pen/wvVdGar?editors=1100) * 10-2) [스크립트 사용](https://codepen.io/ej-201/pen/KKOmzWG?editors=1100) *** ### 3단계: 분기점 * 11-1) [반응형 브레이크 포인트](https://codepen.io/ej-201/pen/JjgNXrY?editors=1000) ㄴ con에 min-width 적용
## 모바일 사이드바 ### 1단계: 사이드바 헤더 * 12-1) [사이드바 헤더](https://codepen.io/ej-201/pen/mdNmPKB?editors=1000) ㄴ 버튼 이름 변경 (.top-bar_btn-open -> .top-bar-btn) ㄴ 스크립트 적용 완료 * 12-2) [분기점](https://codepen.io/ej-201/pen/oNKWLXe?editors=1000) *** ### 2단계: 사이드바 바디 * 13-1) [사이드바 바디 배경](https://codepen.io/ej-201/pen/WNVjxQW?editors=1000) ㄴ 스크립트 적용 완료 * 13-2) [사이드바 구조, hover로 작동 실험](https://codepen.io/ej-201/pen/QWevEML) * 13-3) [스크립트 적용](https://codepen.io/ej-201/pen/LYwyZMr?editors=1100) ㄴ 형제가 on 될 경우 on 해제까지 적용 완료 * 13-4) [텍스트 수정](https://codepen.io/ej-201/pen/xxvdONW?editors=0110) ㄴ 2차메뉴아이템 hover까지 적용 완료
**<실패>** * 13-5) [2차메뉴 트랜지션](https://codepen.io/ej-201/pen/ExqmgaE?editors=1000) ㄴ height: 100%를 사용했기 때문. ㄴ px을 적용하면 원하는 트랜지션을 적용할 수 있다.
* 13-6) [스크립트 다시 적용 후 반응형](https://codepen.io/ej-201/pen/RwXVGgb?editors=1000) * 13-7) [반응형 전반적인 트랜지션](https://codepen.io/ej-201/pen/GRVmjdp?editors=1000) ㄴ 사이드메뉴 좌측 패딩값 적용 * 13-8) [2차메뉴 트랜지션 재도전](https://codepen.io/ej-201/pen/dyxWpQb?editors=1100) ㄴ 각각의 ul에 클래스명을 달아 아이템 수에 따라 높이를 다르게 지정. (item-02, item-03) ㄴ 사이드메뉴가 닫히면 활성화 되었던 아이템 inactive 적용 (MobileSideMenu__inactive) * 13-9) [스크립트 정리](https://codepen.io/ej-201/pen/yLmbVVQ) ***
## !!!상단바 완성 [상단바 완성](https://codepen.io/ej-201/pen/dyxWOzX) ***
## 메인 섹션 1 ### 0단계: 세팅 - [세팅](https://codepen.io/ej-201/pen/OJKmbxz?editors=1100) *** ### 1단계: 구조잡기 - 1-1) [섹션1 구조](https://codepen.io/ej-201/pen/bGXWBaM?editors=0100) ㄴ 반응형 폰트 설정하기 [GPT 설명 바로가기](https://chatgpt.com/share/670f8945-9fe4-800b-aae8-4b9683217280) ㄴ fontSize: {'responsive': 'clamp(24px, 6.25vw, 100px)',} ㄴ 반응형 적용 완료 - 1-2) [아이콘 추가](https://codepen.io/ej-201/pen/NWQjEOK?editors=1100) - 1-3) [아이콘 애니메이션 01](https://codepen.io/ej-201/pen/VwobVOG?editors=1100) ㄴ animation-fill-mode [GPT 설명 바로가기](https://chatgpt.com/share/6710a5a9-cd04-800b-be36-34461ae9640a) - 1-4) [아이콘 애니메이션 02](https://codepen.io/ej-201/pen/oNKWJvM?editors=1100) ㄴ transform: perspective(500px) [GPT 설명 바로가기](https://chatgpt.com/share/6710a667-47ec-800b-a375-6b9fa7224936) - 1-5) [아이콘 애니메이션 03](https://codepen.io/ej-201/pen/OJKmrJK?editors=0100) *** ### 2단계: 스크롤 아이콘 - 2-1) [스크롤 아이콘](https://codepen.io/ej-201/pen/MWNmZap?editors=1000) - 2-2) [스크롤 아이콘 애니메이션](https://codepen.io/ej-201/pen/LYwyMRg?editors=1000) *** ### 3단계: 반응형 높이 - 3-1) [반응형 높이](https://codepen.io/ej-201/pen/LYwyMyX?editors=1100) ㄴ 미디어쿼리 사용 [GPT 설명 바로가기](https://chatgpt.com/share/6710ad3d-3ba0-800b-b45c-61724857f13f) ㄴ 섹션 1 완성 ***
## 상단바 + 섹션 1 [상단바+메인섹션1](https://codepen.io/ej-201/pen/OJKmrzy?editors=1100) ㄴ 상단바 z-인덱스 수정 완료 ***
## 메인 섹션 2 ### 4단계: 구조잡기 - 4-1) [섹션2 구조](https://codepen.io/ej-201/pen/WNVjLyp?editors=1000) ㄴ 제목까지 반응형 커스텀 완료 - 4-2) [스와이퍼 전반적 구조](https://codepen.io/ej-201/pen/jOgmXXL?editors=1010) - 4-3) [스와이퍼 슬라이드 구조-텍스트](https://codepen.io/ej-201/pen/poMPGeZ?editors=1000) ㄴ big title 이 2줄만 나올 수 있도록 적용 ``` css .big-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } ``` - 4-4) [스와이퍼 슬라이드 구조-이미지](https://codepen.io/ej-201/pen/xxvdBZE?editors=1000) - 4-5) [여백값 조정](https://codepen.io/ej-201/pen/poMPYyM?editors=1000) *** ### 5단계: 컨트롤러 - 5-1) [컨트롤러](https://codepen.io/ej-201/pen/VwobRVd) - 5-2) [컨트롤러 활성화 숫자](https://codepen.io/ej-201/pen/XWvRGLg?editors=0010) ```css ``` *** ### 6단계: 슬라이드 내용 채우기 **<실패>** - 6-1) [슬라이드 2](https://codepen.io/ej-201/pen/qBemwWY?editors=0100) ㄴ swiper-slide의 클래스명을 변경하여 오류발생 **<재도전-성공>** - 6-2) [슬라이드 내용 변경](https://codepen.io/ej-201/pen/ZEgKZYe?editors=0010) ㄴ 내용변경 성공 ㄴ 그러나 화면을 줄일 때 옆의 슬라이드 내용이 보이는 오류 발생 -> 오류가 아니라 슬라이드의 한계임.
- 6-3) [슬라이드 애니메이션 변경](https://codepen.io/ej-201/pen/gOVRmwN?editors=1100) ㄴ [스와이퍼 수업페이지 - 10강](https://www.slog.gg/p/13722#f) ㄴ fade 효과를 적용했을 때 다음 슬라이드의 nav가 겹쳐보이는 오류 발생 - 6-4) [슬라이드 fade효과](https://codepen.io/ej-201/pen/YzmQVzz) ㄴ nav > ul 도 커스텀하여 해결 ㄴ 테일윈드로 변경하여 css 최소화 - 6-5) [슬라이드 fade효과 완성](https://codepen.io/ej-201/pen/WNVOjGZ?editors=1100) ㄴ img도 커스텀하여 해결 ***
## 상단바 + 섹션 1 + 섹션 2 (반응형X) [코드펜](https://codepen.io/ej-201/pen/WNVOjMz) ㄴ 탑바 배경색 넣음 ㄴ 나중에 합칠 때 config 잘 확인하기 ***
### 7단계: 슬라이드 반응형 - 7-1) [재배열](https://codepen.io/ej-201/pen/oNKwWZN?editors=1000) ㄴ 컨트롤러 제외 배치, 텍스트 반응형 적용 - 7-2) [컨트롤러, 이미지 재배열](https://codepen.io/ej-201/pen/WNVOOxL?editors=1000) ㄴ 슬라이드 1 적용 - 7-3) [슬라이드 반응형 모두 적용](https://codepen.io/ej-201/pen/YzmrwoB?editors=1000) ***
## 상단바 + 섹션 1 + 섹션 2 [코드펜](https://codepen.io/ej-201/pen/YzmrqXg?editors=1000) [aos 효과 적용](https://codepen.io/ej-201/pen/OJKxNby?editors=1000) ***

고언정 부분모작