2024. 09. 13 웹 UIUX 39일차

#능력단위평가 2단계

1단계_코드펜(정답)

1단계_코드펜

 

2단계_코드펜(정답)

2단계_코드펜

 

 

HTML)

<!-- 모바일 사이드바 시작 -->

- <div>태그에 mobile-side-bar 클래스 지정

-  mobile-side-bar에 md:hidden / fixed / inset-0 / z-50 / invisible / opacity-0 / text-black 지정

- mobile-side-bar안에 <div>태그 생성 후 mobile-side-bar__content 클래스 지정 

-  mobile-side-bar__content  안에 flex / flex-col / w-80 / h-full / bg-white / ml-auto 값  지정

- mobile-side-bar__content안에 <div> 태그 생성 후 mobile-side-bar__head 클래스 지정

- mobile-side-bar__head 안에  flex-shrink-0 p-3 값 지정 

- mobile-side-bar__head안에 <div> 태그 생성 후 mobile-side-bar__btn-close 클래스 지정

- mobile-side-bar__btn-close안에 ml-auto / w-8 / h-8 / relative / cursor-poniner 값 지정

- mobile-side-bar__btn-close안에 absolute / bg-black / inset-x-0 / h-1/5 값 지정

<!-- 모바일 사이드바 끝 -->

 

 

CSS)

/* 모바일 사이드바 시작 */
@media (max-width: 767px) {
  html.mobile-side-bar-actived,
  html.mobile-side-bar-actived > body {
    overflow: hidden;
  }
}

.mobile-side-bar {
  transition: visibility 0.3s, opacity 0.3s;
  background-color: rgba(0, 0, 0, 0.5);
}

.mobile-side-bar.active {
  visibility: visible;
  opacity: 1;
}

.mobile-side-bar__content {
  transform: translateX(100%);
  transition: transform 0.3s;
}

.mobile-side-bar.active .mobile-side-bar__content {
  transform: translateX(0);
}

.mobile-side-bar__btn-close > div {
  top: 40%;
  transform: rotate(-45deg);
}

.mobile-side-bar__btn-close > div:last-child {
  transform: rotate(45deg);
}
/* 모바일 사이드바 끝 */

 

---

display:none  과 visibility:hidden 의 차이

 

 # div 태그로 만든 Layer를 안보이게 하는 두가지 방법)

 

 

  1)display:none  <-> block

    아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨

 

 

  2)  visibility:hidden <-> visible

    보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 

 

---

출처: https://unabated.tistory.com/entry/displaynone-과-visibilityhidden-의-차이 [랄라라:티스토리]