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>

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


결과

News

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

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

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

<인용:헤럴드 굿 뉴스>


즐거운 하루 되세요.


디자인/CSS 강좌 다른 글

댓글 0

*

*