250915_css/05_box+model.html at main · DevCoursePracticeProjects/250915_css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Model</title>
    <style>
      #box1 {
        /* 박스의 총 크기는 282 X 282가 된다 */
        background-color: bisque;
        width: 240px;
        height: 240px;
        /* padding -> background color 공유 */
        /* 상하좌우 일괄 적용 */
        padding: 20px;
        /* 상하 , 좌우 따로 */
        /* padding: 20px 40px; */
        /* 위쪽, 좌우, 아래쪽 */
        /* padding: 10px 20px 30px; */
        /* 상, 하, 좌, 우 다 따로 */
        /* padding: 5px 10px 20px 40px */

        /* 그 외(마진도 적용됨) */
        /* padding-left: ...; */
        /* top, right, bottom, left */

        border: 1px black solid;
        border-style: solid;
        /* border-style: dashed;
        border-style: dotted; */

        /* margin은 크기에 포함되지 않는다 */
        margin: 10px;
        /* auto -> 내 가로 크기를 제외한 나머지를 모두 가로 마진으로 */
        margin: auto;
        /* 가로 가운데 정렬을 할 때 */
        /* 크기 포함되지 않음 */
        /* 기본 설정 */
        box-sizing: content-box;
      }
      #box2 {
        /* 박스 사이즈 240(보더, 패딩 포함), 마진은 따로 */
        box-sizing: border-box;
        background-color: bisque;
        width: 240px;
        height: 240px;

        padding: 20px;

        border: 1px black solid;
        border-style: solid;

        margin: 10px;

        margin: auto;
      }
      .wrapper {
        padding: 20px;
      }
      .box {
        width: 120px;
        aspect-ratio: 1;
        background-color: red;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 개발자 도구 F12(Fn+F12) -->
    <div id="box1">
      (div 같은 블록 display는) 내부의 컨텐츠 길이에 따라서 세로가 결정되며,
      기본적으로는 가로 100%를 모두 점유함
    </div>
    <div id="box2">content-box vs border-box</div>
    <!-- 마진끼리 붙으면 -> 마진은 서로 '충돌'이 일어나지 않음. 마진의 원리는 content와 충돌. -->
    <!-- 📌 해결 방법 1 : wrapper(container) + padding -->
    <div class="wrapper">
      <div id="box1">
        (div 같은 블록 display는) 내부의 컨텐츠 길이에 따라서 세로가 결정되며,
        기본적으로는 가로 100%를 모두 점유함
      </div>
    </div>
    <div class="wrapper">
      <div id="box2">content-box vs border-box</div>
    </div>
    <!-- 해결 방법 2 : 안보이는 요소를 중간에 넣기 -->
    <div class="box"></div>
    <div style="border: 1px transparent solid"></div>
    <div class="box"></div>
    <!-- 해결 방법 3 : flex -> gap (요소 간 거리) -->

    <!-- 마진은 큰 것이 작은 것을 잡아먹는다 -->
    <div class="box" style="margin-bottom: 48px"></div>
    <div class="box" style="margin-top: 16px"></div>
  </body>
</html>