CSS 포지셔닝

런던행·2020년 7월 29일
0

Web Publishing(기초)

목록 보기
2/10

box-sizing 속성 - 박스너비 기준 정하기

box-sizing: content-box(기본), border-box

  • content-box: width 속성 값을 콘텐츠 영역 너비 값으로 사용
  • border-box: width 속성값을 콘텐츠 영억에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용
<html>
<title>

</title>
<style>
    .box1 {
        box-sizing: content-box;
        width: 300px;
        height: 150px;
        margin: 10px;
        padding: 30px;
        border: 2px solid red;
    }
    .box2 {
        box-sizing: border-box;
        width: 300px;
        height: 150px;
        margin: 10px;
        padding: 30px;
        border: 2px solid red;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

float - 왼쪽이라 오른쪽으로 배치하기

float: left, right, none

clear: none, left, right, both

  • float 속성을 이용해 웹페이지 요소를 왼쪽이나 오른쪽으로 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데 그것이 clear 속성이다.
<html>
<title>

</title>
<style>
    .left-img {
        float: left;
        margin-right:15px;
    }
    .box1 {
        float: left;
        background: red;
        padding: 20px;
        margin-right: 10px;
    }
    .box2 {
        float: left;
        background: blue;
        padding: 20px;
        margin-right: 10px;
    }
    .box3 {
        /* float: left; */
        background: yellow;
        padding: 20px;
        margin-right: 10px;
    }
    .box4 {
        /* float: right; */
        /* clear: both; */
        /* float: none; */
        background: green;
        padding: 20px;
        margin-right: 10px;
    }
</style>

<body>
    <img src="./logo.svg" class="left-img"width="100px" height="100px">
    <h1>Tomato</h1>
    <p>토마노토마마마마모노노토토토</p>

    <div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>

</html>
profile
unit test, tdd, bdd, laravel, django, android native, vuejs, react, embedded linux, typescript

0개의 댓글