1원팁) 문장에서 원하는 부분의 글자 위에 선긋기
링크
글자위에 선 (161)
위와 같은 모양을 만들고자 할때 선긋기 용으로 일일이 div 같은 요소를 넣어야 하고 글자크기별로 가로크기 정해야 하고 여간 귀찮은게 아닙니다.
그래서 꼼수를 좀 부려 조금은 편하게 하는 방법을 생각해 봤습니다.
먼저 html 이 아래와 같이 있다 가정합니다.
[code]
<strong>IT·프로그래밍</strong> 개발 강의
[/code]
여기서 "IT" 라는 글자에만 윗선을 긋고 싶습니다. 긋고 싶은 곳에 "<span class="accent">IT</span>" 요렇게 태그로 감싸고 accent 클래스를 줍니다.
[code]
<strong><span class="accent">IT</span>·프로그래밍</strong> 개발 강의
[/code]
그리고 css는 아래와 같이 작성합니다. 선굵기는 border-top 항목에서 적절히 수정해 주세요
[code]
.accent {
display: inline-flex;
flex-direction: column;
justify-content: flex-end;
vertical-align: bottom;
border-top: 5px solid #000;
}
[/code]
간단하쥬?
라인을 2개 넣어 볼까요?
[code]
<strong><span class="accent">IT</span>·프로그래밍</strong> <span class="accent">개발</span> 강의
[/code]
잘됩니다 ^^;;;
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 15개
하드웨어부터 프론트 서버까지 ㅜㅜ