관리 메뉴

moozi

box resizing 본문

TIS_2016/HTML5_3기

box resizing

moozi 2016. 8. 31. 14:42


box resizing


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box {

            position: relative;

            width: 33%; /* 원하는 너비 */

            text-align: center;

            float:left;

        }


        .box:before {

            content: "";

            display: block;

            padding-top: 100%; /* 1:1 비율 */

        }


        .content {

            border-radius: 50%;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            border:1px solid;

            margin:5px;

        }


    </style>

</head>

<body>

    <div class="box"> 

        <div class="content">1:1 비율</div> 

    </div>

    <div class="box"> 

        <div class="content">1:1 비율</div> 

    </div>

    <div class="box"> 

        <div class="content">1:1 비율</div> 

    </div>


</body>

</html>

'TIS_2016 > HTML5_3기' 카테고리의 다른 글

box-resizing  (0) 2016.08.31
brackets .jscondehint  (0) 2016.08.31
파비콘만들기  (0) 2016.08.31
박스 가로세로 비율 유지하기  (0) 2016.08.22
참고할 템플릿  (0) 2016.08.19
Comments