CSS (2) - 블록과 단위

Box

 

크롬에서 F12를 눌러서 이것저것 보다보면

모든것들이 Box 모양으로 되어있다.

 

 

 

박스 끼리의 간격이 margin

테두리가 border

테두리에서 컨텐츠까지의 간격을 padding

 

그리고 모서리로 그려져있는 저 네모의 가로세로를 width, height 요소로 적용 가능하다.

 

 

<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
<div id="box5">박스5</div>
<div id="box6">박스6</div>

div{

    color: white;
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;

    border: 5px solid black;
   
}

#box3{
    padding: 10px;
}

 

이런식으로 여러가지 요소들을 적용한 스타일을 볼 수 있다.

 

다만 여기서 box3에만 패딩을 적용하여 혼자 크기가 커졌는데, 

그 이유는 padding도 붙어있기 때문이다.

 

#box3{
    padding: 10px;
    box-sizing: border-box;
}

 

box3에 box-sizing에 border-box를 입력해주면 모든것을 포함해서 사이즈가 100x100이 되었다.

(기본값은 content-box)

#box3{
    border-radius: 75%;
}

 

border-radius 속성은 이런식으로 모서리도 깎아줄수 있다.

(px도 가능한데 %로 해야 크기에 비례해서 깎인다)

---

 

디스플레이 속성

 

<div> 블록 요소 </div>
<div> 블록 요소2 </div>
<p><span>Lorem</span> ipsum dolor sit amet consectetur, adipisicing elit. Incidunt labore, harum molestias quaerat corporis natus dolores doloremque libero repudiandae rerum nihil, laborum, autem ab sint architecto officia minima. Sed, mollitia!</p>

div{
    background-color: blue;
    width: 300px;
    height: 300px;
}

span{
    background-color: red;
    width: 5000px;
    height: 5000px;
}

 

div는 블록 요소이며 width,height 속성으로 크기를 제어하면 크기에 맞게 다른 요소들을 밀어낸다.

span은 인라인 요소이며 width,height을 아무리 크게 줘도 적용되지 않는다.

 

 

div{
    color: white;
    background-color: blue;
    width: 300px;
    height: 300px;
    display: inline-block;
}

span{
    color: white;
    background-color: red;
    width: 5000px;
    height: 5000px;
    display: block;
}

 

하지만 display를 이용하여 inline-block으로 바꾸어준다면 인라인 요소지만 서로를 밀어내는 블락 요소도 가지게 되고,

span에 block을 적용시켜주니 크기에 맞게 밀어주는것을 볼 수 있다.

 

 

span{
    color: white;
    background-color: red;
    width: 5000px;
    height: 5000px;
    display: none;
}

 

 

display를 none으로 해주면 없어지는데, 존재는 하고 있으므로 추후에 끄고 켜는 등의 기능을 구현 가능하다.

 

---

 

단위

 

 

 

 

 

em

부모의 font-size가 기준이다.

ex> 부모의 font-size가 30px이라면 0.5em 은 15px.

 

다만 li 처럼 중첩되는 요소들을 쓸때는 중첩해서 커지거나 줄어들 수 있다는 단점이 있다.

 

rem

root em

해당 html의 기본 글자가 기준이다.

 

기준이 잡혀있어 일관적인 기준을 가지고 단위를 정할 수 있다.