WEB/CSS3-CONCEPT

예제 5-1. display 프로퍼티로 박스 유형 설정 // 고치기

너래쟁이 2017. 10. 31. 17:57

* 블록 박스와 인라인 박스

블록 태그 사례 - <p>,<hl>,<div>,<ul>

인라인 태그 사례 - <span>,<a>,<img>


블록 박스

(display : block)

인라인 박스

(display : inline)

인라인 블록 박스

(dispaly : inline-block)

항상 새 라인에서 시작 

새 라인에서 시작 못함.

라인 안(inline)에 있음

// inline-block 속성

새 라인에서 시작 못함.

라인 안(inline)에 있음 // inline 속성

블록 박스 내에만 배치

모든 박스 내 배치 가능

// inline-block 속성

모든 박스 내 배치가능 // inline 속성

옆에 다른 요소와 배치 불가능

옆에 다른 요소 배치 가능

// inline-block 속성

옆에 다른 요소 배치 가능 // inline 속성

width와 height으로 크기 조절

// inline-block 속성

width와 height으로 크기 조절 불가능

width와 height 크기 조절 가능 

// block 속성

padding, border, margin 조절 가능

// inline-block 속성

margin-top, margin-bottom 조절 불가능

padding, border, margin 조절 가능

// block 속성



블록 박스는 항상 새 라인에서 시작. 옆에 다른 태그를 배치할 수 없음.


인라인 박스는 블록 안에 배치. 옆에 다른 태그 배치 가능





박스의 유형 제어, display


* display 프로퍼티

1. 블록 박스 - display : block

2. 인라인 박스 - display : inline

3. 인라인 블록 박스 - display : inline-block



1. 블록 박스 - display : block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>block</title>
<style>
div {
    border : 1px solid yellowgreen;
}
span {
    display : block;
    background : powderblue;
    border : 1px dotted orangered ;
    width : 100px; height : 40px;
}
</style></head>
<body>
<h3>&lt;span&gt;를 display:block으로</h3>
<hr>
<div><span>block span</span>과<span>block span</span>입니다.
</div>
</body>
</html>
 
cs


2. 인라인 박스 - display : inline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline</title>
<style>
div div {
    display : inline;
    border : 2px dotted orangered ;
    background : powderblue;
}
</style></head>
<body>
<h3>&lt;div&gt;를 display:inline으로</h3>
<hr>
<div style="background : orange;">
    <div>inline DIV</div>
    <div>inline DIV</div>
    <div>inline DIV</div>
    <div>inline DIV</div>
</div>
</body>
</html>
 
cs


3. 인라인 블록 박스 - display : inline-block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline-block</title>
<style>
div div {
    display : inline-block;
    border : 2px dotted orangered;
    background : powderblue;
    margin : 10px;
    width : 60px; height : 80px;
}
</style></head>
<body>
<h3>&lt;span&gt;를 display:block으로</h3>
<hr>
<div style="background : orange">
    <div>inline-block DIV</div>
    <div>inline-block DIV</div>
    <div>inline-block DIV</div>
</div>
</body>
</html>
cs



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
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 프로퍼티</title>
<style>
div {
    border : 2px solid yellowgreen;
    color : blue;
    background : aliceblue;
}
span {
    border : 3px dotted red;
    background : yellow;
}
</style>
</head>
<body>
<h3>인라인, 인라인 블록, 블록</h3>
<hr>
나는 <div style="display:none">
        div(none)</div>입니다.<br><br>
나는 <div style="display:inline">
        div(inline)</div> 입니다.<br><br>
나는 <div style="display:inline-block; height:50px">
        div(inline-block)</div> 입니다.<br><br>
나는 <div>div<span style="display:block">
        span(block)</span> 입니다.
    </div>
</body>
</html>
 
cs






저작자표시 비영리 동일조건