CSS를 사용하여 멋진 버튼을 스타일링하는 HTML 예제 프로그램을 만들어보겠습니다. 아래는 코드의 단계별 설명과 코드 자체입니다.
1. HTML 파일 생성하기
먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>멋진 버튼</title>
</head>
<body>
<button class="custom-button">클릭하세요</button>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 버튼의 스타일을 정의합니다.
/* styles.css */
.custom-button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.custom-button:hover {
background-color: #2980b9;
}
3. 버튼 스타일링
위의 코드를 작성하면 "클릭하세요"라는 텍스트가 포함된 버튼이 생성됩니다. 이 버튼의 스타일은 CSS 스타일 시트에서 정의됩니다. 버튼의 배경색, 글자색, 패딩, 테두리, 테두리 반경, 커서 스타일 및 글자 크기를 조정하고, 호버(마우스를 올렸을 때) 스타일을 정의하였습니다.
4. 결과
아래처럼 버튼이 생성됩니다.
'HTML 예제' 카테고리의 다른 글
| 타자 효과: 글자 한 글자씩 나타나는 타자 효과 (0) | 2023.12.05 |
|---|---|
| 비밀 메시지: CSS로 텍스트 숨기고 호버(hover) 시 나타나게 하기 (0) | 2023.12.05 |
| 블링크 텍스트 만들기 (0) | 2023.12.05 |
| 텍스트 그림 그리기 (0) | 2023.12.05 |
| 이모지 만들기 (0) | 2023.12.05 |
