SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

1원팁) 문장에서 원하는 부분의 글자 위에 선긋기 > 그누보드5 팁자료실

그누보드5 팁자료실

1원팁) 문장에서 원하는 부분의 글자 위에 선긋기 정보

1원팁) 문장에서 원하는 부분의 글자 위에 선긋기

본문

31258236_1605979689.5397.png

 

위와 같은 모양을 만들고자 할때 선긋기 용으로 일일이 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> 강의

 

31258236_1605980148.716.png

잘됩니다 ^^;;;

 

 

추천7

댓글 전체

전체 1,748 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 참여4 회 시작20.11.23 11:40 종료20.11.28 11:40
  2. 참여9 회 시작20.11.22 19:25 종료20.11.29 13:25

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT