inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱

질문있습니다

해결된 질문

324

작성자 없음

작성한 질문수 0

2

섹션 3. SCSS 핵심이론 활용 예제(Examples of using)까지 듣고

평소에 관심 있던 네비바 디자인을 연습삼아 하고 있습니다.

 

밑에 링크는 제가 관심있던 네비바 디자인를 사용하고 있는 웹사이트 입니다.

웹사이트 삼성화재 바로가기

 

밑에 링크는 codeopen으로 제가 비슷하게 만들어 봤습니다.

codepen 바로가기

 

네비바 아이템에 마우스 오버되면 서브 메뉴가 스르륵 내려가게 하고 싶습니다.

현재 디스플레이 none block 으로 만들었습니다.

opacity 으로 적용 했지만 해결되지 않았어요.

혹시 좋은 방법 없을까 하고 질문올립니다.

scss sass HTML/CSS flex

답변 1

1

코딩웍스(Coding Works)

display: none과 display: block을 사용하시면 transition을 주실 수 없어요.

그래서 display: none을 아래처럼 해주세요.

selector {

  opacity: 0;

  visibility: hidden;

  transition: 0.5s;

selector:hover {

  opacity: 1;

  visibility: visible;

삼성화재 네비게이션처럼 하시려면 제이쿼리 slideDown() slideUp()을 사용하세요.

또는 순수 CSS로 만드실 경우 height: 0와 overflow: hidden을 조합해서 사용하시면 만들 수 있습니다.

0

인프런

visibility 사용하니 해결됬습니다.

slideDown() slideUp() 적용 해보겠습니다.

감사합니다 :) 좋은하루되세요.

savePath 경로

1

205

2

style.scss 만 퍼블리싱 결과물로 전달하면 되는건가요?

1

228

1

pdf 파일 질문이요?

1

185

1

gird 중앙정렬 안됨

1

297

2

모달창에서 반응형 보여주기

1

573

1

선생님 sass 환경설정 화면이 선생님과 달라요

1

334

1

강의 자료

1

407

1

맥북에서 scss 설치

1

552

1

beautify 확장자가 더이상 관리되지 않다고합니다

1

551

1

@mixin 관련 질문입니다.

1

508

1

&에 대해서 질문드립니다.

1

388

1

live sass complier 버전 문제

1

627

2

선생님 질문이 있습니다 !

1

414

1

savePath

1

321

1

css full reroad

1

403

2

featherlight 모달창 질문 있습니다.

1

437

1

컴파일이 안되서

2

265

1

왓칭오류..

1

359

1

featherlight iframe를 사용해서 불러온 html에 scrolltrigger가 있는 경우 밀립니다

1

405

1

Background url 이미지 사이즈

1

242

1

선생님 질문 있습니다

1

284

1

블록 색상

1

293

3

작업영역내 setting.json설정시

1

314

1

선생님 pdf 파일은 다운받을수 없는건가요?

2

371

1