[02. CSS] 004. 박스

기본적으로 박스의 크기는 height와 width 프로퍼티를 사용하여 설정한다. 추가적으로 min-width, max-width, min-height, max-height를 통하여 너비 및 높이를 제한할 수 있다. 이는 화면이 축소되더라도 표시되는 화면의 내용의 최소 너비 및 높이를 지정해주어 디자인이 망가지는 것을 방지할 수 있다.

 

<div style="width: 50%; min-width:300px; background-color:red">
    <p>YOne Labs</p>
</div>

 

박스안에 내용이 넘칠때는 overflow 프로퍼티에 scroll 값을 지정하여 스크롤 바를 지정할 수 있다. hidden 값으로 설정하면 박스의 크기보다 큰 부분은 숨긴다.

 

박스의 테두리를 설정하는 방법은 border 프로퍼티를 이용하면 된다. border-width를 이용하여 테두리의 굴기를 지정하고 border-style을 이용하여 solid, dotted, dashed, double, groove, ridge, inset, ouset, hidden, none 등의 스타일을 지정한다. 그리고 색깔은 border-color 프로퍼티를 이용하여 지정할 수 있다. border-top-color처럼 top, right, bottom, left를 가운데 지정해주면 세세한 스타일링이 가능하다. border를 한 번에 지정할 수 있는 단축형도 있는데 이는 다음과 같이 지정할 수 있다.

 

p {
    border: 1px solid black;
}

 

이와 마찬가지로 margin 프로퍼티를 이용하여 마진을, padding 프로퍼티를 이용하여 패딩을 지정할 수 있다.

 

[그림 2.1] 테두리, 마진, 패딩

 

테두리는 검은색 선 부분이고 마진은 주황색, 패딩은 빨간색 부분이다. 박스 안의 글자의 가로 정렬은 text-align 프로퍼티를 이용해서 할 수 있다. 값은 center, left, right 등으로 정렬이 가능하다.

 

박스를 옆으로 인라인으로 나타내기 위해서는 display 프로퍼티를 이용하면 된다.

 

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

<style>
    li {
        display: inline;
    }
</style>

 

기본 디폴트 값은 block 값이다. 그리고 블록 레벨 요소의 다른 기능을 유지하면서 블록 레벨 요소를 인라인 요소로 바꾸기 위해서는 inline-block을 사용한다. none 값은 요소를 숨길 때 사용한다. 요소가 차지하는 영역은 그대로 두고 숨기는 방법은 visibility: hidden을 사용하면 된다. 반대는 visible 값을 지정하면 된다. text-shadow와 마찬가지로 box-shadow를 이용하여 박스에 그림자를 지정할 수 있다.

 

p {
    box-shadow: 5px 5px 10px -2px red;
}

 

값은 순서대로 수평 거리, 수직 거리, 번짐 거리, 확장 거리, 색상이다.

 

박스 테두리의 모서리를 둥글게 하기 위해서는 border-radius 프로퍼티를 이용하면 된다.

 

p {
    border-radius: 10px 20px;
}

 

값을 하나만 지정하면 가로 세로의 비율이 같게 지정되고 위와 같이 다르게 지정하면 세로 부분이 가로 부분보다 더 길게 타원형으로 모양이 변경된다. 그리고 border-top-right-radius, border-top-left-radius 프로퍼티를 이용해 각 모서리 값을 개별적으로 지정할 수 있다.