글
[웹 프로그래밍] CSS박스 모델 이해하기(1)
2014.05.22
1_CSS BOX MODEL
-CSS박스 모델은 기본적으로 HTML 요소를 감싸는 가상적인 박스를 생각하는 것이다. 웹 브라우저는 각 요소를 박스(BOX)로 간주하고 화면에 배치한다. 각 박스는 마진, 경계, 패딩을 가진다
콘텐츠(Content) :: 박스의 내용물이다. 텍스트와 이미지가 나타나는 부분이다.
패딩(Padding) :: 콘텐츠 주위의 영역이다. 패딩은 투명하다.
경계(Border) :: 패딩과 내용물을 감싸는 경계이다. 경계는 박스의 경계색에 의하여 영향을 받는다.
마진(Margin) :: 경계 주위의 영역이다. 마진은 투명하다.
●블록 요소와 인라인 요소
HTML요소는 블록요소이거나 인라인 요소중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML요소는 블록 요소냐 인라인 요소냐에 따라서 다음과 같이 화면에 표시된다.
- 블록(Block)요소 ::
화면의 한 줄을 전부 차지한다.
- 인라인(Inline)요소 ::
한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다.
|
블록(Block)요소 |
인라인(Inline)요소 |
|
1. 줄바꿈이 일어난다. 2. 블록요소 안에는 인라인요소와 텍스트를 포함할 수 있다. 3. 블록요소 안에는 포함 할 수 있는 블록 요소와 포함 할 수 없는 블록 요소가 있다. 4. CSS적용시 width(가로), height(세로)값과 padding, margin의 top, right, bottom, left 값이 모두 적용된다. |
1. 줄바꿈이 일어나지 않는다. 2. 인라인 요소 안에는 인라인 요소와 텍스트를 포함 할 수 있다. 3. 인라인 요소는 블록 요소를 포함 할 수 없다. 4. <body>요소 바로 다음에 인라인 요소를 마크업 하지 않는다. 5. CSS적용시 width(가로), height(세로)ㄱ값이 적용되지 않는다. 예외적으로 input 요소의 text, select, img요소는 width, height값이 적용된다. padding, margin의 left, right값만 적용된다. |
-Ex
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ex01</title>
<style>
body > * {
background: #B2CCFF;
font-family: "돋움";
}
</style>
</head>
<body>
<div>블록요소 div</div>
<p>블록요소 p</p>
<h3>블록요소 h3</h3>
<span>인라인요소 span</span>
<span>인라인요소 span</span>
<a href="#">인라인요소 a</a>
</body>
</html>
|
● 경계선 지정하기
|
border-color : 색상 변경 ("green" "rgb(0,255,0) "#00ff00" 등으로 지정)
border-width : 선 굵기(thick, medium, -px)
border : 5px solid red; //한줄로 설정 해 주기
border-radius : 둥근 경계선 만들기(border-radius : -px)
box-shadow: 경계에 그림자 생성(box-shadow: 20px 10px 5px #666666)
(가로오프셋,세로오프셋,번지는정도,그림자색)
border-image : 경계이미지 만들기
-webkit-border-image: url(-.png) 30 30 round //사파리
-o-border-image: url(-.png) 30 30 round //오페라
border-image: url(-.png) 30 30 round //크롬
●마진과 패딩(margin & padding)
○마진(margin)
:: 마진(margin)은 CSS에서 지정이 가능하다
|
값 |
설명 |
|
auto |
브라우저가 마진을 계산한다 |
|
length |
마진을 px, pt, cm단위로 지정할 수 있다. 디폴트는 0px 이다. |
|
% |
마진은 요소 폭의 퍼센트로 지정한다 (반응형 웹 디자인에 용이) |
|
inherit |
마진이 부모 요소로 부터 상속된다 |
'WEB > CSS' 카테고리의 다른 글
| [웹 프로그래밍] WEB 레이아웃 이해하기 (0) | 2014.05.23 |
|---|
