html (21.3.16)

<div id="container">
            <ul class="big_box">
                <li class="box box1">1</li>
                <li class="box box2">2</li>
                <li class="box box3">3</li>
                <li class="box box4">4</li>
            </ul>
        </div>

class 는 이렇게 이름을 중복으로 줄수있다.

.box1{
    background:url("../images/1.png") right no-repeat ;
    background-position: 180px 100px;
}
.box2{
    background: blue;
}
.box3{
    background: yellow;
}
.box4{
    background: yellowgreen;
}
.box>h2{
    font-size: 23px;
    color: #2b2b2b;
}
.box>h2>span{
    display: block;
    font-size: 12px;
    color: #4689e1;
}
.box > p {
    display: block;
    width: 50%;
    margin: 30px 0 0 0;
    line-height: 20px;
}
.box > a {
    display: block;
    width: 100px;
    height: 30px;
    margin-top: 40px ;
    background: #81b4f2;
    border-radius: 15px;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    text-align: center;
}

background-position= x축 y축 순으로 쓴다.

border-radius는 explore구버전에서는 작동되지 않음으로 css가 어떤 시스템에서 구동되고 안되는지는 차근차근 알아가야함. 

line-height 숫자가 높을수록 내려옴.

box-sizing:border-dox; 를 사용하면 padding값을 줬을 때 따로 계산하지 않고 원하는 크기로 구현이 가능하다.

padding 값을 주면 보이지 않는 테두리가 생겨 그 두께만큼 계산해서 사이즈를 조절해야 하지만 저걸 쓰면 padding 을 주고도 구현 가능하다.

 

display: table-row;  border-collapse: collapse;를 사용하려 했지만 구현 안됨 나중에 알아보는 걸로.