프론트엔드/CSS

CSS - 레이아웃

ksge7 2020. 8. 24. 00:21

웹페이지 구성시 CSS를 활용하면 더욱 다양한 레이아웃을 구성할 수 있다.

 

box-sizing

<body>

    <style>
        p{
            width: 500px;
            box-sizing: content-box;
            box-sizing: border-box;
        }
    </style>

    <p> 첫번째 박스입니다. </p>
    <p> 두번째 박스입니다. </p>
    <p> 세번째 박스입니다. </p>

</body>

 

웹 문서에서 여러 요소 배치시 요소의 너비를 계산해야 한다.

 

하지만 'width' 속성을 이용할 경우 'content'영역의 너비만 적용된다.

 

'box-sizing'을 이용하면 'content+padding+border'합쳐서 한 번에 너비를 지정할 수 있다.

 

속성값을 'content-box'로 주면 콘텐츠 영역만 너비 값으로 사용한다.

 

속성값을 'border-box'로 주면 콘텐츠 영역+패딩영역+테투리까지 너비 값으로 사용한다.

 

float 속성

<body>

    <style>
        #box{
            text-align: center;
            width: 500px;
            height: 200px;
            border: 5px solid orange;
            font-size: 30px;
        }
        p{
            font-size: 50px;
        }
    </style>
    <p id="box"> 박스 입니다. </p>
    <p>
        본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.
        본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.
        본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.
    </p>
        
</body>

 

보통 박스나 이미지와 본문을 같이 사용할 경우 위와 같이 두 컨텐츠가 잘 어울리지 않는다.

 

 

<body>

    <style>
        #box{
            text-align: center;
            width: 500px;
            height: 200px;
            border: 5px solid orange;
            font-size: 30px;
            float: left;
            float: right;
        }
        p{
            font-size: 50px;
        }
    </style>
    <p id="box"> 박스 입니다. </p>
    <p>
        본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.
        본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.
        본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.
    </p>
        
</body>

 

하지만 'float' 속성을 부여한 뒤 속성값으로 'left'나 'right'를 주면 해당 속성이 부여된 태그는 왼쪽이나 오른쪽으로 위치가 변경되고, 다른 요소들은 그 태그를 주변을 자연스럽게 감싸게 된다.