[HTML] 박스 만들기

index.css

0.00MB

index.html

0.00MB

• ul, li로 div보다 깔끔해 보임 (감싸서 놀게하고 싶을 경우)
• a 는 링크임, inline임
•  ex) border-radius:15px; : 둥글게 됨 (explorer9에서는 작동이 안됨) 
• line-height:32px;
• background position:10px 50px;  => x축, y축임
• box-sizing:border-box; 을 사용하는 경우 width. height, border를 계산하지 않아도 됨.

ex)

.box {

    box-sizing:border-box;

    width:300px; /*300-40(위아래 각각 20씩) border가 각 1씩. 패딩과 보더때문*/

    height:230px; /*230-40(위아래 각각 20씩)*//*위의 box-sizing으로 자동조절*/

    padding:20px;

    border:1px solid #ececec;

    float:left;

 

외우는 방법

1)container 제일 먼저 가운데 정렬시키기 1200px

2)ul big box 만들기 600px

3) li 4개 만들기 width300px height 230px 

4) .big_box > li   box-sizing:border-box (작업영역 확실히 나누기)

그 후에 안의 내용

<h2> 

<span>

<p>

<a >

• 바로가기 외우기

.box > a {

    display:block;

    width:100px;

    height:30px;

    margin:40px 0 0 0;

    background:#404244;

    border-radius:15px;

    line-height:32px;

    font-size:14px;

    color:#fff;

    text-align: center;

    margin-top: 40px; /* 사실상 margin:40px 0 0 0;와 같은 의미, 최후에 적용하는 것은 margin-top:40px */

    

}