개요

나는 진도표를 그릴 수 있는 웹 데스크의 틀이 매우 많다고 생각한다.
하지만 세로 진도표를 별로 본 적이 없어서 수동으로 설치해 봤어요.

전제 조건

이 보도는 아래의 사람이 쓴 것이다

솔직히 나도 Bootstrap 안 써봤어.

더 나아가 jQueryUI에서 프론트 데스크의 프레임이 멈췄다

맞아요. JuryUI가 너무 많이 말했어요. Materialize

예요.

HTML은 표기 언어이기 때문에 비어있는 <div /> 같은 것을 사용하고 싶지 않다

React.js는 지금부터 공부를 시작합니다

저는 인터넷 트렌드를 접하지 못해서 잘 모르겠어요.

더 이상 다중 장치를 지원하고 싶지 않습니다

결실

잘한 거 여기 있다.

이루어지다

실물이'시험관에 내용 추가'라고 느껴졌으면 좋겠어요.

일반 진행률 표시줄

CSS

      .app {
        display: inline-block;
        margin: 8px;
      }
      .app .progress {
        margin-bottom: 8px;
        border: solid 1px #ccc;
        width: 32px;
        height: 256px;
        overflow: hidden;
      }
      .app .progress__fill {
        background-color: #99ccff;
        height: 100%;
      }
      .app .progress__fill--max {
        background-color: #336699;
        height: 100%;
      }

HTML

    <div class="app">
      <div class="progress">
        <div class="progress__fill--max"></div>
      </div>
      <div class="reward">
        <div class="reward__value">100%</div>
      </div>
    </div>
    <div class="app">
      <div class="progress">
        <div class="progress__fill" style="margin-top:128px"></div>
      </div>
      <div class="reward">
        <div class="reward__value">50%</div>
      </div>
    </div>

저는 .progress__fill의margin-top속성 값을 jQuery로 하거나 React로 하면 될 것 같아요.
그나저나 BEM을 사용했지만 현재 CSS 명명 규칙은 뭘까요?

시험관과 유사한 진도표

나는 본래 무엇을 하고 싶었는데, 이것을 하고 싶었다

CSS

      .app2 {
        display: inline-block;
        margin: 8px;
      }
      .app2 .progress {
        margin-bottom: 8px;
        border: solid #ccc;
        border-width: 0px 1px 1px 1px;
        width: 32px;
        height: 256px;
        overflow: hidden;
        border-radius: 0 0 20px 20px;
        padding: 4px;
      }
      .app2 .progress > div {
        display: inline-block;
      }
      .app2 .progress__fill, .app2 .progress__fill--max {
        height: 100%;
        width: 100%;
        border-radius: 0 0 20px 20px;
      }
      .app2 .progress__fill {
        background-color: #99ccff;
      }
      .app2 .progress__fill--max {
        background-color: #336699;
      }
      .app2 .progress__highlight {
        background-color: #fff;
        width: 8px;
        height: 236px;
        position: relative;
        left: 20px;
        top: -256px;
        opacity: 0.8;
      }

HTML

    <div class="app2">
      <div class="progress">
        <div class="progress__fill--max"></div>
        <div class="progress__highlight"></div>
      </div>
      <div class="reward">
        <div class="reward__value">100%</div>
      </div>
    </div>
    <div class="app2">
      <div class="progress">
        <div class="progress__fill" style="margin-top:128px; height: 128px;"></div>
        <div class="progress__highlight"></div>
      </div>
      <div class="reward">
        <div class="reward__value">50%</div>
      </div>
    </div>

CSS.progress의 위쪽을 지우고 아래쪽을 동그랗게 문지르면 시험관 냄새가 납니다.
"어? 하이라이터도 들어가지 않나요?"그래서 추가.progress__highlight중요한 것은 의식적으로 광원을 배치하여 시험관의 상단에서 곡선 앞으로 약간 내려가는 것이다

그리고요?

이번에는 어떻게든 될 수 있는지 시험해보려고 CSS로 시험관을 만들었는데'전제'에서 말한 것처럼 표기 언어인 HTML에 어떻게 된 일인지 알 수 없는 라벨을 넣고 싶지 않아서 시험관은 이미지로 이루어졌습니다.
필름을 보석이나 무늬로 만들면 보석이나 저축 게임을 할 수 있을 거예요.