1원팁) 문장에서 원하는 부분의 글자 위에 선긋기 정보
1원팁) 문장에서 원하는 부분의 글자 위에 선긋기
관련링크
http://글자위에 선
85회 연결
본문
위와 같은 모양을 만들고자 할때 선긋기 용으로 일일이 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> 강의
잘됩니다 ^^;;;
추천
12
12
댓글 15개
최고의 팁입니다.
감사합니다.
오 좋습니다 감사합니다;.
좋은 팁 감사합니다
퍼블왕이네여 ㅋㅋㅋ
먹고 살려니 별거 다해요.
하드웨어부터 프론트 서버까지 ㅜㅜ
하드웨어부터 프론트 서버까지 ㅜㅜ
감사합니다.^^
좋은 정보 감사합니다.
감사합니다.^^
감사합니다
오~ 감사합니다
이야 감사합니당
좋은데 글자가 있는 페이지에 네임펜으로 그리는거도 좀 주세요
감사합니다~
