CSS 클릭 효과 유지 - CSS keullig hyogwa yuji

Question

See the Pen Calculator by kIMJUHYE (@JOOOOOHYE) on CodePen.

목차 Show

CSS Input 태그를 활용한 Click Event 만들기
li 세로 형태에서 부드럽게 토글되는 형태는 불가능한건가?
HTML에서 버튼 만들기
버튼 기본 스타일 바꾸기
버튼 배경색 바꾸기
버튼 글자색 바꾸기
버튼 테두리 바꾸기
버튼 사이즈 바꾸기
버튼의 상태 스타일 바꾸기
`hover` 상태 꾸미기
`focus` 상태 꾸미기
`active` 상태 꾸미기

active, hover

:active 는 사용자가 활성화한 요소(버튼 등)를 나타낸다.

즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다.

:hover 은 사용자가 마우스를 요소 위에 올리는 시점을 의미한다.

버튼을 클릭했을 때 누르는 듯한 효과를 내고싶었기 때문에 :active를 사용했고, CSS파일에서 button부분을 두 가지 상태로 구분했다.

그냥 button 부분은 평상시 상태를, button:active 부분은 마우스를 누른 순간부터 떼는 순간까지의 상태를 의미한다.

마우스를 누른 순간 box-shadow라는 그림자효과를 조절하는 식으로 누르는 듯한 효과를 내봤다.

위의 그림처럼 그림자의 크기가 줄어들면, 마치 버튼을 누른 것 처럼 보인다.

그리고 버튼의 위치를 동시에 살짝 내려주면 더 생동감이 생긴다.

위치를 이동시키는 부분은 position과 top을 통해 위치를 2px정도 아래로 내림으로써 구현했다.

.clear__and__enter > button {
  border-radius: 25px;
  width: 104px;
  height: 40px;
  background-color: #eee;
  cursor: pointer;
  outline: none;
  box-shadow: 1px 4px 0 rgb(0,0,0,0.5);
}

.clear__and__enter > button:active {
  box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
  position: relative;
  top:2px;
}

(왼) 버튼 누르기 전 , (오) 버튼 누른 후

CSS에서는 마우스를 올렸을 경우에 애니메이션을 변경한다던지, CSS3 애니메이션을 사용하여 반복적인 움직임을 만들 수 있습니다. 왜 CSS에서는 클릭 이벤트를 만들지 않았을까요! 정말 너무 아쉬운 순간입니다. 버전이 올라가면서 부디 클릭 속성에 대한 설정 부분도 추가되었으면 좋겠습니다. 자바스크립트가 늘어날수록 웹페이지의 로딩 시간은 그만큼 길어지는데다 오류의 주요 원인이 될 수 있기 때문에 저는 CSS를 좋아할 수 밖에 없습니다. (사실 스크립트를 잘 몰라서...)

구글에서 CSS 관련 클릭 이벤트에 대해 검색해보니 역시 해결하신분들의 경험담을 확인할 수 있었습니다. 단 이 방법은 공식적이지 않으며 지극히 개인적인 방법이라는 것을 염려해 두셨으면 좋겠습니다. 개인적으로는 무척 마음에 들었던 방법입니다.

CSS Input 태그를 활용한 Click Event 만들기

소제목에서 이미 눈치를 채신분들도 계실 것 입니다. 그렇습니다. Input 요소를 사용한다면 클릭에 대한 속성을 연출할 수 있습니다. 단도직입적으로 먼저 핵심을 말씀 드리자면 다음과 같습니다.

1. Input 태그로 클릭 이벤트를 연출한다.

2. Input과 늘 짝꿍처럼 따라다니는 Label 요소에서 클릭 이벤트가 처리되게 한다.

3. 사용되어지는 Input 요소는 화면상 보이지 않도록 처리한다.

그렇습니다. 유일하게 클릭에 대하여 표현이 가능한 Input 태그, 그리고 여기에 같이 따라다니는 Label 태그를 써서 만들 수 있습니다. input type은 checkbox로 진행하며, hover 라던지 after, before 같은 기능을 담당하는 checked 라는 것이 있습니다. 이녀석을 사용하여 체크가 되었을 때, 그리고 되지 않았을때를 구별해 주는 것 입니다.

input type 버튼으로는 일반적인 button의 형태, radio 같은 선택지 형태, text같은 텍스트 입력창, 그리고 여기에 쓰인 checkbox 형태가 있습니다. 체크가 된 상태, 되지 않은 상태를 하나의 input 요소에서 구별지어주려면 checkbox 타입이 가능합니다. 그래서 이 요소를 사용하는 것 입니다.

See the Pen jQuery Click 이벤트 사용하지 않고 CSS3 만으로 완성하기 by rgy0409 (@rgy0409) on CodePen.

위에서 직접 테스트 해 보시기 바랍니다. 그리고 CSS 마크업 상태도 유심히 살펴보시기 바랍니다. input 요소와 label 요소가 같이 붙어 있는게 특징이며, input 요소는 고정 위치를 사용하여 (position: fixed;) 화면상에 보이지 않도록 저 멀리 보내버렸습니다. (left: -9999px;) 이렇게 처리해두면 절대로 디스플레이상에 checkbox 상자는 나타나지 않겠지요.

input 태그에 id 값을 부여했고, label에도 for 속성으로 똑같은 이름의 input id 값을 부여해서 연동되게 만듭니다. 이제 이 label에 나타나는 text를 클릭할 때, 클릭이벤트가 발생되게 합니다. 그것이 checked 속성 입니다.

li 세로 형태에서 부드럽게 토글되는 형태는 불가능한건가?

위의 예시에는 세가지 형태로 표현되고 있습니다. 두번째와 세번째는 의도한대로 부드럽게 연출이 되서 좋은데 문제는 첫번째네요. 이런 경우는 보통 모바일에서 많이 볼 수 있는 메뉴 형태입니다. 메인메뉴 안쪽에 서브메뉴가 있는 형태로, 메인메뉴중 하나를 누르면 그 아래의 메뉴들이 아래로 밀리면서 중간에 서브메뉴가 토글되게 만들어주고 싶었는데, li가 블록요소이다보니 크기값을 갖고 해당 영역만큼 자리를 잡고 있습니다.

자바스크립트 제이쿼리로 toggle 매서드를 사용하면 순식간에 처리가 가능합니다. 하지만 어떻게든 스크립트를 사용하지 않고 CSS 안에서 해결해보려고 했는데... 부드럽게 토글되는 형태는 아무래도 어려울 듯 싶습니다. 위의 예시에서 확인하실 수 있는게 전부입니다. display로 아예 없앴다가 누르면 다시 block 형태로 나타나게 만들어주는 방법이 최선일 듯 싶습니다. 앞으로 코딩을 하면서 좀 더 연구를 해봐야 할 것 같습니다. 혹시 여러분들께서 좋은 생각이 있다면 주저없이 댓글로 알려주세요. 저에게는 큰 도움이 될 것입니다. 끝.

이 글에서는 CSS로 버튼을 꾸미는 방법에 대해 알아보겠습니다.

제 목표는 각기 다른 CSS 규칙과 스타일들이 어떻게 적용되어 사용되는지 보여드리는 것입니다. 따라서 디자인적인 요소나 스타일링 방법은 다루지 않을 예정입니다.

이보다는, 스타일 자체가 어떻게 적용되고 어떠한 속성들이 흔히 사용되는지, 그리고 스타일과 속성이 어떻게 같이 사용되는지에 대해 개괄적으로 다루겠습니다.

첫째로는 HTML로 버튼을 만드는 법에 대해 배우고 버튼의 기본 스타일을 덮을 수 있는 방법에 대해 알려드리겠습니다. 마지막으로는 버튼의 세 가지 다른 상태에 대해 어떻게 스타일링할 수 있는지에 대해서 간략하게 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Button Style</title>
</head>
<body>
    <button type="button" class="button">Click me!</button>
</body>
</html>

<button type="button" class="button">Click me!</button> 코드를 분석해 봅시다.

가장 먼저 <button> 태그로 열고 </button> 태그로 닫음으로써 버튼을 추가했습니다.
<button> 태그의 type="button" 속성은 명시적으로 클릭 가능한 버튼을 생성합니다. 이 버튼은 양식을 제출하기 위한 용도가 아니기 때문에 코드를 깔끔하게 작성하고 불필요한 결과를 초래하지 않기 위해 시맨틱하게 type="button"을 명시해 주는 것이 좋습니다.
class="button" 속성은 별도의 CSS 파일에서 버튼을 스타일링하기 위해 사용될 예정입니다. 클래스명은 꼭 button일 필요는 없습니다. 예를 들어 class="btn"이라고 할 수도 있습니다.
버튼 내에 Click me!라는 텍스트가 보입니다.

버튼에 적용되는 모든 스타일은 별도의 style.css 파일 내에 들어가게 됩니다.

index.html에 <link rel="stylesheet" href="style.css"> 태그를 작성해서 두 개의 파일을 연결하면 HTML에 스타일을 적용할 수 있습니다.

style.css 파일에 버튼을 화면 중앙에 배치하는 스타일을 추가했습니다.

class="button"은 .button 선택자로 사용된 것을 확인할 수 있습니다. 버튼에 직접 스타일링할 수 있는 방법입니다.

* {
    box-sizing: border-box;
} 
body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}
.button {
    position: absolute;
    top:50%
}

위의 코드는 다음과 같은 결과를 보여줍니다.

버튼의 기본 스타일은 여러분이 사용하고 있는 브라우저에 따라 상이하게 보입니다.

위의 예시는 구글의 크롬 브라우저에서 보이는 버튼의 기본 스타일입니다.

버튼 기본 스타일 바꾸기

버튼 배경색 바꾸기

버튼의 배경 색은 CSS background-color 속성에 원하는 색상 값을 넣어 변경해 줄 수 있습니다.

.button 선택자의 배경색을 바꾸기 위해 background-color:#0a0a23;를 지정했습니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

버튼 글자색 바꾸기

글자의 기본 배경색은 검은색이라 어두운 배경색을 넣으면 글자가 잘 보이지 않습니다.

따라서 가독성을 위해 버튼의 배경색과 글자색에 충분한 대비를 주는 것이 좋습니다.

이제 글자색을 바꾸기 위해 color 속성을 사용해 줍니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
}

버튼 테두리 바꾸기

버튼의 회색 테두리가 보이시나요? 이 테두리는 버튼의 기본 스타일입니다.

border-color 속성을 사용해 테두리를 수정할 수 있습니다. background-color 값과 동일하게 설정해 주면 버튼의 배경색과 테두리 색상이 같아지겠죠.

버튼의 테두리를 모두 지우려면 border:none 속성을 지정해 줍니다.

.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
}

그리고 border-radius 속성을 다음과 같이 사용해 버튼의 테두리를 둥글게 만들어줄 수 있습니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
  }

또한 다음과 같이 box-shadow 속성을 사용해 버튼 주변에 살짝 어두운 그림자 효과를 줄 수도 있습니다.

 position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);

버튼 사이즈 바꾸기

버튼 테두리 내에 공간을 더 주고 싶으면 버튼에 padding을 추가합니다.

아래 코드에서 저는 버튼의 위, 아래, 오른쪽, 왼쪽에 padding을 15px씩 줬습니다.

그리고 min-height과 min-width 속성을 각각 사용해 최소 높이와 너비를 설정했습니다. 이렇게 하면 모든 종류의 디바이스에 따라 버튼 사이즈가 조정될 수 있습니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none; 
    border-radius:10px; 
    padding:15px;
    min-height:30px; 
    min-width: 120px;
  }

버튼의 상태 스타일 바꾸기

버튼은 다음 세 가지 상태를 갖습니다.

:hover
:focus
:active

이 세 가지 상태는 각각 다른 스타일을 갖는 것이 좋습니다.

아래 섹션에서는 각각의 상태가 무엇을 의미하며 어떻게 발생하는지에 대해 간단히 설명하겠습니다. 그리고 각각의 상태에 따라 버튼에 스타일을 줄 수 있는 방법에 대해 살펴보겠습니다.

`hover` 상태 꾸미기

:hover 상태는 사용자가 버튼을 선택하거나 클릭하지 않고 마우스나 트랙패드를 올릴 때 발생합니다.

마우스를 올렸을 때의 버튼 스타일을 바꾸고 싶을 때는 :hover라는 CSS 가상 클래스(의사 클래스) 선택자를 사용할 수 있습니다.

보통 :hover를 사용해 버튼의 배경색을 바꾸곤 합니다.

부드럽게 배경색을 전환하려면 :hover와 transition 속성을 같이 사용합니다.

transition 속성은 일반 상태에서 :hover 상태로 보다 부드럽게 바뀌는 transition을 만들어줍니다.

transition 속성이 없을 때보다 배경색이 부드럽게 바뀌기 때문에 사용자 경험이 개선될 것입니다.

.button:hover {
      background-color:#002ead;
      transition: 0.7s;
  }

위 예시에서 버튼이 hover 되었을 때 배경색을 더 옅게 만들기 위해 Hex 색상 코드를 사용했습니다.

일반 상태에서 :hover 상태로 바뀔 때 transition 속성의 도움을 받아 0.7s 동안의 딜레이를 넣었습니다. 이렇게 함으로써 기존 배경 색인 #0a0a23에서 #002ead로 더 천천히 바뀌게 되는 것이죠.

:hover 가상 클래스(의사 클래스)가 모바일 화면이나 앱에서 동작하지 않는다는 점에 유의하세요. hover 효과는 터치스크린이 아닌 데스크톱 웹 애플리케이션에서 사용하세요.

`focus` 상태 꾸미기

:focus 상태는 키보드를 사용하는 유저들에게 동작합니다 - 특히 Tab키(⇥)를 눌러 버튼이 포커스 되었을 때 활성화되는 상태입니다.

잘 따라오고 계신다면 Tab 키를 눌러 버튼을 포커스 했을 때 다음과 같이 보일 것입니다.

버튼이 포커스 되었을 때 쳐지는 얇은 파란색 테두리가 보이시나요?

브라우저는 키보드로 조작했을 때의 접근성 때문에 :focus 가상 클래스(의사 클래스)에 기본 스타일을 가지고 있습니다. outline을 같이 지워버리는 것은 권장하지 않습니다.

하지만 outline을 커스터마이징 해서 잘 보이게 할 수 있습니다.

먼저 outline 색상을 transparent로 설정합니다.

그리고 outline-style을 solid로 유지합니다. 마지막으로는 box-shadow 속성을 사용해서 요소가 포커스 되었을 때 원하는 색상을 추가할 수 있습니다.

 .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
}

원하는 효과에 따라 이번에도 transition 속성을 같이 사용해 줄 수 있습니다.

  .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
    transition: 0.7s;
}

`active` 상태 꾸미기

:active 상태는 마우스나 노트북 트랙 패드로 버튼을 눌렀을 때 활성화 됩니다.

:hover와 :focus 상태를 적용한 버튼을 누르면 어떤 효과가 발생하는지 확인해 봅시다.

:hover 상태의 스타일은 버튼을 클릭하기 전 마우스를 올렸을 때 적용됩니다.

버튼을 클릭하면 :focus 상태의 스타일도 적용됩니다. :active상태와 :focus 상태가 같이 적용되기 때문이죠.

하지만 :focus와 :active는 서로 다르다는 점에 유의하세요.

:focus 상태는 요소가 포커스 되었을 때 적용되며 :active 상태는 유저가 요소를 클릭하기 위해 잡거나 누르고 있을 때 적용되는 상태입니다.

유저가 버튼을 클릭할 때의 스타일을 바꾸기 위해서는 :active CSS 가상 선택자(의사 선택자)에 스타일을 적용합니다.

이번에는 유저가 버튼을 클릭하고 있을 때의 배경색을 바꾸어보았습니다.

.button:active {
    background-color: #ffbf00;
}

결론

수고하셨습니다! 여러분은 오늘 CSS로 버튼을 스타일링할 수 있는 기본 방법에 대해 학습했습니다.

버튼의 상태에 따라 스타일링할 수 있는 방법뿐만 아니라 버튼의 배경색과 글자색을 바꿀 수 있는 방법에 대해서도 살펴보았습니다.

웹 디자인에 대해 더 공부하고 싶다면 freeCodeCamp의 반응형 웹 디자인 자격증을 확인해 보세요. 이 쌍방향 수업에서는 15개의 토이 프로젝트와 5개의 최종 결과물을 만들며 HTML과 CSS를 학습할 수 있습니다.

위 자격증 과정은 아직 베타 버전이기 때문에 가장 안정적인 최신 버전은 이곳에서 확인해 볼 수 있습니다.

읽어주셔서 감사드립니다. 즐거운 코딩하세요!

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

CSS active 유지 메뉴 active 유지 Button:active 유지

CSS 클릭 효과 유지 - CSS keullig hyogwa yuji

active, hover

CSS Input 태그를 활용한 Click Event 만들기

li 세로 형태에서 부드럽게 토글되는 형태는 불가능한건가?

이 글에서는 CSS로 버튼을 꾸미는 방법에 대해 알아보겠습니다.

목차

HTML에서 버튼 만들기

버튼 기본 스타일 바꾸기

버튼 배경색 바꾸기

버튼 글자색 바꾸기

버튼 테두리 바꾸기

버튼 사이즈 바꾸기

버튼의 상태 스타일 바꾸기

`hover` 상태 꾸미기

`focus` 상태 꾸미기

`active` 상태 꾸미기

결론

관련 게시물

광고하는

최근 소식

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의