[2021/12/21]국비지원 CSS3 3-(1) boxmodel

이 날은 이름이 붙은 파일이 많은 걸로 보아서

하루 종일 수업 중 과제가 주어지고 그 과제들 제출했던 날인 듯

boxmodel : 말이 박스 모델이지..
html div 설정하고, css3 속성으로 width, height, border, background-color, padding, margin 준 것

padding : 영역 내부 모서리와 내용물의 간격값
- setting1> padding : 0px )) 모서리 4면 의 간격이 동일한 값
- setting2> padding : 0px 0px )) 상하 좌우
- setting3> padding : 0px 0px 0px )) 상 좌우 하
- setting4> padding : 0px 0px 0px 0px )) 상 우 하 좌
- setting5> 각각의 모서리 하나의 값만 줄 수 있음
  ( padding-top, padding-bottom, padding-left, padding-right )
margin : 영역 모서리 외측에서 화면 전체 모서리 사이의 간격 값
padding, margin 공통점
- 동일한 세팅으로 사용 가능 ( px, %, em과 같은 length 값 설정 )
- 부모 개체의 속성을 물려받을 수 있음 ( inherit )
padding, margin 차이점
- { margin : 0 auto; }는 화면비율 축소 시 중앙 정렬 효과를 불러 옴
- { padding: 0 auto; }는 설정되지 않는 값

※ * Astarisk : 전범위 element 선택, 우선순위 0점

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Boxmodel<title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        /* 전체선택자: * 아스타리스크, 우선순위 0점 */
        body{font-size: 30px;color: #fff;font-weight: bold;}
        /* 박스모델 실제크기 : 가로 400px, 세로 400px
        내용물width + 안쪽여백padding + 테두리선border + 바깥쪽여백margin */
        #wrap{width: 360px;height: 360px;background-color: gray;
            padding: 20px;}
        #top{width: 310px;height: 120px;background-color: red;
            border: 5px solid #000;padding: 20px;margin-bottom: 20px;}
        #bottom{width: 310px;height: 120px;background-color: blue;
                border: 5px solid #000;padding: 20px;}
            /* 
            padding, margin
            padding:20px; top right bottom left
            padding:20px 10px; top bottom, rigt left
            padding:20px 10px 5px; top, right left, bottom
            padding: 20px 10px 5px 15px; top, right, bottom, left
            padding-top:20px 
            padding-right:20px
            padding-bottom:20px
            padding-left:20px
             */
    </style>
</head>
<body>
    <div id="wrap">
        <div id="top">top</div>
        <div id="bottom">
            bottombottombottom<br>
            bottombottombottom<br>
            bottombottombottom<br>
        </div>
    </div>
</body>
</html>

다만, 이렇게 박스를 지정할 경우
처음 의도했던 사이즈 값과 다르게
width와 height에 padding값과 border굵기 등을 일일이 계산해서
반영해 주어야 한다.

결과물

~~꿀팁은 아래에~~

일일이 계산해주기 싫을 때 쓰는 방법

( 귀차니즘인 제가 매우 애끼는 css3 property 입니다. )

{ box-sizing : border-box ; }

주의 : content-box

content-box는 내용물(content) 기준으로 값이 정해지기 때문에
처음 의도한 width, height를 한 부분이라도 벗어나는 일이 생길 수 있음

그래서 저는 아직 쓴 적이 없습니다

저작자표시 비영리 변경금지

티스토리툴바