CSS Border
Border 속성은 말 그대로 content주변을 감싸는 경계선이다.
Border 속성은 border-style(실선,점선,이중실선 등..) 속성값이 없으면 다른 속성값을 줘도 아무런 효과가 없습니다.
solid: 실선
dashed: 긴 점선
dotted: 짧은 점선
double: 이중실선
ridge: 불룩 튀어나온 선 (3D)
inset: 쑥 들어간 선 ㅋㅋ (3D)
outset: 툭 튀어나온 선 ^^ (3D)
groove: 그루브한 선 (3D)
hidden: 감춰진 선
"border-(방향)-(선종류,선두께,선색깔)"의 문법을 사용해서 여러가지 서식을 만들 수 있습니다.
<style>
.dive_00 {
border-left:17px solid green;
border-right:10px solid orange;
border-top:1px dotted red;
border-bottom:3px double blue;
}
</style>
<div class="dive_00">테두리 값을 따로 주었습니다.</div>
<style>
.subj-style {
padding-left: 10px;
padding-bottom: 3px;
font-size: 18px;
border-left: 10px solid #333;
border-bottom: 1px solid #333;
}
</style>
[ html ]
p {border:1px solid #333;}
이 모양은 W3Cschool.com의 예제박스 모양을 본따서 만든 것입니다..
IE9이상이나 크롬브라우저가 아니면 좀 밋밋하게 나올 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.outdiv {
background-color:#f1f1f1;
font-weight:bolder;
padding:10px;
border:1px solid #ebebeb;
border-radius:4px;
box-shadow:3px 3px 5px #333;
}
.indiv {
background-color:#fff;
font-weight:normal;
font-size:13px;
margin-top:5px;
padding:7px;
border-left:4px solid #8ac007;
border-radius:4px;
}
a.quet {text-decoration:none;}
</style>
</head>
<body>
<div class="outdiv">
News
<div class="indiv">
<p>21일 외신에 따르면, 영국 코벤트리 지역 근처에서 기하학적인 모양이 미스터리써클이 포착됐다. 이는 전설적인 기사 우화단을 연구하던 한 역사가가 위성 지도로 관련 지역을 찾아보다 발견했다. </p>
<p>미스터리써클이 발견된 지점은 3년 전 특이한 모양의 미스터리써클이 발견된 곳에서 불과 1키로미터 채 떨어지지 않는 곳이다. </p>
<p>2011년 발견된 미스터리써클은 태양을 중심으로 각각 8개와 16개 꼭지점의 별로 둘러싸여 있다. 별의 꼭지점은 피라미드 모양으로 구성되어 있고 사이에는 여러 개의 타원형 모양이 자리고 잡고있어 정교함을 보여줬다. </p>
<a class="quet" href="http://khnews.kheraldm.com/view.php?ud=20140921000097&md=20140922003249_BK&kr=1"> <인용:헤럴드 굿 뉴스></a>
</div>
</div>
</body>
</html>
21일 외신에 따르면, 영국 코벤트리 지역 근처에서 기하학적인 모양이 미스터리써클이 포착됐다. 이는 전설적인 기사 우화단을 연구하던 한 역사가가 위성 지도로 관련 지역을 찾아보다 발견했다.
미스터리써클이 발견된 지점은 3년 전 특이한 모양의 미스터리써클이 발견된 곳에서 불과 1키로미터 채 떨어지지 않는 곳이다.
2011년 발견된 미스터리써클은 태양을 중심으로 각각 8개와 16개 꼭지점의 별로 둘러싸여 있다. 별의 꼭지점은 피라미드 모양으로 구성되어 있고 사이에는 여러 개의 타원형 모양이 자리고 잡고있어 정교함을 보여줬다.
<인용:헤럴드 굿 뉴스>즐거운 하루 되세요.
