24'C 구름 많음
서울 강남구
위와 같은 모양을 만들고자 할때 선긋기 용으로 일일이 div 같은 요소를 넣어야 하고 글자크기별로 가로크기 정해야 하고 여간 귀찮은게 아닙니다.
그래서 꼼수를 좀 부려 조금은 편하게 하는 방법을 생각해 봤습니다.
먼저 html 이 아래와 같이 있다 가정합니다.
<strong>IT·프로그래밍</strong> 개발 강의
여기서 "IT" 라는 글자에만 윗선을 긋고 싶습니다. 긋고 싶은 곳에 "<span class="accent">IT</span>" 요렇게 태그로 감싸고 accent 클래스를 줍니다.
<strong><span class="accent">IT</span>·프로그래밍</strong> 개발 강의
그리고 css는 아래와 같이 작성합니다. 선굵기는 border-top 항목에서 적절히 수정해 주세요
.accent {
display: inline-flex;
flex-direction: column;
justify-content: flex-end;
vertical-align: bottom;
border-top: 5px solid #000;
}
간단하쥬?
라인을 2개 넣어 볼까요?
<strong><span class="accent">IT</span>·프로그래밍</strong> <span class="accent">개발</span> 강의