CSS 기초강좌 13 (Border)

CSS Border

Border 속성은 말 그대로 content주변을 감싸는 경계선이다.
Border 속성은 border-style(실선,점선,이중실선 등..) 속성값이 없으면 다른 속성값을 줘도 아무런 효과가 없습니다.

Code

p {border-style: none;}

p {border-style: solid;}

p {border-style: dashed;}

p {border-style: dotted;}

p {border-style: double;}

p {border-style: ridge;}

p {border-style: inset;}

p {border-style: outset;}

p {border-style: groove;}

p {border-style: hidden;}

결과

None solid dashed dotted double

ridge inset outset groove

none: 아무런 값이 없는 경우
solid: 실선
dashed: 긴 점선
dotted: 짧은 점선
double: 이중실선
ridge: 불룩 튀어나온 선 (3D)
inset: 쑥 들어간 선 ㅋㅋ (3D)
outset: 툭 튀어나온 선 ^^ (3D)
groove: 그루브한 선 (3D)
hidden: 감춰진 선

Border는 상하좌우 따로 따로 값을 줄 수 있습니다. 이런점은 테두리를 디자인할때 편리합니다.
"border-(방향)-(선종류,선두께,선색깔)"의 문법을 사용해서 여러가지 서식을 만들 수 있습니다.

예제

div {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: double;

border-left-style: solid;

border-top-color: red;

border-right-color: orange;

border-bottom-color: blue;

border-left-color: green;

border-top-width: 1px;

border-right-width: 10px;

border-bottom-width: 3px;

border-left-width: 17px;

}

위의 예제와 같은 내용

<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>

결과

테두리 값을 따로 주었습니다.

border style로 소제목 만들기

<style>

.subj-style {
      padding-left: 10px;
      padding-bottom: 3px;
      font-size: 18px;
      border-left: 10px solid #333;
      border-bottom: 1px solid #333;
     }
</style>

[ html ]

<div class="subj-style">CSS tutorial 소제목</div>

border style로 소제목 만들기

CSS tutorial 소제목

마지막으로 단축형으로도 많이 사용하고 있는데 아래와 같이 사용할 수 있습니다.

단축형

border:선두께 선종류 선색깔;

p {border:1px solid #333;}

이제 borer와 이전에 배웠던 내용으로 박스형태의 서식을 만들어보죠.
이 모양은 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>

News

<p>21일 외신에 따르면, 영국 코벤트리 지역 근처에서 기하학적인 모양이 미스터리써클이 포착됐다. 이는 전설적인 기사 우화단을 연구하던 한 역사가가 위성 지도로 관련 지역을 찾아보다 발견했다. </p>

<p>미스터리써클이 발견된 지점은 3년 전 특이한 모양의 미스터리써클이 발견된 곳에서 불과 1키로미터 채 떨어지지 않는 곳이다. </p>

<p>2011년 발견된 미스터리써클은 태양을 중심으로 각각 8개와 16개 꼭지점의 별로 둘러싸여 있다. 별의 꼭지점은 피라미드 모양으로 구성되어 있고 사이에는 여러 개의 타원형 모양이 자리고 잡고있어 정교함을 보여줬다. </p>

</div>

</body>

</html>

결과

News

21일 외신에 따르면, 영국 코벤트리 지역 근처에서 기하학적인 모양이 미스터리써클이 포착됐다. 이는 전설적인 기사 우화단을 연구하던 한 역사가가 위성 지도로 관련 지역을 찾아보다 발견했다.

미스터리써클이 발견된 지점은 3년 전 특이한 모양의 미스터리써클이 발견된 곳에서 불과 1키로미터 채 떨어지지 않는 곳이다.

2011년 발견된 미스터리써클은 태양을 중심으로 각각 8개와 16개 꼭지점의 별로 둘러싸여 있다. 별의 꼭지점은 피라미드 모양으로 구성되어 있고 사이에는 여러 개의 타원형 모양이 자리고 잡고있어 정교함을 보여줬다.

<인용:헤럴드 굿 뉴스>

즐거운 하루 되세요.

저작자표시 비영리 변경금지

Vanxy

CSS 기초강좌 13 (Border)

CSS Border

티스토리툴바

CSS 기초강좌 13 (Border)

CSS Border

'디자인/CSS 강좌' Related Articles

티스토리툴바