[CSS] Border 추가 팁!

배정규·2020년 6월 22일
0

css

목록 보기
2/6

안녕하세요! seize에요:)
border로 활용할 수 있는 추가 팁을 가지고 왔습니다.

그것은 바로!

border-bottom을 활용한 밑줄 커스터마이징입니다!

텍스트에 밑줄을 치고 싶다면

text-decoration: underline; 을 사용하면 됩니다. 간단하죠?
하지만 간단한 만큼 밑줄의 두께나 밑줄 스타일, 색상 등 내가 원하는 스타일대로 커스터마이징하기가 어렵습니다.

이럴 때 딱! border-bottom을 밑줄처럼 사용해 주는 것입니다.

이런식으로 말이죠 ^^

p {
  border-bottom: 2px dashed lightgray;
}

CSS 문법으로는 아래쪽 테두리지만
내가 원하는대로 디자인할 수 있으니 많은 개발자들이 border-bottom으로 구현하는 것을 선호합니다.

border 추가 팁은 여기까지입니다 :)


여기까지!
제 글이 조금이라도 도움이 되었으면 좋겠습니다:)
읽어주셔서 감사합니다.

Seize the day!


profile
Seize the day

0개의 댓글