[CSS] html, css로 pipeline 만들기

 

 

고객님 요청 사항

 

 

1. html, css로 pipeline 만들기

처음에는 상단에 빨간 그래프처럼 html과 css만 이용해서 pipeline을 만들었다. 내가 참고한 pipeline은 pipe를 ::before 태그를 써서 한 칸에 100%로 잡고 크기를 조절해놔서 그대로 사용할 수 없었다. 나는 서버 쪽에서 열과 행을 관리하기 쉽게 만들어야 했기에 table로 pipeline을 만들고 칸마다 채워나갈 수 있게 만들었다.

 

<article class="area_pipeline">
  <table>
    <thead>
      ...
    </thead>
    <tbody>
      <tr>
        <th>WT MD <br/>003-004</th>
        <th>
          <em>Ascites therapy internal drain catheter</em>
		</th>
		<td><div><span></span></div></td>
		<td><div><span></span></div></td>
		<td><div><span></span></div></td>
		<td><div><span></span></div></td>
		<td><div><span></span></div></td>
		<td><div><span class="last"></span></div></td>
		<td><div></div></td>
		<td><div></div></td>
		<td><div></div></td>
      </tr>
	    ...
	</tbody>
  </table>
</article>

 

.area_pipeline table {
    border-collapse: separate;
    border-spacing: 0;
}
.area_pipeline table tr th,
.area_pipeline table tr td {
	border-right: 1px dotted #ccc;
    border-bottom: 1px solid #999;
    padding: 20px 0;
    position: relative;
}

.area_pipeline table tbody td div {
	position: relative;
    display: block;
    width: 100%;
    height: 15px;
    background-color: #f2f2f2;
    background: linear-gradient(180deg, rgb(200,200,200) 0%, rgb(255,255,255) 50%, rgb(255,255,255) 75%, rgb(209,209,209) 100%);
}
.area_pipeline table tbody td span {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: calc(100% + 1px);
    height: 15px;
    background-color :#111;
    background: linear-gradient(180deg, rgb(255,50,50) 0%, rgb(255,200,200) 50%, rgb(235,13,13) 75%, rgb(255,164,164) 100%);
}
.area_pipeline table tbody td span.last{
    border-radius: 0 7.5px 7.5px 0;
}

 

 

---

 

 

2. 단계에 따라 pipe 색 조절하기

작업을 마치고 얼마 후 고객님에게 단계별로 채도가 다르도록 수정해달라는 요청이 왔다. 간만에 스크립트 작업을 하게 되었다.

const pipeTr = $('.area_pipeline tbody tr');

$(pipeTr).each(function(index, item){
  var index = index + 1;
  const pipeTd = $('.area_pipeline tbody tr:nth-of-type(' + index +') td');

  $(pipeTd).each(function(index2, item2){
    var index2 = index2 + 1;
    const opacity = (index2 / 10) + 0.1;

    if($(this).find('span').hasClass('last')){
      $(this).parent('tr').find('span').css( "background-color", "rgba(0,0,120," + opacity + ")" );
    };
  });
});

1. 원래 있던 background(빨간색)을 없앴다.
2. 반복문 each를 이용해 tr을 한 바퀴 도는 동안 각각의 td를 돌 수 있도록 반복문을 중복해서 사용했다.
3. 몇 번째 td 안에 span.last가 있는지 확인하고 그에 따라서 opacity가 조절되도록 rgba 컬러를 넣어줬다.

 

수정 완료

컬러가 생각보다 차이가 적어서 고객님 마음에 들지는 모르겠지만 일단 구현은 완료했다.