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

 
Previous Post HTML-CSS] 이미지/사진에 스크롤바 붙여, 좁은 화면에 모두 표시하기; IMG Scr...Java/자바] split()에서 Tab(탭 문자) 구분자; 마침표를 구분 기호로서 분리Java/자바] split 메서드 사용법 예제; 문자열을 배열로 변환, String to ...울트라에디트] 버그 패치(핫픽스) 다운로드 주소; UltraEdit-32 Hotfix Do...Java/자바] join 메소드: 배열을 하나의 문자열로 합치기, 구분문자 넣어Perl/펄] join 함수 사용법 예제; join Function ExampleC언어 기초 예제] 1에서 100까지, 한줄에 10개씩 숫자 쓰기C언어 기초 예제] 도스창 화면에, 1에서 100까지 숫자 쓰기리눅스/유닉스 히든파일 만들기; 숨김 파일 속성 주기; Make Hidden File, L...C언어] 원주율(PI) 계산 소스; 소수점 이하 799 자리까지 파이 값 구하기

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

Sunday, November 12, 2006

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


단어에 테두리 그리기 예제


<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 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top