HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면
기본적으로 아래에 밑줄이 표시됩니다.
CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다.
밑줄 없애기 (text-decoration-line)
밑줄을 없애기 위해서 'text-decoration-line' 속성을 none으로 지정하였습니다.
text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.
- none : 선 없음
- underline : 밑줄
- overline : 윗줄
- line-through : 취소선
밑줄과 윗줄, 취소선을 동시에 적용할 수도 있습니다.
예제의 주석을 하나씩 해제 하면서 테스트 해보세요.
밑줄 색깔 바꾸기 (text-decoration-color)
text-decoration-color 속성을 이용하여 색깔을 변경할 수 있습니다.
밑줄 모양 점선으로 바꾸기(text-decoration-style)
'text-decoration-style' 속성을 'dotted'로 변경해서, 밑줄 모양을 점선으로 바꾸었습니다.
'text-decoration-style' 속성은 다음 5가지 값을 가질 수 있습니다.
- solid
- double
- dotted
- dashed
- wavy
예제의 CSS 주석을 해제 하면서 스타일을 테스트 해보세요.
밑줄 모양 굵기 바꾸기 (text-decoration-thickness)
'text-decoration-thickness' 속성을 설정하여 밑줄의 굵기를 변경할 수 있습니다.
크롬으로 위 코드를 실행할 경우 'text-decoration-color'를 설정하지 않으면 밑줄 굵기가 변하지 않는데,
이것은 브라우저 버그입니다.
선 위치, 색깔, 모양, 굵기 한번에 바꾸기 (text-decoration)
text-decoration 속성을 사용하면 선위치, 색깔, 모양, 굵기를 한번에 설정할 수 있습니다.
각 속성의 값들은 스페이스로 구분하여 입력하면 됩니다.
정리하면,
링크의 밑줄을 없애기 위해서는 아래 2개의 속성 중하나를 정의하면 됩니다.
- text-decoration-line : none;
- text-decoration : none;
출처: https://hianna.tistory.com/474 [어제 오늘 내일]
'개발자 관련 공부 > 멀티캠퍼스' 카테고리의 다른 글
[기본지식 되새기기] get/post 차이 (0) | 2022.03.07 |
---|---|
[Tiles] 한 페이지에 두개의 페이지 화면을 띄우는 방법 (0) | 2022.03.04 |
[Javascript] 우클릭방지, 개발자도구(F12)방지 (0) | 2022.02.28 |
[세미프로젝트중] 이미지 대체 사용팁. placehold.co (0) | 2022.02.28 |
[인증, 감정 API] CAPTCHA 이미지, 음성, 감정분석 (0) | 2022.02.21 |
댓글