progress

HTML Reference

Contents

1 개요
2 문법
3 예제 1
4 예제 2

개요

progress는 HTML5에서 제공하는 태그로, 작업의 진행 상태를 나타내기 위해 사용됩니다. 주로 파일 업로드, 다운로드, 로딩 진행 상황 등을 시각적으로 보여줄 때 유용합니다.
progress 태그는 기본적으로 게이지 형태로 표시되며, 사용자가 커스텀 스타일을 적용할 수도 있습니다.

문법

<progress value="xx" max="yy">

max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다.

예제 1

첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다.
두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다.
웹브라우저에 따라, 웹브라우저의 버전에 따라 표현 방식이 다릅니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <div>
      <progress value="20" max="100"></progress>
    </div>
    <div>
      <progress value="20" max="200"></progress>
    </div>
  </body>
</html>

예제 2

CSS로 크기를 바꾸고, 스크립트로 동적인 효과를 준 예제입니다.
버튼을 클릭하면 value를 20에서 80으로 바꿉니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      #jb {
        width: 100%;
        height: 50px;
      }
    </style>
    <script>
      function jbFunc() {
        document.getElementById( 'jb' ).value = '80';
      }
    </script>
  </head>
  <body>
    <div>
      <progress value="20" max="100" id="jb"></progress>
    </div>
    <button onclick="jbFunc()">Click</button>
  </body>
</html>

Post Views: 1

HTML Reference

HTML / Reference / q

q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.

HTML / Reference / pre

pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.

HTML / Reference / figure, figcaption

figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.

HTML / Reference / noscript

noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.

HTML / Reference / select

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.