본문 바로가기
Program/오래된 PHP 게시판

[HTML-CSS]CSS로 이미지를 이용한 간단한 메뉴만들기

by 한빛가람 2013. 2. 5.
반응형

안녕하세요. 필자입니다. 오늘은 간단한 이미지를통한 간단한 메뉴를 만드는걸 알아보도록하겠습니다.


준비물은 html에디터와 컴퓨터나 인터넷이호환되는 기기와 이미지파일이랑 그리고 제 강의만 있으면 됩니다.(?)


필자는 이미지만드는게 귀찮은 관계로 css로 이미지를 구현하도록 하겠습니다.


css코드는 이렇습니다.

<style type="text/css">

.menu-image{border-radius:10px 0px;}

</style>


그리고 html코드는 이렇습니다.


<html>

<head>

<title>메뉴테스트</title>

<style type="text/css">

.menu-image{border-radius:10px 0px; background-color:gray; width:20%;}

</style>

</head>

<body>

<div class="menu-image">메인<br>사이트소개<br>그냥 만들어본 메뉴<br>그저 그런메뉴</div>

</body>

</html>


여기서는 그냥 그런 테그를 사용하였지만 이미지를 사용하여 화려하게만들어보는것도 좋다고 생각합니다.


그러면 끝!




   


아래의 손가락버튼을 눌러주시면 블로그에 큰 힘이 됩니다.





반응형
크리에이티브 커먼즈 라이선스
한빛가람 필자가 게시한 대부분의 블로그 게시물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다. 게시물에 CCL이 적용되지 아니하다고 적혀있는 경우엔 본 라이선스 적용 대상이 아닙니다.

댓글