안녕하세요! 이번 포스팅에서는 CSS를 사용하여 버튼에 스타일을 적용하고 효과를 추가하여 디자인하는 방법에 대해 알아보겠습니다.
1. 버튼 요소 생성
먼저 HTML에서 버튼 요소를 생성합니다. 버튼을 만들기 위해 <button> 태그를 사용합니다. 아래의 코드를 HTML 파일에 추가해주세요.
<html>
<head>
</head>
<body>
<button class="button">버튼</button>
</body>
</html>
2. 버튼 스타일 적용
다음으로 CSS를 사용하여 버튼에 스타일을 적용합니다. 스타일을 적용하기 위해 <style> 태그를 사용하고, 클래스 선택자를 활용하여 버튼의 스타일을 정의하겠습니다. 아래의 코드를 <style> 태그 안에 추가해주시면 버튼 스타일이 추가 됩니다.
<html>
<head>
<style>
.button { /* 버튼 스타일 코드 */ }
</style>
</head>
<body>
</body>
</html>예시로 스타일을 하나 작성해보겠습니다.
.button {
display: inline-block;
padding: 10px 20px;
background-color: #42A5F5;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
border: none;
cursor: pointer;
}- display: inline-block;은 버튼 요소를 인라인 블록으로 표시합니다.
- padding: 10px 20px;은 버튼의 안쪽 여백을 지정합니다.
- background-color: #42A5F5;은 버튼의 배경색을 지정합니다. 여기서는 파란색을 사용하였습니다.
- color: #FFFFFF;은 버튼의 글자색을 지정합니다. 여기서는 흰색을 사용하였습니다.
- font-size: 16px;은 버튼의 글자 크기를 지정합니다.
- font-weight: bold;은 버튼의 글자 굵기를 지정합니다.
- text-decoration: none;은 버튼의 텍스트에 밑줄을 없앱니다.
- border-radius: 5px;은 버튼의 테두리를 둥글게 만듭니다.
- border: none;은 버튼의 테두리를 없앱니다.
- cursor: pointer;은 마우스 커서를 버튼 위로 올렸을 때 포인터 모양으로 변경합니다.
3. 버튼 호버 효과 추가
마지막으로 버튼에 호버 효과를 추가하겠습니다. 이렇게 하면 마우스를 버튼 위에 올렸을 때 배경색이 변경됩니다. 아래의 코드를 <style> 태그 안에 추가해주세요.
<html>
<head>
<style>
.button { /* 버튼 스타일 코드 */ }
.button:hover { /* 버튼 호버 효과 스타일 코드 */ }
</style>
</head>
<body>
</body>
</html>예시로 버튼 호버 스타일을 작성해보도록 하겠습니다.
.button:hover {
background-color: #1E88E5;
}- background-color: #1E88E5;은 호버 시 버튼의 배경색을 더 진한 파란색으로 변경하였습니다.
'CSS' 카테고리의 다른 글
| CSS Margin과 Padding (0) | 2023.08.19 |
|---|---|
| 5. CSS 색상: 표현 방식과 알파값 (0) | 2023.07.29 |
| 4. CSS 타이포그래피: 글꼴, 스타일, 줄간격 (0) | 2023.07.19 |
| 3. CSS 박스 모델: 마진, 패딩, 보더 (0) | 2023.07.17 |
| 2. CSS 선택자: 기본 선택자와 결합자 (0) | 2023.07.17 |
| 1. CSS 기본 개념 및 구성 요소 (0) | 2023.07.17 |
