button 에 관한 고찰

버튼 안에 들어가는 글자를 "버튼 레이블(button label)" 또는 "버튼 텍스트(button text)"라고 합니다. 이것은 일반적으로 버튼을 클릭하면 수행되는 작업을 나타내는 짧은 설명 또는 명령어를 포함합니다. 예를 들어, "확인" 또는 "취소"와 같은 단어나 구문이 일반적인 버튼 레이블입니다.

 

 

HTML <button> 요소는 다음과 같은 옵션을 가질 수 있습니다:

accesskey: 버튼에 할당 된 액세스 키를 나타냅니다.
autofocus: 페이지가 로드될 때 버튼에 자동으로 포커스를 설정합니다.
class 또는 classname: CSS 클래스를 지정하여 버튼 스타일을 적용할 수 있습니다.
disabled: 버튼을 사용하지 못하도록 만듭니다.
form: 버튼이 속한 폼을 지정합니다.
formaction: 폼을 제출할 때 사용되는 URL을 지정합니다.
formenctype: 폼 데이터가 서버로 전송되는 방법을 지정합니다.
formmethod: 폼을 제출할 때 사용되는 HTTP 메서드를 지정합니다.
formnovalidate: 폼 데이터의 유효성을 검사하지 않도록 설정합니다.
formtarget: 폼을 제출한 후 결과를 표시할 위치를 지정합니다.
name: 버튼 요소의 이름을 지정합니다.
type: 버튼의 유형을 지정합니다. 기본값은 "submit"이지만 "button", "reset" 및 "menu"를 사용할 수도 있습니다.
value: 버튼에 할당 된 값(텍스트 또는 숫자)을 지정합니다.
JavaScript에서 버튼을 생성할 때는 다음과 같은 옵션을 사용할 수 있습니다:

onclick: 클릭 이벤트 핸들러 함수를 지정합니다.
innerText 또는 textContent: 버튼 내부의 텍스트를 지정합니다.
style: 버튼에 적용할 CSS 스타일을 지정합니다.

 

 

 

일반적인 버튼

button {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 0.25em;
  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.15);
  transition: background-color 0.15s ease-in-out;
}

 

 

fontWeight: "600", fontWeight: 600,

중 

fontWeight: 600, 이 일반적

 

 

 

 

em과 rem은 둘 다 상대적인 길이 단위이며, CSS에서 사용됩니다. 그러나 사용 방식과 기준점이 다릅니다.

em은 부모 엘리먼트의 폰트 크기에 상대적으로 크기가 지정되는 길이 단위입니다. 예를 들어, 부모 엘리먼트의 폰트 크기가 16px일 때, 1em은 16px을 나타냅니다. 만약 부모 엘리먼트의 폰트 크기가 20px이라면, 1em은 20px을 나타냅니다.

반면에, rem은 루트 요소(HTML 태그)의 폰트 크기를 기준으로 크기가 지정되는 길이 단위입니다. 예를 들어, 루트 요소의 폰트 크기가 16px일 때, 1rem은 16px을 나타냅니다. 따라서 rem은 페이지 전체에서 일관된 크기를 유지하고 싶을 때 유용합니다.

간단하게 말하자면, em은 상대적으로 부모 요소의 폰트 크기를 기준으로 크기가 지정되고, rem은 상대적으로 루트 요소의 폰트 크기를 기준으로 크기가 지정됩니다.

 

 

 

 

 

공통 컴포넌트를 만들 때는 컴포넌트의 용도에 따라 적절한 패딩 값을 지정하는 것이 좋습니다. 예를 들어, 컨테이너 역할을 하는 컴포넌트의 경우 내부 컨텐츠를 감싸는 패딩을 적절히 지정해야 합니다. 이때 패딩 값은 주로 em이나 rem 단위로 지정하며, 컴포넌트를 사용하는 쪽에서 필요한 경우 추가로 덮어쓸 수 있도록 props로 전달해주는 것이 좋습니다.

또한, 컴포넌트 내부의 특정 요소에 대한 패딩 값은 해당 요소의 역할에 따라 적절히 지정해야 합니다. 예를 들어, 텍스트를 표시하는 요소에 대해서는 내부 패딩 값을 충분히 주어야 텍스트가 보기 좋게 표시될 수 있습니다. 반면, 아이콘을 표시하는 요소에 대해서는 패딩 값을 작게 주어야 아이콘이 균형있게 표시될 수 있습니다.

따라서, 공통 컴포넌트를 만들 때는 컴포넌트의 역할과 요소의 역할에 따라 적절한 패딩 값을 지정하는 것이 중요합니다.

 

 

Type과 유사한 의미를 가진 단어들은 다음과 같습니다.

Kind
Category
Class
Style
Genre
Sort
Form
Mode
Variety
Sort
Version
Variant
Model
Design
Make
Brand

 

 

Button 컴포넌트와 관련하여 각 단어들이 어떻게 사용될 수 있는지 예시를 들어보면 다음과 같습니다.

Kind: "버튼은 UI 구성 요소의 한 종류입니다."
Category: "이 버튼은 primary 카테고리에 속합니다."
Class: "이 버튼은 btn 클래스를 가지고 있습니다."
Style: "이 버튼은 flat 스타일을 적용합니다."
Genre: "이 버튼은 action 장르의 컴포넌트입니다."
Sort: "이 버튼은 large 사이즈로 정렬됩니다."
Form: "이 버튼은 submit 폼을 전송하는 버튼입니다."
Mode: "이 버튼은 dark 모드에서만 사용할 수 있습니다."
Variety: "이 버튼은 다양한 color 옵션을 가지고 있습니다."
Version: "이 버튼은 v2 버전으로 업그레이드되었습니다."
Variant: "이 버튼은 outline 버전이 있습니다."
Model: "이 버튼은 Material Design 모델을 따릅니다."
Design: "이 버튼은 flat design 디자인을 적용합니다."
Make: "이 버튼은 Bootstrap에서 만들어졌습니다."
Brand: "이 버튼은 Google 브랜드 컬러를 사용합니다."

 

 

 

 

type: 버튼의 유형을 나타내며, 다음 값 중 하나를 가질 수 있습니다.
"button" (기본값): 클릭했을 때 아무런 동작을 하지 않습니다.
"submit": 폼을 제출합니다.
"reset": 폼을 초기화합니다.
disabled: 버튼을 비활성화시킵니다.
name: 버튼의 이름을 지정합니다.
value: 버튼의 값을 지정합니다. 폼을 제출할 때 서버로 전송됩니다.
form: 버튼이 속한 폼의 ID를 지정합니다.
autofocus: 페이지가 로드될 때 버튼에 자동으로 포커스를 줍니다.
formaction: type="submit" 일 때, 폼 제출 시 요청을 보낼 URL을 지정할 수 있습니다. 이 속성은 <form> 요소의 action 속성을 덮어씁니다.
formenctype: type="submit" 일 때, 폼 제출 시 요청에 사용할 인코딩 방식을 지정할 수 있습니다. 이 속성은 <form> 요소의 enctype 속성을 덮어씁니다.
formmethod: type="submit" 일 때, 폼 제출 시 요청 방식을 지정할 수 있습니다. 이 속성은 <form> 요소의 method 속성을 덮어씁니다.
formnovalidate: type="submit" 일 때, 폼 제출 시 유효성 검사를 하지 않도록 지정할 수 있습니다. 이 속성은 <form> 요소의 novalidate 속성을 덮어씁니다.
formtarget: type="submit" 일 때, 폼 제출 시 결과를 표시할 위치를 지정할 수 있습니다. 이 속성은 <form> 요소의 target 속성을 덮어씁니다.
onclick: 버튼을 클릭할 때 실행될 JavaScript 코드를 지정합니다.
ondblclick: 버튼을 더블 클릭할 때 실행될 JavaScript 코드를 지정합니다.
onmousedown: 버튼을 마우스로 누를 때 실행될 JavaScript 코드를 지정합니다.
onmouseup: 버튼을 마우스로 놓았을 때 실행될 JavaScript 코드를 지정합니다.
onmouseover: 버튼 위로 마우스가 올라갔을 때 실행될 JavaScript 코드를 지정합니다.
onmouseout: 버튼에서 마우스가 벗어났을 때 실행될 JavaScript 코드를 지정합니다.
onmousemove: 버튼 위에서 마우스를 움직일 때 실행될 JavaScript 코드를 지정합니다.
onkeydown: 버튼에서 키보드의 키를 눌렀을 때 실행될 JavaScript 코드를

 

 

 

 

평면 버튼 (Flat Button)
윤곽 버튼 (Outline Button)
음각형 버튼 (Rounded Button)
드랍쉐도우 버튼 (Drop Shadow Button)
3D 버튼 (3D Button)
그림자 버튼 (Shadow Button)
아이콘 버튼 (Icon Button)
플로팅 버튼 (Floating Button)
투명 버튼 (Transparent Button)
그라데이션 버튼 (Gradient Button)
동적 버튼 (Dynamic Button)



주 버튼 (Primary Button): 주요 액션을 수행하는 버튼으로, 다른 버튼들보다 더 크고 더 강조됩니다.
보조 버튼 (Secondary Button): 주 버튼에 비해 작고 덜 강조되며, 보조적인 기능을 수행합니다.
플로팅 버튼 (Floating Button): 화면에 떠있는 원형 또는 사각형 버튼으로, 새로운 컨텐츠를 만들거나 추가적인 액션을 수행하는 버튼입니다.
토글 버튼 (Toggle Button): 클릭할 때마다 상태가 바뀌는 버튼으로, 활성화/비활성화 상태를 표시할 때 사용합니다.
메뉴 버튼 (Menu Button): 클릭하면 메뉴가 펼쳐지는 버튼으로, 추가적인 액션을 수행하거나 다른 페이지로 이동할 수 있는 링크를 제공합니다.
로드 버튼 (Load Button): 클릭하면 로딩 중임을 표시하고, 일반적으로 데이터를 가져오거나 서버 요청을 보내는 버튼입니다.
뒤로 가기/앞으로 가기 버튼 (Back/Forward Button): 이전 페이지로 이동하거나 다음 페이지로 이동하는 버튼입니다.

 

 

 

 

"확인" 또는 "OK": 정보 입력 후 확인을 하는 경우 사용되는 버튼
"취소" 또는 "Cancel": 정보 입력 취소 또는 이전 화면으로 이동하는 경우 사용되는 버튼
"저장" 또는 "Save": 정보를 저장하는 경우 사용되는 버튼
"삭제" 또는 "Delete": 정보를 삭제하는 경우 사용되는 버튼
"수정" 또는 "Edit": 정보를 수정하는 경우 사용되는 버튼
"추가" 또는 "Add": 정보를 추가하는 경우 사용되는 버튼
"검색" 또는 "Search": 정보 검색을 위한 버튼


Primary: 주요 액션에 사용되는 버튼이나 UI 요소의 스타일을 나타냅니다.
Secondary: 보조적인 액션에 사용되는 버튼이나 UI 요소의 스타일을 나타냅니다.
Success: 성공적인 액션에 대한 피드백을 보여주기 위해 사용되는 버튼이나 UI 요소의 스타일을 나타냅니다.
Danger: 위험한 액션에 대한 경고를 보여주기 위해 사용되는 버튼이나 UI 요소의 스타일을 나타냅니다.
Warning: 주의해야 할 사항이 있는 액션에 대한 경고를 보여주기 위해 사용되는 버튼이나 UI 요소의 스타일을 나타냅니다.
Info: 정보를 제공하기 위해 사용되는 버튼이나 UI 요소의 스타일을 나타냅니다.
Light: 밝은 배경에서 사용하기 위해 디자인된 버튼이나 UI 요소의 스타일을 나타냅니다.
Dark: 어두운 배경에서 사용하기 위해 디자인된 버튼이나 UI 요소의 스타일을 나타냅니다.

 

 

 

 

다크모드에서 쓰이는 버튼 색상 추천:

Primary: #7F5AF0 (보라색)
Secondary: #34B1BB (청록색)
Tertiary: #EDEDED (연한 회색)
Warning: #FFA500 (주황색)
일반모드에서 쓰이는 버튼 색상 추천:

Primary: #1E90FF (파란색)
Secondary: #FFC107 (노란색)
Tertiary: #E0E0E0 (연한 회색)
Warning: #FF5722 (빨간색)

 

 

 

다크모드에서 사용할 가독성이 좋은 글자 색은 다음과 같은 것들이 있습니다:

흰색 (#FFFFFF)
밝은 회색 (#CCCCCC)
연한 노란색 (#FFFF99)
연한 녹색 (#66FF99)
일반모드에서 사용할 가독성이 좋은 글자 색은 다음과 같은 것들이 있습니다:

검정색 (#000000)
어두운 회색 (#333333)
어두운 녹색 (#006600)
어두운 파란색 (#000066)






다크모드에서 쓰이는 버튼 색상 안에 가독성이 좋은 글자 색 추천:

Primary (#7F5AF0): #FFFFFF (흰색)
Secondary (#34B1BB): #FFFFFF (흰색)
Tertiary (#EDEDED): #333333 (어두운 회색 또는 검정색)
Warning (#FFA500): #333333 (어두운 회색 또는 검정색)
일반모드에서 쓰이는 버튼 색상 안에 가독성이 좋은 글자 색 추천:

Primary (#1E90FF): #FFFFFF (흰색)
Secondary (#FFC107): #333333 (어두운 회색 또는 검정색)
Tertiary (#E0E0E0): #333333 (어두운 회색 또는 검정색)
Warning (#FF5722): #FFFFFF (흰색)