#5 div안에 div넣기

CSS 2019. 6. 17. 01:05
코딩하다보면 div태그 안에 div태그를 쓰는 경우가 종종 발생한다.

// 1. width, height 각각 100px의 div를 생성했다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    .main{
         background-color: yellow;
    }
    .main_common{
       width: 100px;
       height: 100px;
       border: 1px solid blue;
    }
    </style>
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>
Colored by Color Scripter
cs

// 2. div는 기본적으로 Block태그 요소이다.
// 따라서 display : inline; 선언을 해주어 다음그림과 같이 한 줄로 표시되게 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    .main{
        background-color: yellow;
    }
    .main_common{
        display: inline;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
</style>
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>
Colored by Color Scripter
cs


// 3. display : inline-block; 했을 때
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    .main{
        background-color: yellow;
    }
    .main_common{
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
</style>
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div>
Colored by Color Scripter
cs


// 4. 부모 div가 자식 div보다 작을 때
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .main{
        background-color: yellow;
        border: 1px solid red;
        width: 50px;
        height: 50px;
    }
     
    .main_common{
        display: inline-block;
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
</style>
     
<div class="main">
    <div class="main_1 main_common">test1</div>
    <div class="main_2 main_common">test2</div>
    <div class="main_3 main_common">test3</div>
</div
Colored by Color Scripter
cs

// 5. 정확히 정렬해보기 및 컨텐츠의 크기 변경
// 102px 및 306px인 이유 - border : 1px이 들어가기 때문
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
<style>
.main{
    background-color: yellow;
    border: 1px solid red;
    width: 306px;
    height: 102px;
}
   
.main_common{
    display:inline-table;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
 
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
 
.main_1, .main_3 { font-size: 30px; }
.main_2 { font-size: 40px; }
</style>
 
<div class="main">
    <div class="main_1 main_common"><p class="content">test1</p></div>
    <div class="main_2 main_common"><p class="content">test2</p></div>
    <div class="main_3 main_common"><p class="content">test3</p></div>
</div>
Colored by Color Scripter
cs
ABOUT ME

Suhwi's_개발일기 Suhwi's_개발일기

티스토리툴바
