html css 밑줄 text-decoration
■ HTML에서 <a> 태그를 이용해서 링크를 걸게 되면 기본 설정 값은 파란색 글씨에 밑줄이 생기게 되는데요. 이렇게 링크가 걸린 텍스트의 밑줄은 text-decoration 속성을 이용해서 없앨 수 있습니다. 반대로 강조하고 싶은 텍스트에 선을 그릴 수도 있습니다. 이 속성을 적용해서 링크가 걸린 텍스의 밑줄을 없애보고, 반대로 일반 텍스트에 밑줄 등 여러 가지 선을 그려보겠습니다. 먼저 링크가 걸린 텍스트 예제를 만들어 볼게요.
■ 본문에 <a> 태그를 이용해서 링크를 걸어봤습니다.
■ 웹 브라우저에서 확인하면 당연히 파란색 글씨에 밑줄이 쳐진 상태로 표시되는데요. 이 밑줄을 없애보겠습니다. 이 글의 주제인 text-decoration 속성을 이용하면 되는데요.
■ <p> 태그 안에 있는 링크<a>의 속성에서 [ text-decoration: none;] 으로 속성값을 설정해주면 링크가 걸려 있는 텍스트의 밑줄이 사라지게 됩니다.
다음은 일반 텍스트에 여러 가지 줄을 그리는 경우를 보겠습니다. text-decoration 속성에 각각의 속성값을 넣어주면 되는데요. 밑줄은 (Underline), 윗줄은 (Overline), 텍스트를 관통하는 줄은 (line-through) 값을 넣어주면 됩니다. 이 역시도 예제에서 결과를 보겠습니다.
■ 세 개의 단락에 각각 텍스트를 입력하고 아이디를 부여했습니다. 세 개 모두 text-decoration 속성값을 다르게 하고 웹 브라우저에서 확인해보겠습니다.
■ 이렇게 text-decoration 속성값만 변경해주면 밑줄, 윗줄, 관통하는 선 등을 그려줄 수 있습니다. ^^ 수고하셨습니다.
