css를 공부하면서 CSS만으로도 버튼을 만들 수 있을 것 같다는 생각이 들어 검색을 해봤습니다. 아래의 3가지 주요 태그를 설정하면 css로 버튼을 만들 수 있습니다.
1. 주요 css 태그
- border-radius : 테두리 반지름 설정
- box-shadow : 테두리 그림자 설정
- E:active : 마우스 클릭할 때
1.1 border-radius
요소 테두리 경계의 꼭짓점을 둥글게 만듦
border-radius: 반지름값
반지름 순서 : 좌상(Top-Left), 우상(Right-Top),
우하(Right-Bottom), 좌하(Left-Bottom)
반지름 단위 : px, %, 첫번째 반지름/두번째 반지름
ex)
/* 모든 코너의 반지름이 10px */
border-radius: 10px
/* 좌상,우하:10px, 우상,좌하: 20px */
border-radius: 10px 20px
/* 좌상:10px, 우상:20px, 우하:15px 좌하:20px */
border-radius: 10px 20px 15px 20px;
/* 모든 코너의 좌우 반지름 10%, 상하반지름 50% */
bordaer-radius: 10% / 50%
border-radius: 4px 3px 6px / 2px 4px;
/* 아래와 같음 */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
https://developer.mozilla.org/ko/docs/Web/CSS/border-radius
1.2 box-shadow
요소의 테두리를 감싼 그림자 효과를 추가
box-shadow: [inset] offset-x offset-y color;
box-shadow: [inset] offset-x offset-y blur-radius color;
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
inset : 안쪽으로 드리워진 그림자
offset-x : 수평거리, 양수는 오른쪽 음수는 왼쪽으로 표시
offset-y : 수직거리, 양수는 아래쪽 음수는 위쪽으로 표시
blur-radius
- 숫자가 크면, 크기는 커짐, 그림자 테두리가 흐려짐, 색은 더 밝아짐
- 음수 사용 불가
- 0이면 테두리가 되어 선명해짐
spread-radius
- 양수값은 그림자가 더 커지고 확산
- 음수값은 그림자가 줄어듬
- 기본값은 0
color : 그림자 색상
1.3 E:active
링크 관련 가상 클래스
| 표시방법 | 설명 |
| E:link | 방문 전 링크 <a> 요소에 적용, href 필수 |
| E:visited | 방문 후 링크 |
| E:active | 마우스를 클릭할 때 <a> 뿐만 아니라 다른 요소에도 적용 가능 |
| E:hover | 마우스를 오버했을 때 <a> 뿐만 아니라 다른 요소에도 적용 가능 |
스타일 적용 순서
- link → visited → hover → active
2. 전체 HTML, CSS 코드
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
width: 150px;
height: 46px;
/* 버튼 위치 */
position: relative;
left: 50px;
top: 50px;
/* 상자 디자인 큰틀 */
margin-bottom: 30px;
border: 0px;
background-color: #E4EBF5;
/* 그림자 */
border-radius: 10px;
box-shadow:.4rem .3rem 0.7rem #BEC5D0,
-.2rem -.2rem .4rem #FBFBFB;
/* 글씨 */
color: #333333;
font-size: 1.3em;
font-weight: bold;
}
.btn:active {
/*버튼 눌리는 효과*/
box-shadow: inset -.3rem -.1rem 1.4rem #FBFBFB,
inset .3rem .4rem .8rem #BEC5D0;
cursor: pointer;
}
</style>
</head>
<body>
<div><input type="button" class="btn" name="btn" value="Button"></div>
</body>
</html>
https://www.w3schools.com/css/tryit.asp?filename=trycss_default
출처
https://codingjh.tistory.com/m/104
참고
https://aboooks.tistory.com/264
깊게 파보기
https://codepen.io/yuhomyan/pen/OJMejWJ
'Dev. Cookbook > HTML, CSS' 카테고리의 다른 글
| [HTML, JS, JSP] 페이지 자동 새로고침, 일정 시간 후 다른 페이지로 보내기 (1) | 2022.06.01 |
|---|
댓글