[CSS] div 정렬 vs table 정렬

div는 문서의 레이아웃을 구성하는 태그며, 그렇기 때문에 table보다는 CSS를 활용한 div 태그를 많이 쓰는 추세라고 한다.

웹표준이기도 하고 속도면에서도  div를 활용하는 것이 더 유용하기 때문이다 .

오늘은 이전 시간 table을 통해 만든 HTML을 활용하여 table과 똑같은 결과물을 div를 통해서도 구현해보겠다.

---

<table>

<table border ="1" width ="200" cellpadding="40" >
    <tr>
        <td rowspan="2" bgcolor=red>4</td>
        <td colspan ="2" bgcolor=yellow>1</td>
    </tr>
    <tr>
        
        <td>
            <img src="http://file3.instiz.net/data/file3/2018/04/07/a/c/9/ac9564c5f40002ee187aabd27143ee49.gif" alt="냠냠팬더" width =200></td>
            <td rowspan="2" bgcolor=green>2</td>
    </tr>
    <tr>
        <td colspan="2" bgcolor="blue">3</td>
    </tr>
</table>

이런식으로 table을 구성하면 

 

 

이런 느낌의 테이블을 만들 수 있다.

 

이런 테이블느낌의 출력물을 div layout을 통해서 다시 구현해보자.

---

<div>

    <style>
        /* flex 많이쓰지만 일단 line-height 씀 */
        .div1{
            display: inline-block;
            width: 300px;
            height: 100px;
            background-color: blue;
            text-align: center;
            color: white;
            line-height: 100px;
        }
        /* absolute로 가면 가장 가까운 부모 태그를 만나서 걔를 기준으로 absolute를 잡아서 이동한다. 그래서 컨테이너 만들어서 감쌈 */
        .div2{
            display: inline-block;
            position: absolute;
            width: 100px;
            height: 300px;
            background-color: greenyellow;
            text-align: center;
            color: black;
            line-height: 100px;
        }
        .pic{
            display: inline-block;
            position: absolute;
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
        }
        .div3{
            display: inline-block;
           
            width: 100px;
            height: 300px;
            background-color: red;
            text-align: center;
            color: white;
            line-height: 100px;
            left: 0px;
            top: 100px;
        }
        .div4{
            display: inline-block;
            position: absolute;
            width: 300px;
            height: 100px;
            background-color: purple;
            text-align: center;
            color: white;
            line-height: 100px;
            left: 100px;
            top: 300px;
        }
        
        /* postion default값은 absolute */
        .container{

            width:400px;
            height: 400px;
            border:1px black solid;
            position: relative;
            left: 30px;
        }
    </style>

이렇게 style을 잡아주고

body에는 다음과 같이 출력해준다.

 <div class="container">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="pic"><img src="http://file3.instiz.net/data/file3/2018/04/07/a/c/9/ac9564c5f40002ee187aabd27143ee49.gif" alt="냠냠팬더" width="200px" height="200px" ></div>
    </div>

 

D.O.N.E!!!!