[HTML/CSS] 자동으로 조절되는 세로줄 긋기 Start!

 

프론트엔드 개발자는 아니지만 <hr> 태그를 이용해서 가로선을 만들 수 있다는 것을 알고 있었다. 개인 프로젝트에서 화면정의서를 만들다가 연출면에서 선을 세우면 좋겠다는 생각을 했다. 물론 피그마로 디자인을 할 때까지만 해도 이 선 세우는게 그렇게 오래걸릴 줄 몰랐다.

 

시행착오 끝에 세로줄 긋기에 성공한 나의 과정을 시작하도록 하겠다. 혹시 하는 방법만 알고 싶은 사람은 맨 아래 '정리'에 간략하게 정리해두었으니 참고하길 바란다.

 

예..? 선을 세우라고요?

<뭉치> 디자인 중 일부분

현재 개인 프로젝트로 만들고 있는 <뭉치>에는 스레드(내용)를 한 번에 볼 수 있는 List가 존재하고 디자인 요소를 넣기 위해 세로선이 필요했다. 처음엔 가로선을 그을 수 있는 <hr> 태그로 만들 수 있다고 생각했는데.. 아니었다. 찾아보니 현재까지 세로선을 손쉽게 만들 수 있는 태그는 존재하지 않았다. 그렇다면 어떻게 만들 수 있을까?

 

.line {
  border-left: thick solid #32a1ce; //오른쪽에만 선 부여
  height: 20px; //높이로 조절
}

바로 <div> 태그를 이용하는 것이다. <div> 태그에 오른쪽에만 선을 부여할 수 있다. 그러고 나서 높이로 세로선의 길이를 조절해주면 된다. 기본적인 세로선 만들기는 여기에서 끝나면 된다. 하지만 내가 최종적으로 원하는 것은 선이 자동적으로 조절되길 원했다.

 

 

728x90

 

문제의 시작 😱

프로젝트에 해당 css 코드를 적용해본 결과다. 이상하지 않는가? 내가 원했던 시나리오는 내용에 맞춰 선이 함께 늘어나길 바랬다. 하지만 나도 양심이 없었다. height의 값을 px로 주었기 때문이다. 서둘러 %로 바꿔보았다. 하지만 인제는 선 자체가 없었졌다. 다시 px로 고치니 되었다. rem도 되고 다른 단위들 다~ 되는데 오로지 %만 되지 않았다.

 

무엇이 문제인지 도저히 몇 일 동안 해결할 수 없었다. 원인을 파악하기 위해 큰 덩어리인 프로젝트보단 온라인 코드 실행 사이트 JSFIDDLE를 이용했다. 혹시 나처럼 바로 프로젝트에서 수정 작업이 힘들다면 온라인으로 코드를 실행시킬 수 있는 사이트를 이용해보길 바란다.

 

 

 

반응형

 

 

display: flex

우선 height가 무조건 % 단위가 되어야 한다. 하지만 현 코드에서는 도저히 %가 먹히지 않았다. 이거저거 알아보다가 부모 태그에 desplay: flex를 넣어주면 된다는 것을 알았다. 그랬더니 위 캡쳐와 같이 결과물이 나왔다. 우선 파란색 선이 %로 잘 나온 것을 알 수 있다. 하지만 중요한 것이 있다.

 

 

// HTML 코드
<div class="all">
  <div>
    <p class="number">
      123
    </p>
    <div class="line">

    </div>
  </div>
  <p class="rightP">
    하하하jfljflsdjlsjflkdsf
    하하하jfljflsdjlsjflkdsf
    하하하jfljflsdjlsjflkdsf
    하하하jfljflsdjlsjflkdsf
    하하하jfljflsdjlsjflkdsf
    하하하jfljflsdjlsjflkdsf
    하하하jfljflsdjlsjflkdsf하하하jfljflsdjlsjflkdsf하하하jfljflsdjlsjflkdsf하하하jfljflsdjlsjflkdsf하하하jfljflsdjlsjflkdsfljflsdjlsjflkdsf하하하jfljflsdjlsjflkdsfljflsdjlsjflkdsf하하하jfljflsdjlsjflkdsfljflsdjlsjflkdsf하하하jfljflsdjlsjflkdsf
  </p>
</div>

// css 코드
.all {
  display: flex; // 중요 ⭐️⭐️⭐️⭐️⭐️
}

.number {
  height: 20%; // number의 경우 %로 해도 되고 px 등 자유롭게 설정 가능
  margin: 0;
}

.line { // 선을 구성하는 css 코드
  border-left: thick solid #32a1ce; // 왼쪽 선만 나오도록 하기
  height: 80%; // 자동으로 조절하기 위해서는 % 단위를 써야 한다.
  
}

.rightP {
  background-color: grey;
  margin: 0;
}

바로 모든 컨테이너가 일렬이 아니라는 것이다. 선이 숫자 아래에 그리고 내용 왼쪽에 나와야 한다. 어떻게 하면 될까? 아주 간단하다. 바로 숫자와 선 컨테이너를 하나의 <div>로 묶으면 된다.

 

 

그럼 위와 같이 선이 자동적으로 늘어난 것을 알 수 있다. 인제 내 프로젝트에도 정상적으로 잘 동작하는지 확인하도록 하자.

 

 

프로젝트에 적용시키기

초반과 비교해서 자동적으로 잘 늘어난 것을 알 수 있다 🥳 솔직히 프로젝트에 적용시킬 때 가슴이 두근두근했다. 혹시 안 될까봐.. 하지만 걱정과 달리 잘 나와서 다행이다. 살짝 수정해줄 부분이 있지만 가장 중요한 자동적으로 조절되는 세로선 긋기엔 성공했으니 기분이 매우 좋다.

 

 

정리

자동 조절되는 세로선을 만들기 위해서는 두가지만 하면 된다.

 

1. 부모 컨테이너에 display: fix 추가

2. <div>에 border-left와 height를 %로 조절

 

정리해보니 아무것도 아닌 것 같지만 실제로 최종 단계까지 가기까지 많은 생각과 고민을 했다. 처음엔 세로선이 %로는 안 나와서 당황했고 나중엔 숫자 아래에 선이 나오게 하는 방법을 어떻게 할지 말이다. 처음부터 뚝딱~ 했으면 좋았겠지만 이렇게 생각해보고 적용해보는 것도 좋은 경험이라고 생각한다.