HTML&CSS

[HTML/CSS] OS 상관없이 같은 모양 버튼 만들기

코딩하는 Jay 2020. 5. 8. 16:44
반응형

HTML에 버튼을 생성하면 OS 환경에 따라 다른 모양의 버튼이 만들어집니다.

 

왼쪽 버튼은 button 태그를 이용하였고, 오른쪽 버튼은 input 태그를 이용하여 만들었습니다. 같은 태그를 사용해서 만들었는데, 아래와 같이 OS에 따라 다른 것을 확인할 수 있습니다.

MacOS Windows iOS Android

 

그럼 같은 모양으로 만들기 위해 CSS를 사용해보도록 하겠습니다.

 

먼저 같은 모양으로 만들기 위해 appearance: none CSS를 이용했습니다. Firefox와 Safari 그리고 Chrome에서도 동작하도록 했습니다. 아래와 같이요. 

  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;

appearance: none CSS를 적용하면 플렛폼에 따라 모양이 적용되지 않고 기본모양으로 Element의 모양이 결정됩니다. 그렇게 나온 결과물은 아래와 같습니다. MacOS와 iOS 그리고 Windows와 Android의 버튼이 비슷하게 생긴 것 같습니다. 특징적인 것으로는 iOS의 경우 input 태그 버튼의 경우에는 버튼이 동그란 테두리를 가지고 있다는 것입니다. 몇가지 설정을 더 적용하여 동일한 모양으로 만들어 보겠습니다.

MacOS Windows iOS Android

 

몇 가지 CSS를 더 추가했습니다. border-radius를 추가했고, border 색상뿐 아니라 size와 type까지 변경되도록 했습니다.

 

이렇게 CSS를 적용하니 그래도 모양만 봤을 때는 비슷한 버튼이 만들어진 것 같습니다.

사이즈만 적적하게 각자 사용성에 맞게 조절하면 될 것 같습니다.

MacOS Windows iOS Android

 

반응형