Trio 홈페이지 텍스트(블럭) 주위에 틀 만들기 예제 예제 메뉴로

코드 색상 범례:<style type="text/css>...</style>, 내용 텍스트, 사용에 관한 설명.

블럭이란 쉽게 이해하려면 자동드로 줄바꿈이 되는 것을 말한다.
추가적인 설명: HTML 규격, HTML 해설, CSS 규격 box 특성 설명, CSS box 특성 해설(요약)

견본 10(sample10)

.sample10 { border: solid green }
<p class=sample10>견본 10(sample10)</p>
박스 보더 설명 참조: CSS2

견본 11(sample11)

.sample11 { border: solid thin green }
<p class=sample11>견본 11(sample11)</p>
박스 보더 설명 참조: CSS2

견본 12(sample12)

.sample12 { border: solid green; border-width:1pt; }
<p class=sample12>견본 12(sample12)</p>
박스 보더 굵기 설명 참조: CSS2

견본 13(sample13)

.sample13 { border: solid green; border-width:10pt; }
<p class=sample13>견본 13(sample13)</p>
박스 보더 굵기(밝기) 설명 참조: CSS2

견본 20(sample20)

.sample20 { border: solid green; border-width:1pt; text-align:center;}
<p class=sample20>견본 20(sample20)</p>
텍스트 정렬 설명 참조: CSS2

견본 21(sample21)

.sample21 { border: solid green; border-width:1pt; text-align:right;}
<p class=sample21>견본 21(sample21)</p>
텍스트 정렬 설명 참조: CSS2

견본 30(sample30)

.sample30 { border: solid green; border-width:1pt; padding:5pt;}
<p class=sample30>견본 30(sample30)</p>
박스 글자와 보더 간격(패딩) 설명 참조: CSS2

견본 31(sample31)

.sample31 { border: solid green; border-width:1pt; margin:5pt;}
<p class=sample31>견본 31(sample31)</p>
박스 보더 주위의 간격(마진) 설명 참조: CSS2

견본 32(sample32)

.sample32 { border: solid green; border-width:1pt; padding:5pt; padding-top:10pt; margin:10pt; margin-left:50pt; margin-right:50pt;}
<p class=sample32>견본 32(sample32)</p>
박스 위치별 마진과 패딩 설명 참조: CSS2 border-left, CSS2 margin-left

견본 33(sample33)

.sample33 { border: solid green; border-width:1pt; text-indent:10%;}
<p class=sample33>견본 33(sample33)</p>
들여 쓰기, 10%
박스 보더 굵기 설명 참조: CSS2

견본 40(sample40)

.sample40 { border: solid green; border-width:1pt; padding:5pt; text-align:center; width:200pt;}
<p class=sample40>견본 40(sample40)</p>
박스 너비 설명 참조: CSS2

견본 41(sample41)

.sample41 { border: solid green; border-width:1pt; padding:5pt; text-align:center; width:100pt;}
<p class=sample41>견본 41(sample40)</p>
폭이 좁으면 다음 줄로 자동 줄바꿈을 함.
박스 너비 설명 참조: CSS2

견본 50(sample50)

.sample50 { border: solid green; border-width:5pt; padding:5pt; text-align:center; width:300pt; background-color:ffff00;}
<p class=sample50>견본 50(sample50)</p>
배경 설명 참조: CSS2

견본 51(sample51)

.sample51 { border: solid green; border-width:5pt; padding:5pt; text-align:center; background-color:ffff00; width:50%; font-size:15pt; font-weight:bold; color:blue;}
<p class=sample51>견본 51(sample51)</p>
폰트 설명 참조: CSS2 font-size, CSS2 font-weight, CSS2 color

견본 52(sample52)

.sample52 { border: solid green; border-width:5pt; padding:5pt; text-align:center; width:50%; background-color:ffff00; font-size:15pt; font-weight:bold; color:blue; font-family:궁서; font-style:italic; margin-left:20%;}
<p class=sample52>견본 52(sample52)</p>
폰트 설명 참조: CSS2 font-family, CSS2 font-style, CSS2 margin-left

견본 60(sample60)

.sample60 { border: solid green; border-width:5pt; padding:5pt; text-align:center; width:50%; background-color:ffff00; font-size:15pt; font-weight:bold; color:blue; text-decoration:overline;}
.sample60 {text-decoration:underline;}
<p class=sample52>견본 52(sample52)</p>
텍스트 위와 아래 줄로 장식, 한번에 지정 할 수 없고 한번 지정한 후 다시 지정하면 먼저 지정된 특성이 전달되어 아래, 위에 다 줄 장식이 나타남.
텍스트 장식 설명 참조: CSS2

견본 11(sample11)
견본 50(sample50)
상기 코드 sample11, sample50 참조
<div class=sample11>견본 11(sample11)
<blockquote class=sample50>견본 50(sample50)</blockquote>
</div>
블럭 안에 다시 블럭이 들어가면 자동적으로 줄바꿈을 하면서 자체 스타일을 표현한다.

견본 20(sample20)
견본 41(sample41)
상기 코드 sample20, sample41 참조
<div class=sample20>견본 20(sample20)
<blockquote class=sample41>견본 41(sample41)</blockquote>
</div>
sample20은 중앙에 정렬하므로 그 특성이 전달되어 그 안의 블럭 sample41도 줄바꿈하여 중앙에 위치된다.

이 색상은 코드와 관계없이 설명을 위해 삽입 한 색상임



<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<html lang="ko">
<head>
<title>Trio 홈페이지 - 텍스트(블럭) 스크립트, 주위에 틀 만들기 예제</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-KR">

<style type="text/css">
.sample10 { border: solid green }
.sample11 { border: solid thin green }
.sample12 { border: solid green; border-width:1pt; }
.sample13 { border: solid green; border-width:10pt; }
.sample20 { border: solid green; border-width:1pt; text-align:center;}
.sample21 { border: solid green; border-width:1pt; text-align:right;}
.sample30 { border: solid green; border-width:1pt; padding:5pt;}
.sample31 { border: solid green; border-width:1pt; margin:10pt;}
.sample32 { border: solid green; border-width:1pt; padding:5pt; 
  padding-top:10pt; margin:10pt; margin-left:50pt; margin-right:50pt;}
.sample40 { border: solid green; border-width:1pt; padding:5pt; 
  text-align:center; width:200pt;}
.sample41 { border: solid green; border-width:1pt; padding:5pt; 
  text-align:center; width:100pt;}
.sample50 { border: solid green; border-width:5pt; padding:5pt; 
  text-align:center; width:300pt; background-color:ffff00;}
.sample51 { border: solid green; border-width:5pt; padding:5pt; 
  text-align:center; width:50%; background-color:ffff00; font-size:15pt; 
  font-weight:bold; color:blue;}
.sample52 { border: solid green; border-width:5pt; padding:5pt; 
  text-align:center; width:50%; background-color:ffff00; font-size:15pt; 
  font-weight:bold; color:blue; font-family:궁서; font-style:italic; 
  margin-left:20%;}
.sample60 { border: solid green; border-width:5pt; padding:5pt; 
  text-align:center; width:50%; background-color:ffff00; font-size:15pt; 
  font-weight:bold; color:blue; text-decoration:overline;}
.sample60 {text-decoration:underline;}
</style>

<style type="text/css">에서 </style>까지의 모든 내용을
별도 화일 file.css에 저장하고 전체 부분을

<link rel="stylesheet" href="file.css" type="text/css">

로 대체하여도 같은 결과를 갖는다. 
화일 안에 <style type="text/css">와 </style>를 포함시키지 않아야 한다.
여러번 복사해야 하는 내용은 이렇게 하는 것이 편리하다. 
</head>

<body>

내용 코드는 상기 설명에 각각 있으므로 생략한다.

</body>
</html>
번역문 소유자 - Trio 홈페이지 제공 이 문서(http://trio.co.kr/webrefer/csex/cxblock.html)는
자유로이 연결 사용이 가능함.		 예제 메뉴로