냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 플입니다.

    오늘은 버튼 태그를 이용해 버튼을 만들어보겠습니다.


     1.  버튼 만들기

     

    <button class="btn"><a href="/sub2.html">더보기</a></button>

    일단 버튼 태그를 이용해 버튼을 만들어줍니다.

     

    버튼 태그를 이용해 코드를 작성하면

    자동적으로 이미지와 같은 디자인이 됩니다.

     

     

    우선 이것을 리셋시켜서 일반 디자인으로 변경하고 시작합니다.

    button{ background:none; border:0; }

    배경과 보더를 빼줍니다.

     

    기본 css를 이렇게 설정하고 디자인을 하는 편이 편합니다.

     

    적용하면 이런 모양입니다.

     


     2.  <button> 태그 디자인

     

    .btn{ @extend %width_auto; text-align:center; margin-top:24px; display:block; }

    <button> 태그에서는 우선 위치를 잡아줍니다.

     

    %width_auto{ width:1280px; margin:0 auto; overflow:hidden; }

    사용된 익스텐드 코드입니다.

    가로사이즈를 고정해 가운데로 위치시켜주었습니다.

     

    text-align을 이용해 글자를 가운데 정렬시켜주었습니다.

     

    margin을 이용해서 위의 컨텐츠와 여백을 주었고

     

    마지막으로 display를 이용해 원래 inline인 button을 block으로 바꿔주었습니다.

     


     3. <a> 태그 디자인

    a{ background:$main_color; padding:8px 32px; color:$sub_color; display:inline-block;
       font-size:18px; font-weight:bold; letter-spacing: -1px;
       &:hover{ opacity: 0.5; }
        }

    a태그는 시안의 디자인과 동일하게 해 줍니다.

     


     

    먼저 background를 이용해 배경색을 넣어줍니다.

    값은 저는 변수 처리한 값을 넣어주었지만 컬러코드를 넣어주셔도 됩니다.

     


     

    padding을 이용해 크기를 정해줍니다.

    사이즈는 화면을 보면서 조절해줍니다.

     


     

    color를 이용해 글자에 색을 넣어줍니다.

    백그라운드와 동일하게 컬러코드나 변수를 넣어줍니다.

     


     

    padding을 넣었을 때 눈치채셨겠지만

    여백이 잘 적용되지 않았을 겁니다. 이건 a태그가 inline속성을 가지고 있어서 그런 건데요.

    display:inline-block을 이용해 inline처럼 디자인이 되지만 block의 속성을 가지고 있게 만들어줍니다.

     

    *block을 적용하면 가로 전체에 배경색이 들어감

     


     

    font-size, font-weight, letter-spacing 등을 이용해 글자를 꾸며줍니다.

     


     

    마지막으로 hover를 적용해서 마우스를 올렸을 때 모션을 줍니다.

    저는 보통 opacity를 이용해 투명도를 조절합니다.

     

    이렇게 버튼을 완성했습니다.


    그럼 이만.

    총총.

    반응형

    'coding > html + css' 카테고리의 다른 글

    [css] 타이틀 코딩하기  (0) 2019.11.02
    [html] 타이틀 코딩하기  (0) 2019.10.28
    [css] position을 이용해 반투명 배경 올리기  (0) 2019.09.26
    [sass/scss] 자동 컴파일하기  (0) 2019.09.25
    [html] <span>  (0) 2019.09.24
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바