2024. 09. 11 UIUX 웹 38일차

## 능력단위평가시험_부분모작

- HTML / CSS / JS 기능 사용

- JS_67~68강 필수

- 69강은 선택 

- 14:00-16:00 부분모작 연습

- 17:00-16:50 부분모작 시험

 

 

폰트어썸에서 아이콘 아무거나 불러와서 좌측에 로고 우측에 아이콘

---

## 능력단위평가시험_부분모작 64강 JS

 방법1) 64강_코드펜

XWMOyKy

 

 

방법2) 64강_코드펜

ExWrOvJ

 

 

---

## 능력단위평가시험_부분모작 65강 JS

---

 

## 능력단위평가시험_부분모작 66강 JS

---

## 능력단위평가시험_부분모작 67강 JS

67강_문제

67강_정답예시

67강_정답

67강_반응형 모바일 메뉴 1구현, 작업 4 클릭시 사이드바 노출시 콘텐트가 화면 우측에서 나옴

 

---

## 능력단위평가시험_부분모작 68강 JS

68강_문제

68강_정답예시

68강_정답

68강_반응형 모바일 메뉴 1구현, 작업 5, 닫기 버튼, pc화면에서 사이드바 숨기기

 

---

## 능력단위평가시험_부분모작 69강 JS

69강_문제

69강_정답예시

69강_정답, 단계 1, BEM, 격리

69강_ 정답, 단계 2,메뉴 마크업

69강_ 정답, 단계 3, not, only child

69강_ 정답, 단계 4, 반투명 배경중첩

69강_ 정답, 단계 5, 아이템 클릭시 active 토글

69강_ 정답, 단계 6, n차 메뉴 아이템에도 이벤트

69강_ 정답, 단계 7, 클릭시 활성화된 형제 active  제거

69강_ 정답, 단계 8, 클릭시 활성화된 형제의 후손들에 active 제거

69강_ 정답, 단계 9, 활성된 아이템 클릭시, 해당 아이템의 후손에 active 제거

69강_ 정답, 단계10, 모바일 메뉴 박스 끄고, 켜는 기능 구현

69강_ 정답, 단계 11, 모바일 메뉴 박스를 끌 때, 모든 active 제거

69강_ 정답, 단계 12, 기존소스에 병합, overflow-y-auto

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 1, BEM, 격리

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 2, 메뉴 마크업

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 3, not, only-child 

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 4, 반투명 배경중첩

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 5, 아이템 클릭시 active 토글

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 6, n차 메뉴 아이템에도 이벤트

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 7, 클릭시 호라성화된 형제 active 제거

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 8, 클릭시 활성된 형제의 후손들에 active제거

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 9, 활성된 아이템 클릭시, 해당 아이템의 후손에 active 제거

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 10, 모바일 메뉴 박스 끄고, 켜는 기능 구현

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 11, 모바일 메뉴 박스를 끌때, 모든 active 제거

 

69강_반응형 모바일 메뉴1 구현, 작업6, 3차메뉴, 단계 12, 기존소스에 병합, overflow-y-auto

 

---

* inset : top-0 left-0 right-0

* overflow-y 넘침의 차이

  ㄴoverflow-hidden 스크롤바가 절대 안나옴

* JS에서 hide 실행할 때 addClass를 removeClass로 변경 해줌