HTML과 CSS를 사용하여 진행률 표시줄의 색상을 설정하는 방법은 무엇입니까?

웹사이트 개발에서 진행률 표시줄은 웹사이트의 중요한 부분입니다. 진행률 표시줄에는 프로세스 진행 상황이 표시됩니다. 이를 통해 사용자는 로드 시간, 파일 업로드, 파일 다운로드 및 기타 유사한 작업을 포함하여 웹 사이트에서 수행되는 작업 상태를 확인할 수 있습니다. 기본적으로 회색입니다. 그러나 진행률 표시줄을 눈에 띄고 시각적으로 매력적으로 만들기 위해 HTML 및 CSS를 사용하여 색상을 변경할 수 있습니다.

진행률 표시줄이란 무엇인가요?

진행률 표시줄은 작업 진행 상황을 표시하는 데 사용됩니다. 그래픽 사용자 인터페이스 요소입니다. 기본적으로 작업이 진행됨에 따라 점차 채워지는 수평 막대와 백분율 값 또는 기타 완료 표시기로 구성됩니다. 진행률 표시줄은 웹 애플리케이션에서 사용자에게 파일 업로드, 파일 다운로드 또는 소프트웨어 설치와 같은 프로세스를 완료하는 데 걸리는 시간에 대한 피드백을 제공하는 데 사용됩니다.

HTML을 사용하여 진행률 표시줄 만들기

HTML 마크업 언어를 사용하여 진행률 표시줄을 만들 수 있습니다. HTML5에서는 요소를 사용하여 진행률 표시줄을 만들 수 있습니다. 다음은 HTML을 사용하여 기본 진행률 표시줄을 만드는 예입니다.

으아아아

위 예에서는 진행률 표시줄을 만들고 진행률 표시줄을 30% 완료로 표시하고 값 속성을 30으로 설정했습니다. 최대 속성은 100으로 설정됩니다.

예제 1

의 중국어 번역은 다음과 같습니다.

예제 1

다음은 HTML을 사용하여 기본 진행률 표시줄을 만드는 전체 코드 예제입니다

으아아아

진행률 표시줄 스타일 설정

진행률 표시줄을 만든 후 CSS를 사용하여 스타일을 지정하고 색상을 설정할 수 있습니다. CSS는 개발자에게 진행률 표시줄의 색상을 설정하기 위한 ::-webkit-progress-value 의사 요소를 제공합니다. 다음은 진행률 표시줄에 CSS 스타일을 적용하는 예입니다.

으아아아

::-webkit-progress-bar 및 ::-webkit-progress-value 의사 요소의 배경색을 모두 설정했습니다. 동시에 요소를 타겟팅하여 진행률 표시줄의 높이와 너비를 설정합니다.

예 2

다음은 HTML과 CSS를 사용하여 진행률 표시줄을 만드는 전체 코드 예제입니다.

으아아아

진행률 표시줄에 텍스트 추가

진행률 표시줄에 텍스트를 추가하여 사용자에게 추가 정보를 제공하세요. 이를 위해 ::-webkit-progress-bar 의사 요소와 ::-webkit-progress-value 의사 요소를 사용하여 두 개의 레이어를 생성합니다. 여기서 진행률 값 레이어는 진행률 표시줄 레이어 위에 있습니다. 예를 들어 -

으아아아

위의 예에서는 요소에 ::before 의사 요소를 추가했습니다. 진행률 표시줄 상단에 진행률 값이 텍스트로 표시됩니다. 또한 진행률 표시줄 중앙의 텍스트를 수정하고 글꼴 크기를 18px로 설정했습니다.

예 3

진행률 표시줄에 텍스트를 추가하기 위한 전체 코드 예제는 다음과 같습니다.

으아아아

결론

여기서 진행률 표시줄이 웹 개발에서 어떻게 유용한 도구인지 논의했습니다. 이는 사용자에게 웹사이트 작업 진행 상황에 대한 피드백을 제공합니다. 또한 웹사이트의 전반적인 디자인에 맞게 사용자 정의할 수도 있습니다.

위 내용은 HTML과 CSS를 사용하여 진행률 표시줄의 색상을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!