JS없이 HTML과 CSS로 만들 수 있는 것들

웹에서 흔히 인터랙션이나 애니메이션을 구현할 때 JavaScript를 떠올리곤 합니다.

저는 이번 개인 블로그 만들기 과제 중 무한 배너를 구현하면서 JS 없이도 다양한 기능을 구현할 수 있다는 점이 흥미로웠는데요.

그래서 JS 없이 HTML와 CSS로만으로도 할 수 있는 몇 가지 웹 인터랙션과 애니메이션에 대해 조사해 보았습니다.

---

 

HTML으로 만드는 인터랙션 요소들 

✨ <details>와 <summary> : 클릭으로 내용 토글하기

HTML5에서 제공되는 이 태그로 클릭하면 내용을 열고 닫을 수 있도록 구현할 수 있습니다.

이는 드롭다운 메뉴, FAQ 섹션 등에서 활용할 수 있습니다.

 

See the Pen Untitled by 박소이 (@kousbpll-the-decoder) on CodePen.

 

 

✨ <input>과 :checked : 상태 기반 토글

:checked 가상 클래스는 체크박스 또는 라디오 버튼의 상태를 감지하는데 유용합니다.

체크박스가 선택된 상태에서는 .menu가 표시되도록 설정하여, 클릭 시 메뉴가 표시됩니다.

앞서 소개한 토글과는 또 다른 방법이라 함께 소개합니다!

 

See the Pen Untitled by 박소이 (@kousbpll-the-decoder) on CodePen.

 

✨ <progress>와 <meter> : 상태 시각화

 

이 태그를 이용해 로딩 상태나 수치 시각화도 가능합니다. 태그의 속성은 다음과 같습니다.

• value: 실제 값
• min: 최소값
• max: 최대값

 <h3>진행 상황</h3>
 <progress
      id="progress"
      value="50"
      min="0"
      max="100"
  ></progress>

 

추가로 이 태그에 css를 적용하기 위해 다음 두 가지를 적용하면 커스텀이 가능하다고 합니다.

 

::-webkit-progress-bar

progressbar의 배경이 되는 요소

 

::-webkit-progress-value

progress의 진행 bar가 되는 요소

 

이때 progressbar의 기본 속성으로 appearance가 웹상에서 이용하는 UI를 이용하는데,

커스텀을 위해 appearance를 none으로 설정해주어야 합니다.

 

See the Pen Untitled by 박소이 (@kousbpll-the-decoder) on CodePen.

 

🔎 여기서 ::-webkit이란?

webkit은 크롬, 사파리 등에서 사용하는 렌더링 엔진의 이름입니다.

CSS ::-webkit은 웹킷 엔진 기반 웹 브라우저에서만 동작하는 CSS 속성인데,

쉽게 말해 웹 브라우저가 스스로 그리는 디자인을 우리가 바꾸고 싶을 때 사용한다고 보면 될 것 같습니다.

CSS로 만드는 인터랙션 요소들

✨ hover

이미 과제에서도 사용해볼 수 있었던 hover인데요.

 

:hover는 사용자가 요소 위에 마우스를 올렸을 때 발생하는 효과입니다.

배경 색, 글자 색, 크기, 그림자 요소 등 다양한 효과를 줄 수 있습니다.

여기서 transition속성을 사용하면 효과가 부드럽게 전환됩니다.

 

See the Pen Untitled by 박소이 (@kousbpll-the-decoder) on CodePen.

 

 

✨ focus

 

focus는 텍스트 필드, 버튼 등 포커스를 받는 요소를 나타냅니다.

보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab키로 선택했을 때 발동합니다.

이를 활용하여 입력 필드에 포커스가 들어왔을 때 테두리를 강조하거나 글자 색을 변경하는 등의 효과를 줄 수 있습니다.

 

See the Pen Untitled by 박소이 (@kousbpll-the-decoder) on CodePen.

 

 

✨  CSS 키프레임 활용하기

CSS의 @keyframes 규칙을 통해 시간에 따라 애니메이션 효과를 줄 수 있습니다.

 

🔎 여기서 @keyframes 는 CSS에서 애니메이션의 단계별 동작을 정의하는 규칙입니다.

 

키프레임을 사용하기 위해선 CSS로 키 프레임 블록을 만들어야 합니다.

@keyframes 애니메이션이름 {  
  0% {  /* from */
    css속성: 속성값;
  }
  50% {
    css속성: 속성값;
  }
  100% {  /* to */
    css속성: 속성값;
  }
}

 

 

다음과 같이 스피너를 보여주는 코드를 채워보겠습니다.

이 키프레임 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름인 spin을 불러오면 사용할 수 있습니다.

@keyframes spin {
  0%  { 
	  transform: rotate(0deg); 
	}
  100% { 
	  transform: rotate(360deg); 
	}
}

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #FFE3E3;         
  border-top: 6px solid #FF6B6B;      
  border-radius: 50%;
  animation: spin 2s linear infinite;
  margin: auto;
}

 

 

animation에 같이 자주 사용하는 속성은 다음과 같습니다.

속성	설명
animation-name	사용할 keyframes 이름
animation-duration	애니메이션 걸리는 시간
animation-timing-function	가속도 (ease, linear, 등)
animation-iteration-count	반복 횟수 (infinite도 가능)
animation-delay	애니메이션 시작 전 대기 시간

 

많은 분들이 이 방법을 통해 무한 배너를 구현하셨을 거라 생각됩니다..!

이제 결과를 확인해 보겠습니다.

 

See the Pen Untitled by 박소이 (@kousbpll-the-decoder) on CodePen.

 

 

 

---

HTML과 CSS 만으로도 구현할 수 있는 인터랙션은 이외에도 다양하니,

관심이 있으시다면 다른 방법도 알아 보시고 적용해보시면 좋을 것 같습니다.

 

결과를 같이 확인하면 좋을 것 같아 CodePen이라는 것을 처음 사용해봤는데 도움이 되었으면 좋겠습니다!

읽어주셔서 감사합니다! 😊

 

 

 

 

[참고]

https://ordinary-code.tistory.com/137

https://abcdqbbq.tistory.com/96

https://betteryy.com/js-라이브러리-없이-css만으로-인터랙티브-요소-구현하기/

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes