[CSS] 메인메뉴 이미지로 변경 & SNS 아이콘으로

메뉴를 만들거나 어떤 버튼을 텍스트 대신 이미지로 교체하려고 할때 쓸 수 있는 방법입니다.

일부 메뉴는 텍스트로 들어가고, 몇개의 메뉴(아래 이미지에 있는 sns 메뉴같은)만 이미지로 바꿀때 유용할 것 같다. 

텍스트 이미지로 변경 (이미지버튼)

이미지 출처 : 내가 만듦

우선 <ul>태그를 이용해서  HTML를 만들어 준다.

 

HTML

   <ul class="gnb01 clearfixed">
            <li><a href="#">메뉴01</a></li>
            <li><a href="#">메뉴02</a></li>
            <li><a href="#">메뉴03</a></li>
            <li><a href="#">인스타그램</a></li>
            <li><a href="#">페이스북</a></li>
        </ul>

 

CSS

먼저 메뉴를 가로로 일렬로 만들어준다. 

.gnb01 li{float: left;list-style: none;margin: 0 5px}
.clearfixed::after{display: block;content: "";clear: both;}

"clearfixed"안에 내용은 메뉴가 모두 float되어 있기때문에 height를 잡아주기 위해 넣어준다. 

자세한 내용은 아래 포스팅에서 있어요!

2019/02/26 - [퍼블리싱/HTML&CSS] - [CSS]float 이해하기 & clear하는 방법

[CSS]float 이해하기 & clear하는 방법

이렇게 메뉴를 가로로 쭉 나열 후,

위 CSS를 넣으면 이렇게 변함.

 

인스타그램과 페이스북 메뉴에 배경으로 이미지를 넣어주고 글씨는 저멀리는 날려버린다.

        .insta_btn a, .faceb_btn a{
            display: inline-block;
            width:30px;
            height: 30px;
            text-indent: -9999px; /*글씨를 안보이게 한다*/
            }
        .insta_btn a{background-image: url(./instagram.png);} /*배경이미지를 넣어준다.*/
        .faceb_btn a{background-image: url(./facebook.png);} /*배경이미지를 넣어준다.*/

'text-indent'는 텍스트를 들여쓰거나 내어쓸때 사용하는 속성인데 텍스트를 숨길때 사용가능하다. 

그럼 글씨는 보이지 않고 배경이미지만 남아서 이미지버튼으로 보인다. 텍스트는 보이지 않지만 html상 남아있어, 의미를 전달함으로써 웹표준에도 맞지 않을까 싶다. 

 

***아래의 속성들로 좀 더 배경을 정교하게 조정할 수 있다!

 

background-image:url() => 로 이미지를 삽입

background-size: contain/ cover / 100% /300px 300px => 배경사이즈 변경

background-position: center center => 배경의 위치 조정