8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin)
앞에서 배경(Background)과 경계(Border), 여백을 설명하면서 그림으로 경계(border)와 HTML 요소의 내부 여백을 나타내는 padding, 외부 여백을 나타내는 margin에 대해서 설명하였는데 여기서는 구체적으로 관련 속성들을 어떻게 설정하고 어떻게 그 결과가 나타나는지 알아봅니다.
8.2.1 내부여백(padding)과 관련된 속성들
내부 여백은 배경과 경계, 여백 도입부분에서 나타낸
그림에서와 같이 HTML5 요소를 나타내는데 있어 직사각형 형태로 나타낼 때 그 안에 요소의 내용(content)와의 상(top), 하(bottom), 좌(left), 우(right)
여백을 줄 수 있는데 이 때 사용하는 여백의 이름이 바로 padding을 사용합니다.
이를 사용하기 위해서는 각각 padding-top, padding-bottom,
padding-left, padding-right 속성을 이용하거나 이 4 가지 속성을
모두 포함하는 형태인 padding 속성을 이용할 수 있으며 사용 형식은 다음과 같이 2 가지 형태로 사용할 수 있습니다.
padding-top:
length | percentage
padding-bottom: length | percentage
padding-left: length | percentage
padding-right: length | percentage
padding: length | percentage
위에서 속성값으로 length는 px, pt, cm, em 단위로 명시해주면 됩니다. 다음으로 percentage는 요소 내용(content)의 너비(width)의 퍼센트(percentage)를 나타냅니다.
여러분이 2 번째 형식을 이용해서 내부 여백(padding)을
설정할 경우 상(top), 우(right), 하(bottom), 좌(left) 순서로 속성값을 모두 “padding: 5px 10px 15px 20px”와 같이 작성할 수도 있지만 이 중 몇 개의 값으로만 설정할
수도 있습니다.
만일 “padding: 5px”과 같이 설정할 경우
padding-top: 5px, padding-right:5px, padding-bottom: 5px, padding-left:5px을
의미합니다. 다음으로 “padding: 5px 10px”과
같이 2개의 length 값의 형태로 설정할 경우에는 padding-top, padding-bottom 속성값이 5px을, padding-right, padding-left 속성값이 10px로
설정됩니다.
마지막으로 “padding: 5px 10px 15px”과 같이 3개의 length 값의 형태로 설정할 경우에는 padding-top 속성값이 5px, padding-right,
padding-left 속성값이 10px로 설정되고 padding-bottom
속성값이 15px로 설정됩니다.
이제 간단한 예제를 하나 해봅니다. 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>padding 예제</title>
<style>
p {padding-top:10px;
padding-left:20px;
color:blue;
background-color:yellow;
}
div{padding:10px;
background-color:yellow;
}
</style>
</head>
<body>
<p>1. 프로그래밍을 통해 자신의 아이디어를 구현해보자.</p>
<div><img
src="flower2.jpg" width="200",
height="150"/></div>
</body>
</html>
위와 같이 작성하고 “paddingEx.html”로 저장합니다. IE9로 연결하여 보면 다음과 같이 p , div 요소에 설정된 padding 속성대로 스타일이 적용되어 나타납니다.
8.2.2 경계(border)와 관련된 속성들
HTML 요소의 경계(border)를 직선으로 나타낼 것인지 점선(dotted line) 등으로 나타낼 것인지와 같이 경계의 선과 관련된 속성을 설정하거나 경계선의 색, 두께 등을 설정할 수 있으며 더 편한 방법으로 이 모든 속성을 포함한 형태로 설정할 수도 있습니다.
border-style 속성
border-style 속성은 경계선(border line)을 직선으로 혹은 점선(dotted line) 등으로
사용하는 속성입니다. 보다 세분화하여 설명하자면
border-top-style, border-right-style, border-bottom-style, border-left-style 속성으로
나누어 각각 설정할 수도 있는데 이렇게 4 방향에 대한 경계선의 형태를 설정하는 번거로움을 줄이기 위해서 border-style 속성을 이용하여 다음과 같이 다양한 속성값들을 이용하여 설정하게 됩니다.
border-style:
none | hidden | dotted | dashed | solid | double | groove
ridge | inset | outset
위의 border-style 속성값으로 오는 값들을 표로 정리하면 다음과 같습니다.
|
속성값 |
기능 |
|
none |
경계선이 없음. |
|
hidden |
경계선은 있으나 시각적으로는 안보이게 처리 |
|
dotted |
경계선을 점선으로 나타냄 |
|
dashed |
경계선을 대시 기호( - )로 나타냄 |
|
solid |
경계선을 실선으로 나타냄 |
|
double |
경계선을 이중선으로 나타냄 |
|
groove |
경계선이 홈이 파인 것처럼 보이게 할 때 사용 |
|
ridge |
경계선 부분이 groove와 반대로 홈이 올라온 것처럼 보이게 할 때 사용 |
|
inset |
내용(content)가 오목렌즈처럼 안으로 들어간 것처럼 보이도록 경계선을 나타냄 |
|
outset |
내용(content)가 볼록렌즈처럼 밖으로 나온것처럼 보이도록 경계선을 나타냄 |
이해를 돕기
위해서 border-style 속성값들에 대해서 어떤 결과가 나타나는지 알아봅니다. 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>border-style 예제</title>
<style>
p{ color:blue; background-color:yellow;}
p#none {border-style:none}
p#hidden {border-style:hidden}
p#dotted {border-style:dotted}
p#dashed {border-style:dashed}
p#solid {border-style:solid}
p#double {border-style:double}
p#groove {border-style:groove}
p#ridge {border-style:ridge}
p#inset {border-style:inset}
p#outset {border-style:outset}
</style>
</head>
<body>
<p id="none">1. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="hidden">2. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="dotted">3. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="dashed">4. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="solid">5. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="double">6. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="groove">7. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="ridge">8. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="inset">9. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="outset">10. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
</body>
</html>
위와 같이 p 요소를 이용하여 앞 번호를 제외하고 동일한 내용(content)에 대해서 각각 border-style 속성값을 설정하고
“border-styleEx.html”로 저장합니다. 먼저 Firefox를 이용하여 연결합니다.
만일 “<p id="dotted">3. 프로그래밍을 통해 자신의 아이디어를 구현해보자.</p>”에 대해서 윗 (top) 부분만 dotted 형태로 나타내게 하려면 <style>…</style> 블록에서 다음과 같이 해당 부분을 border-top-style 속성으로 설정해주면 됩니다.
p#dotted {border-style:dotted} -> p#dotted {border-top-style:dotted}
저장하고 Firefox로 보면 다음과 같이 윗(top) 부분만 점선으로 나타납니다.
border-width 속성
border-width 속성은 경계(border)의 두께(thickness)를 나타내는데 사용되는 속성입니다. border-width 속성 역시 border-style 속성과
마찬가지로 세분화하면 border-top-width, border-right-width,
border-bottom- width, border-left-width 속성을 이용하여 각각 설정할 수도 있지만 여기서는 다음과 같은
형식을 이용하여 간편하게 border-width 속성을 설명합니다.
border-width: length | thin | medium | thick
위에서 border-width 속성값으로 length는 px 같이 수치값으로 설정하는 경우이고 thin은 가장 얇게, medium은 중간, thick은 두텁게와 같이 수치값으로 나타낼 수 없는 형태로 사용할 수 있습니다. 방금 전 사용한 예제를 가지로 조금 수정하여 알아볼까요? 메모장으로 “border-styleEx.html”을 열고 다음과 같이 수정합니다.
<head>
<title>border-width 예제</title>
<style>
p{ color:blue; background-color:yellow;}
p#thin {border-style:solid;
border-width:thin}
p#medium {border-style:solid;
border-width:medium}
p#thick {border-style:solid;
border-width:thick}
p#pxall {border-style:solid;
border-width: 10px }
</style>
</head>
<body>
<p id="thin">1. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="medium">2. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="thick">3. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="pxall">4. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
</body>
위에서 다른 border-width 속성에 대해서 설명은 생략하고 마지막의 “border-width: 10px”에 대해서 잠깐 설명하면 경계 두께(thickness)를 4 방향 모두 10px로 설정함을 의미하므로 해당 부분을
“border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width:
10px;”와 같이 설정해도 동일한 결과를 나타냅니다.
이제 다른 이름으로 저장을 선택하여 “border-widthEx.html”로 저장합니다. Firefox를 이용하여 연결하면 다음과 같이 나타납니다.
border-color 속성
border-color 속성은 경계선(border line)의 색(color)를 나타내는데 사용되는 속성입니다. border-color 속성 역시 앞서 border-style,
border-width 속성과 마찬가지로 세분화하면 border-top-color,
border-right-color, border-bottom-color, border-left-color 속성을 이용하여 각각 설정할
수도 있지만 여기서는 다음과 같은 형식을 이용하여 간편하게 border-color 속성을 설명합니다.
border-color: color
border-color
속성값으로 명시한 color 자리에는 red, black 같은 기본적 색상부터 16진수 RGB값 등이 올 수 있습니다. 메모장으로 “border-widthEx.html”을 열고 다음과 같이 수정합니다.
<head>
<title>border-color 예제</title>
<style>
p{ color:blue; background-color:yellow;}
p#colkeyword {border-style:groove; border-width:10px; border-color:red}
p#hexa {border-style:groove;
border-width: 10px;border-color:#0f0}
p#rgb {border-style:groove;
border-width:10px;border-color:rgb(0, 0, 255)}
p#rgba {border-style:groove;
border-width:10px;border-color:rgba(255, 0, 0, .5)}
</style>
</head>
<body>
<p id="colkeyword">1. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="hexa">4. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="rgb">2. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
<p id="rgba">3. 프로그래밍을
통해 자신의 아이디어를 구현해보자.</p>
</body>
위에서 <style> … </style> 블록 내에서 각 p 요소의
스타일을 설정하면서 border-color 속성값을 각각 기본 색상 키워드를 이용할 때, #+16진수 형태, rgb, rgba 형태로 설정하였습니다. 그리고 비교가 쉽도록 border-style, border-width 속성값은
동일한 값으로 설정합니다.
이제 다른 이름으로 저장을 선택하여 “border-colorEx.html”로 저장합니다. Firefox를 이용하여 연결하면 다음과 같이 나타납니다.
결과에서 보는 것처럼 border-color 속성값을 기본 색상 키워드를 이용할 때, 16진수 형태, rgb, rgba 형태로 설정한 결과가 정상적으로 나타남을 알 수 있습니다. 아울러 border-style 속성에서 속성값으로 “groove”가 설정되었을 때 의미를 이해하기가 쉽지 않았는데 이 결과를 통해 홈 형태로 나타난다는 것을 알 수 있을 것입니다.
border 속성
border 속성은 지금까지
본 border-style, border-width, border-color를 모두 한꺼번에 설정하여
사용할 수 있는 속성으로 역시 앞서 border-style, border-width 속성 등과 마찬가지로
세분화하면 border-top, border-right, border-bottom, border-left 속성을
이용하여 각각 세부적으로 설정할 수도 있습니다만 여기서는 다음과 같은 형식을 이용하여 간편하게 border 속성을
설명합니다.
border: border-width [ border-style ] [ border-color]
border 속성값으로는 모두 올 수도 있고 일부가 올 수 있습니다. 그리고 각각의 속성값이 오는 순서는 결과에 영향을 미치지 않습니다. 방금 전 사용한 “border-colorEx.html”을 메모장으로 열고 <style>…</style> 블록을 다음과 같이 수정합니다.
<style>
p{ color:blue;
background-color:yellow;}
p#colkeyword {border: groove 10px red}
p#hexa {border: groove 10px #0f0}
p#rgb {border: groove 10px rgb(0, 0,
255)}
p#rgba {border: groove 10px rgba(255,
0, 0, .5)}
</style>
다른 이름으로 저장을 선택하여 “borderEx.html”로
저장합니다. Firefox를 이용하여 연결하면 보면 “border-colorEx.html”의
실행결과와 동일하게 나타납니다.
경계(border)를 둥글게 만들기
경계(border)와 관련하여 마지막으로 border-radius 속성을 이용하여 경계 모서리 부분을 조금 다르게 만들어봅니다. border-radius 속성 역시 앞서 border-style, border-width 속성 등과 마찬가지로 세분화하면 border-top-left-radius, border-top-right-radius, border-bottom-right-radius,
border-bottom-left-radius 속성을 이용하여 각각 세부적으로 설정할 수 있지만 여기서는 간편한 사용 형식인 다음과
같은 방법을 소개합니다.
border-radius:
length | percentage
border-radius 속성값으로는 px, pt 같은 수치값이나 percentage 값이 올 수 있으며 기본값은 0 입니다. border-radius 속성값으로 px, pt 같은 수치값을 사용할 경우는 보통 원의 호(arc)를 이용하며 아래 그림에서 top-left 부분을 기준으로 나타내면 빨강색으로 표시된 부분이 호(arc)이며 이 부분이 기존의 border-radius:0 일 때 직각으로 만나 표시된 부분 대신 나타나게 됩니다.
다음으로 percentage를 이용할 경우는 타원(ecllipse)의 호(arc)를 이용하는데 호(arc)를 그리는 기준은 너비(width)의 값이 되며 이를 이용하여
타원의 호(arc) 형태로 그리게 됩니다.
이번 예제는 div 요소 2개를 이용하여 border-radius 속성에 대해서 알아보고자 합니다. 메모장을
열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>border-radius 예제</title>
<style>
div#idpx{
border-radius: 20px;
border-style: solid;
border-width: 6px;
border-color:#f00;
background-color:yellow;
width:400px;
height:200px;
}
div#idpercentage{
border-radius: 10%;
border-style: solid;
border-width: 6px;
border-color:#f00;
background-color:yellow;
width:400px;
height:200px;
}
</style>
</head>
<body>
<div id=idpx>
<h2>경계(border)를
둥글게 만들기</h2>
경계(border)와
관련하여 마지막으로 border-radius 속성을 이용하여 경계 모서리
부분을 조금 다르게 만들어봅니다.
</div>
<br />
<div id=idpercentage>
<h2>경계(border)를
둥글게 만들기</h2>
경계(border)와
관련하여 마지막으로 border-radius 속성을 이용하여 경계 모서리
부분을 조금 다르게 만들어봅니다.
</div>
</body>
</html>
2개의 div 요소에 공통적으로 적용할 스타일은 가로(width) 400px, 세로(height) 200px 크기에 배경색은
노랑색, 경계선은 실선(solid), 두께는 6px, 경계선 색은 빨강색(#f00)으로 설정합니다.
그리고 div 요소의 id 속성값이 idpx에는 “border-radius: 20px”로 id 속성값이 idpercentage인 div 요소에는 “border-radius: 10%”로 설정하였습니다.
“border-radiusEx.html”으로 저장하고 IE9로 연결하여 보면 다음과 같이
모서리가 둥그렇게 나타납니다.
8.2.3 외부 여백(margin)과 관련된 속성들
외부 여백(margin)은 HTML 요소(Element)의 직사각형 형태의 바깥부분에 여백을
주는데 사용합니다. 이에 대한 구체적인 그림은 배경(Background)과
경계(Border), 여백 시작 부분에 있으니 참고하시길 바라며 외부 여백 설정을 위해서 margin 속성을 사용합니다.
margin 속성도 앞서 속성들과 마찬가지로 세부적으로 나누면 margin-top, margin-right, margin-bottom,
margin-left 속성을 이용하여
각각 세부적으로 설정할 수도 있습니다만 여기서는 다음과 같은 형식을 이용하여 간편하게 margin 속성을
설명합니다.
margin: length | percentage | auto
위에서 length에는 pt, px같은 절대 수치값 뿐만 아니라 em 상대 수치값도 올 수
있으며 역시 상대 수치값인 percentage도 margin 속성값으로 올
수 있으며 마지막으로 auto로 설정하면 웹 브라우저가 자동적으로
margin 속성값을 설정합니다.
만일 margin 속성값이 하나만 설정되게 되면 margin-top, margin-right, margin-bottom,
margin-left 속성값은 내부적으로
모두 동일한 값을 갖게 됩니다.
다음으로 margin 속성값이 “margin: 10px
15px”과 같이 2개의 값으로 설정되면
margin-top, margin-bottom 속성값이 10px이 되고 margin-right, margin-left 속성값은 15px이
됩니다.
방금 전 예제인 “border-radiusEx.html”을 메모장으로
열고 div 요소의 id 속성값이 “idpercentage”인 div 요소 관련 코드 부분을 <style> …</style> 블록과
<body>…</body>블록 내에서 삭제합니다. 그리고 <style>…</style> 블록 부분을 다음과 같이 수정합니다.
<style>
div#idpx{
margin:10px;
border-radius: 20px;
…
height:200px;
}
</style>
다른 이름 저장을 선택하고 “marginEx.html”로
저장합니다. IE9으로 연결하여 보면 다음과 같이 앞서 “border-radiusEx.html”
예제에서 다르게 외부 여백(margin)이 적용된 결과를 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1. JavaScript의 데이터 타입, 변수 (0) | 2013.08.06 |
|---|---|
| JavaScript (1) | 2013.08.06 |
| 8.1.4 background-attachment 속성 (0) | 2013.08.04 |
| 8. 배경(Background)과 경계(Border), 여백 (0) | 2013.08.04 |
| 7.7 Text Decoration (0) | 2013.08.04 |
