html 글자 양 옆에 선 그어주기

 

 

해당 작업을 완성을 해야하는데

 

글자 안에 <hr>같은 태그를 어떻게 하는지 모르겠어서 찾아본 결과 간단하게 css를 사용해서 사용하면 된다고 하였다.

 

배운곳 :

 

https://okky.kr/article/367061

https://jsfiddle.net/z8jddc0o/1/

 

      .hr-sect {
        display: flex;
        flex-basis: 100%;
        align-items: center;
        color: rgba(0, 0, 0, 0.35);
        font-size: 12px;
        margin: 8px 0px;
      }
      .hr-sect::before,
      .hr-sect::after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 16px;
      }

 

스타일에 해당 소스를 넣어준다.

 

사용을 해보면

 

  <div class="hr-sect">Join us</div>

 

 

짠 이쁘게 원하는 대로 설정을 하였다.

 

이제 색이나 글씨 폰트 등 사용자 스타일에 맞게 설정을 하면 된다.