Sunday, November 12, 2006
HTML-CSS] 글자 테두리, 점선/색깔 테두리 태그와 스타일 속성; Word Border
워드프로세서에서는 특정 단어에 테두리를 그려서 강조할 수 있는데, 웹문서에서도 다음의 코드를 사용하면 가능합니다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
웹 페이지 출력 결과:
마치 이 세상의 것이 아닌 것처럼 여겨졌다.
아직은 희미한 환영에 지나지 않았다.
그곳에는 영원한 소낙비가 내리고 있는 것 같았다. 산길을 등지며 시가지로 내려왔었다. 열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
문장에서, 테두리로 강조해야 할 부분에 span 태그를 붙인 후,
border 속성에 "선 굵기" + "선의 형태" + "선의 색깔" 순으로 스타일을 지정합니다.
테두리를 자주 사용한다면 .my-text-border 이런 식의 클래스를 하나 만들어서 쓰면 편리합니다.
테두리를 점선으로 나타내기 위해서는 dashed 또는 dotted 라는 값을 지정하는데, IE와 파이어폭스에서는 좀 다르게 점선이 표현됩니다.
▶▶ HTML-CSS] 형광펜 효과, 글자 배경색을 초록색/노란색/분홍색 형광펜처럼 - Highlighters
단어에 테두리 그리기 예제
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
<html>
<head>
<style type="text/css">
.my-text-border { border:2px dotted #0000FF }
</style>
</head>
<body>
마치 <span style="border:1px solid">이 세상의 것이 아닌 것처럼</span> 여겨졌다.
<br /><br />
아직은 <span style="border:2px dashed red">희미한 환영</span>에 지나지 않았다.
<br /><br />
<!-- 이번에는 my-text-border 라는 클래스로 적용 -->
<span class="my-text-border">그곳에는 영원한 소낙비가 내리고 있는 것 같았다. 산길을 등지며 시가지로 내려왔었다. 열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.</span>
</body>
</html>
<head>
<style type="text/css">
.my-text-border { border:2px dotted #0000FF }
</style>
</head>
<body>
마치 <span style="border:1px solid">이 세상의 것이 아닌 것처럼</span> 여겨졌다.
<br /><br />
아직은 <span style="border:2px dashed red">희미한 환영</span>에 지나지 않았다.
<br /><br />
<!-- 이번에는 my-text-border 라는 클래스로 적용 -->
<span class="my-text-border">그곳에는 영원한 소낙비가 내리고 있는 것 같았다. 산길을 등지며 시가지로 내려왔었다. 열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.</span>
</body>
</html>
웹 페이지 출력 결과:
마치 이 세상의 것이 아닌 것처럼 여겨졌다.
아직은 희미한 환영에 지나지 않았다.
그곳에는 영원한 소낙비가 내리고 있는 것 같았다. 산길을 등지며 시가지로 내려왔었다. 열쇠고리를 산길에 버렸었지만, 마치 지니고 있는 것 같은 느낌이 들어서 호주머니 속으로 손을 넣었다.
문장에서, 테두리로 강조해야 할 부분에 span 태그를 붙인 후,
border 속성에 "선 굵기" + "선의 형태" + "선의 색깔" 순으로 스타일을 지정합니다.
테두리를 자주 사용한다면 .my-text-border 이런 식의 클래스를 하나 만들어서 쓰면 편리합니다.
테두리를 점선으로 나타내기 위해서는 dashed 또는 dotted 라는 값을 지정하는데, IE와 파이어폭스에서는 좀 다르게 점선이 표현됩니다.
▶▶ HTML-CSS] 형광펜 효과, 글자 배경색을 초록색/노란색/분홍색 형광펜처럼 - Highlighters
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home