컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Sunday, November 12, 2006

HTML-CSS] 글자 테두리, 점선/색깔 테두리 태그와 스타일 속성; Word Border


워드프로세서에서는 특정 단어에 테두리를 그려서 강조할 수 있는데, 웹문서에서도 다음의 코드를 사용하면 가능합니다.


단어에 테두리 그리기 예제


<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

☞ HTML/CSS/자바스크립트(JavaScript)

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top