Box and Box-Model

박스와 박스모델의 가장 기본이 되는 요소는 display 속성이다.
diplay의 종류에는 block, inline , inline-block, flex가 있다.
이번 시간에는 앞의 세가지 속성에 대해서만 알아보도록 하겠다.

먼저 block이다.
block은 그 뜻 그대로 차단하고 막는 것이다.
즉 다른 컨텐츠가 자신의 여백을 채우지 못하도록 마진을 들여서 방해를 한다.
그렇게 되어서 수직으로 차곡차곡 블록 컨텐츠들이 쌓이게 되는 것이다.

예시를 들어보자.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Boxmodel Practice</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

    <div class="parent">
      <div class="child1">CHILD1</div>
      <div class="child2">CHILD2</div>
    </div>
  </body>
</html>

이것이 HTML 태그이고

.parent {
  background-color: gray;
}
.child1 {
  width: 300px;
  background-color: blue;
  height: 40px;
}
.child2 {
  width: 200px;
  background-color: red;
  height: 40px;
}

이것이 CSS 태그이다.

results matching ""

    No results matching ""