|
스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 |
|
환경: CSS |
CSS 를 이용하면 링크가 걸린 텍스트를 디자인한 이미지처럼 만들 수 있습니다. 버튼 이미지를 직접 디자인해서 올릴 필요가 없습니다. CSS3 부터는 그라데이션까지 줄 수 있기 때문에 좀더 퀄리티 있는 버튼을 만들 수 있습니다. CSS 로 버튼을 만드는 과정은 다음과 같습니다.
l a 태그 박스 만들기
l 모서리 둥글게 만들기 : border-radius 속성
l 그림자 적용하기 : box-shadow 속성
l 그라데이션 적용하기 : linear-gradient 속성
▼ 첫 번째는 <a> 태그에 버튼명으로 사용할 텍스트를 넣고 사각형 박스를 만듭니다. 일반적인 박스 모양입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#button1 {
width: 300px;
margin: 10px;
padding: 10px;
border: 1px solid;
background-color: #eca86f;
text-align: center;
}
#button1 a {
color: white;
display: inline-block;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
margin: 3px;
background: #000099;
}
</style>
</head>
<body>
<div id="button1">
<a href="#">next</a> <a href="#">after</a>
</div>
</body>
</html>
▼ 그리고 버튼이기 때문에 마우스로 버튼을 가리켰을 때 색상이 변경되도록 가상 선택자 hover 에 배경색을 지정하였습니다. hover 은 a 태그에서 마우스 오브 이벤트가 발생했을 때 적용이 됩니다. 아래 그림처럼 색상이 바뀌었죠.
|
#button1 a:hover{ background: #7a7614; } |
¤ 모서리 둥글게 처리하기
▼ 다음은 모서리를 둥글게 하기 위해서 border-radius 속성을 사용하였습니다. 5px 이면 반지름이 5인 원이 4개의 귀퉁이에 모두 적용이 됩니다. border-radius 아래에 소스는 다른 브라우저의 호환을 위한 것입니다. 앞에 접두사로 –moz- 와 –webkit- 을 붙였습니다. –moz- 은 파이어폭스, –webkit- 는 크롬, 사파리를 위한 접두사 입니다.
|
#button1 a{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } |
¤ 그림자 추가하기
▼ 세 번째는 그림자를 추가하는 것입니다. box-shadow 속성을 사용하였으며 그림자의 크기가 가로 2px, 세로 2px 입니다. 그리고 그림자의 흐림 거리는 4px 입니다.
|
#button1 a{ box-shadow: 2px 2px 4px #999999; -moz-box-shadow: 2px 2px 4px #999999; -webkit-box-shadow: 2px 2px 4px #999999; } |
|
¤ 버튼에 그라데이션 주기 |
▼ 마지막으로 그라데이션을 주었습니다. 그라데이션을 주게 되면 버튼에 입체감이 생기죠. 그라데이션을 주는 방법은 투명 이미지를 이용하는 방법과 CSS3 에서 추가된 linear-gradient 을 이용하는 것입니다. “to bottom” 은 두 번째 인수로 넘긴 색상을 아래에서 부터 세 번째 넘긴 색상으로 그라데이션을 만들라는 명령어 입니다.
|
#button1 a{ background: linear-gradient(to bottom, #375094, #000099 ); } |
▼ 아래 소스는 지금까지 CSS 를 적용한 전체 소스 입니다. 실행한 결과 이미지를 보시면 버튼 이미지 같죠. 이 정도면 충분히 버튼으로 사용할 만 하다고 생각합니다. 여러분도 좀더 수정해서 더 멋진 버튼을 만들어 보시기 바랍니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#button1 {
width: 300px;
margin: 10px;
padding: 10px;
border: 1px solid;
background-color: #eca86f;
text-align: center;
}
#button1 a {
color: white;
display: inline-block;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
margin: 3px;
background: #000099;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 2px 2px 4px #999999;
-moz-box-shadow: 2px 2px 4px #999999;
-webkit-box-shadow: 2px 2px 4px #999999;
background: linear-gradient(to bottom, #375094, #000099);
}
#button1 a:hover {
background: #7a7614;
}
</style>
</head>
<body>
<div id="button1">
<a href="#">next</a> <a href="#">after</a>
</div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음 (0) | 2019.02.12 |
|---|---|
| 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
| 스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 (0) | 2019.01.06 |
| 인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
| 스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법 (0) | 2018.10.10 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 (0) | 2018.08.25 |
| 스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
