프레임 대신 수직 진행률 막대 설치 방법 고려
개요
나는 진도표를 그릴 수 있는 웹 데스크의 틀이 매우 많다고 생각한다.
하지만 세로 진도표를 별로 본 적이 없어서 수동으로 설치해 봤어요.
전제 조건
이 보도는 아래의 사람이 쓴 것이다
이 보도는 아래의 사람이 쓴 것이다
<div />
같은 것을 사용하고 싶지 않다결실
잘한 거 여기 있다.
이루어지다
실물이'시험관에 내용 추가'라고 느껴졌으면 좋겠어요.
일반 진행률 표시줄
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에 어떻게 된 일인지 알 수 없는 라벨을 넣고 싶지 않아서 시험관은 이미지로 이루어졌습니다.
필름을 보석이나 무늬로 만들면 보석이나 저축 게임을 할 수 있을 거예요.
Reference
이 문제에 관하여(프레임 대신 수직 진행률 막대 설치 방법 고려), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/wifeofvillon/items/ad2dfc3ef017f43fbb70
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
실물이'시험관에 내용 추가'라고 느껴졌으면 좋겠어요.
일반 진행률 표시줄
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에 어떻게 된 일인지 알 수 없는 라벨을 넣고 싶지 않아서 시험관은 이미지로 이루어졌습니다.
필름을 보석이나 무늬로 만들면 보석이나 저축 게임을 할 수 있을 거예요.
Reference
이 문제에 관하여(프레임 대신 수직 진행률 막대 설치 방법 고려), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/wifeofvillon/items/ad2dfc3ef017f43fbb70
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(프레임 대신 수직 진행률 막대 설치 방법 고려), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/wifeofvillon/items/ad2dfc3ef017f43fbb70텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)