YIR Framework

Button

CSS를 사용하여 HTML의 <a> 태그로 이쁜 버튼을 만드는 과정을 단계별로 설명해 드리겠습니다. 여기서는 기본적인 HTML과 CSS 지식을 기반으로 하여, 단계별로 버튼을 스타일링하는 방법을 다룹니다.

1단계: HTML 구조 작성

먼저, 버튼으로 사용될 <a> 태그를 HTML 문서에 추가합니다.

<a href="#" class="my-button">클릭하세요</a>

이 예제에서는 .my-button이라는 클래스를 <a> 태그에 할당하여, CSS에서 이 클래스를 통해 스타일을 적용할 수 있도록 합니다.

2단계: 기본 스타일 적용

CSS에서 .my-button 클래스에 기본적인 버튼 스타일을 적용합니다.

.my-button {
  display: inline-block; /* 블록 레벨 요소처럼 취급 */
  padding: 10px 20px;    /* 상하 10px, 좌우 20px의 패딩 */
  text-align: center;    /* 텍스트 중앙 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  color: white;          /* 글자색 흰색 */
  background-color: blue;/* 배경색 파란색 */
  border-radius: 5px;    /* 테두리 둥근 모서리 */
  cursor: pointer;       /* 마우스 오버 시 커서 변경 */
}

3단계: 호버(Hover) 효과 추가

마우스 오버 시 버튼의 스타일을 변경하여 사용자 상호작용에 대한 피드백을 제공합니다.

.my-button:hover {
  background-color: navy; /* 마우스 오버 시 어두운 파란색으로 변경 */
}

4단계: 활성화(Active) 효과 추가

버튼을 클릭할 때 시각적 효과를 추가하여, 사용자가 버튼을 눌렀음을 인지할 수 있게 합니다.

.my-button:active {
  transform: scale(0.98); /* 버튼 클릭 시 약간 축소 */
}

5단계: 포커스(Focus) 효과 추가

키보드 탐색이나 접근성을 위해 포커스 상태일 때의 스타일을 정의합니다.

.my-button:focus {
  outline: none;          /* 기본 포커스 효과 제거 */
  box-shadow: 0 0 0 2px lightblue; /* 포커스 시 외곽선 효과 */
}

완성된 예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>아름다운 버튼 예제</title>
<style>
  .my-button {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: blue;
    border-radius: 5px;
    cursor: pointer;
  }

  .my-button:hover {
    background-color: navy;
  }

  .my-button:active {
    transform: scale(0.98);
  }

  .my-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px lightblue;
  }
</style>
</head>
<body>
<a href="#" class="my-button">클릭하세요</a>
</body>
</html>

이 예제에서는 <a> 태그를 사용하여 버튼을 생성하고, CSS를 통해 버튼을 아름답게 스타일링했습니다. 호버, 활성화, 포커스 효과를 추가하여 사용자 상호작용에 대한 시각적 피드백을 제공하는 것이

Last Updated:
Contributors: RiGang