Style

상자속성1

상자 속성에서는 내용(contents)의 상하좌우의 여백(margin)을 지정하는 방법과 테두리(border)의 두께와 색상 스타일을 지정하는 방법, 그리고 내용(contents)와 테두리(border) 사이의 여백(padding)을 지정하는 방법을 설명하겠습니다. 여기에서 상자(Box)라는 어휘때문에 상자관련 CSS를 생각하면 항상 사각 테두리가 둘러싸인 상자를 생각하는 경우가 많이 있습니다. 이 장에서 배울 상자는 단순한 의미의 상자가 아니라 상자를 투명하게도 제작할 수 있고, 테두리를 만들어서 적용할 수도 있습니다. 그러면, 이번 시간에는 상자속성 중에서 여백(margin)과 테두리(border)에 대해서 알아볼까요?

여백(margin)

SELECTOR { margin : 속성값 속성값 속성값 속성값}

margin 속성은 여백을 지정하는 방법입니다.
HTML에서는< P align=right, center, left >, vspace(세로여백), hspace(가로여백)과 같이 단순할 수 밖에 없었지만 이곳 CSS에서의 margin 속성을 이용하면 원하는 곳에 자유롭게 위치할 수 있게 됩니다.
각 속성의 속성값은 퍼센트와 길이단위(length)로 나타냅니다.

margin-top	위쪽 여백을 지정
margin-right	오른쪽 여백을 지정
margin-bottom	아래쪽 여백을 지정
margin-left	왼쪽 여백을 지정

※ 아래처럼 문장을 적절한 곳에 위치할 수 있답니다. ^^

p style="margin-right:0; margin-left:20;"

p style="margin-right:0; margin-left:120;"

아침마다

눈썹 위에 서리 내린

이마를 낮춰

어제처럼 빕니다.

살아봐도 별수없는

세상일지라도

무책이 상책인 세상일지라도

아주 등 돌리지 않고

반만 등 돌려 군침도 삼켜가며

그래서 더러 용서도 빌어가며

하늘로 머리 둔 이유도

잊지 않아가며

신도 천사도 아닌 사람으로

가장 사람답게 살고 싶습니다.

p style="margin-right:10; margin-left:0

p style="margin-right:70; margin-left:0

margin-top:50pt; margin-right: 20pt를 사용한 예

margin-bottom:100pt ; margin-left:90pt를 사용한 예

margin-top:70pt;margin-left:50pt를 사용한 예

margin-bottom:60pt; margin-right:50pt를 사용한 예

Shorthand란?

Shorthand란 한글로 "속기"라는 말인데, 어감은 비슷합니다. 앞서 설명한 margin-top, margin-bottom, margin-right, margin-left 속성과 속성값을 일일이 지정하는 것이 아니라 대표 속성인 margin에 속성 값만을 넣는 형식을 말합니다.
Shorthand는 속성 값만을 나타낸다는 점과 소스코드를 줄여준다는 점에서 유용하다고 할 수 있으나, 숙련자가 아닌 경우는 입력할 때나 수정할 때 자칫 혼동을 할 경우가 많습니다. margin-top, margin-bottom, margin-right, margin-left를 하나씩 적어서 제작하는 것이 좋습니다.
Shorthand 속성은 개별 속성만을 나열해 적는 것으로 상ㆍ우ㆍ하ㆍ좌로 지정하며, 외울 때에는 시계방향으로 지정한다고 생각하면 됩니다.
상자속성에서 shorthand 기능을 하는 것은 margin, border-width, border-style, border-color, padding이 있습니다.

margin:10pt

하나의 속성값을 지정했을 경우(전체 속성값이 동일함을 말합니다.)
margin-top, margin-left, margin-right, margin-bottom 모두 10pt로 설정됩니다.

비 오는 거릴 걸었어 너와 걷던 그 길을 눈에 어리는 지난 얘기는 추억일까 그날도 비가 내렸어 나를 떠나가던 날 내리는 비에 너의 마음도 울고 있다면 다시 내게 돌아와줘. 기다리는 나에게로

margin:10pt 20pt

두개의 속성값을 지정했을 경우(상하/좌우의 속성 값을 말합니다.)
margin-top, margin-bottom은 10pt / margin-left, margin-right는 20pt로 설정됩니다.

비 오는 거릴 걸었어 너와 걷던 그 길을 눈에 어리는 지난 얘기는 추억일까 그날도 비가 내렸어 나를 떠나가던 날 내리는 비에 너의 마음도 울고 있다면

margin:10pt 20pt 30pt

세 개의 속성값을 지정했을 경우(상/좌우/하의 속성 값을 말합니다.)
margin-top은 10pt / margin-left, margin-right은 20pt / margin-bottom는 30pt로 설정됩니다.

margin:10pt 20pt 30pt 40pt

네 개의 속성값을 지정했을 경우(시계방향 순으로 상우하좌의 속성값을 말합니다.)
margin-top은 10pt / margin-right은 20pt / margin-bottom는 30pt / margin-left는 40pt 로 설정됩니다.

테두리(border)

SELECTOR { border-style : 속성값}

border-style은 선의 모양을 설정하며, 속성에는 border-top-style(상) / border-right-style(우) / border-bottom-style(하) / border-top-style(좌) 각각에 선 모양을 설정할 수 있습니다.
border-style은 웹 사이트에서 아주 많은 사랑을 받고 있는 부분입니다. 또한 실무나 개인 홈페이지 작업에 있어서 활용에 따라 다양한 응용효과를 만들어 낼 수 있는 부분입니다.
border-style 중 dotted 와 dashed는 익스플로러 5.0에서는 지원되지 않습니다. 익스플로러 5.0에서 dotted와 dashed는 solid와 동일하게 보입니다. 익스플로러 5.5부터 지원을 합니다.
속성값은 아래와 같습니다.

None	border=0 으로 border-style은 사용하지 않으며 border-width의 값은 0이 됩니다.
Dotted	점선 모양
Dashed	굵은 점선 모양
Solid	실선 모양
Double	이중 실선 모양
Groove	오목하게 들어간 액자 테두리 모양
Ridge	볼록하게 나온 액자 테두리 모양
Inset	왼쪽 위에서 빛을 비추어 명암을 준 모양으로 오목한 모양
Outset	왼쪽 위에서 빛을 비추어 명암을 준 모양으로 볼록한 모양

※ 여러 모양의 테두리 선

Dotted

Dashed

Solid

Double

Groove

Ridge

Inset

Outset

SELECTOR { border-width : 속성값}

border-width는 테두리의 폭을 설정하며, 속성에는 border-top-width(상) / border-right-width(우) / border-bottom-width(하) / border-top-width(좌) 각각에 폭을 설정할 수 있습니다.
속성값은 thin, medium, thick와 같이 CSS의 길이 단위 값 pt, px, cm등이 있습니다.
속성 값의 설정은 하나를 적용하는 방법과 shorthand 방법을 이용하여 4개를 한꺼번에 설정하는 방법이 있습니다.

※ 여러 모양의 테두리 폭

border-top-width:1px;
border-right-width:3px;
border-bottom-width:5px;
border-left-width:7px;

border-top-width:20px;
border-right-width:10px;
border-bottom-width:5px;
border-left-width:7px;

border-top-width:10px;
border-right-width:1px;
border-bottom-width:5px;
border-left-width:50px;

border-top-width:7px;
border-right-width:30px;
border-bottom-width:20px;
border-left-width:1px;

SELECTOR { border-color : 속성값}

border-color는 테두리의 색상을 설정하며, 속성에는 border-top-width(상) / border-right-width(우) / border-bottom-width(하) / border-top-width(좌) 각각에 색을 설정할 수 있습니다.
속성값은 원하는 color를 RGB Hexa code(#RRGGBB)형식으로 지정할 수도 있고, CSS에서 지원하는 16가지 색상, 즉 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow 등을 적용할 수도 있습니다.

※ 여러 색깔의 테두리 선

border-top-color : teal ;
border-right-color : fuchsia;
border-bottom-color : lime ;
border-left-color : olive ;