냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 플입니다.

    마우스 올리면 나타나는 버튼의 css를 진행해볼게요.

     

     


     1.  html 보고오기

     

    2020/05/22 - [Try/coding] - [html] 마우스를 올리면 나타나는 버튼 만들기


     2.  전체 css

    li{ float:left; width:30%; margin:0 1%; height:218px; border:3px dashed $sub_color; 
    
       a{ display:none; position:relative; width:100%; height:218px; text-align:center; 
       background: $sub_color; line-height: 218px; color:$main_color; font-size:28px; 
       font-family:'NanumBarunpen'; font-weight:bold; opacity: 0.85; margin-bottom:-218px; }
      
       img{ width:100%; }
       
       &:hover{ a{ display: block; }  }
       
       }

    일단 전체 코드를 보여드릴게요.

    제가 scss를 사용해서 중첩으로 표현했는데 css에서 li>a{  } 랑 같은 의미입니다.

     


     3.  중요 코드 보기

    li{ 
    
       a{ display:none; position:relative;  }
       
       &:hover{ a{ display: block; }  }
       
       }

    디자인을 제외하고 중요한 코드만 뽑아봤어요.

     

    li{ 
    
       a{ display:none; position:relative;  } // a태그가 처음에는 보이지 않게, 포지션을 이용해 img 위에 올리기
       
       &:hover{ a{ display: block; }  } // li에 마우스를 올릴 때 a 태그 보이게 하기
       
       }

    <a>태그에는 display:none;을 이용해서 일단 보이지 않게 만들어줍니다.

    다만 이 태그는 보이지 않기 때문에(당연) 모든 디자인을 끝낸 다음에 마지막에 넣어주세요.

     

    position을 이용해 <img> 태그와 겹칠 수 있게 만들어줍니다.

     

    :hover를 이용하는데 여기서 주의점은 <a> 태그가 아니라 <a>의 부모 태그인 <li> 태그에 넣어주는 것입니다.

    그리고 hover 안쪽에 <a> 태그를 한번 더 부른 뒤 display:block;를 이용해 마우스를 올리면 보이게 만들어주세요.

     

    마우스를 오버하면 이런 식으로 위에 <a> 태그가 나타나게 됩니다. 오른쪽은 마우스를 올리지 않아서 나오지 않죠.


     4.  보러 가기

    https://ssimplay.github.io/paintdrop/

     

    paint drop

    Q. 색깔의 의미? A. 그냥 마음에 드는색으로 골라봤습니다. 물감이기때문에 색이 다양하다고 생각하고 있고 실제로 그릴때도 조금씩 다른 색으로 칠하고있어요. (의도는 아니고 매번 같은 색을 ��

    ssimplay.github.io

    위의 링크에서 확인 가능합니다~

     


    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바