💅✨Decorate from CSS : box model

💅CSS/⚡ver.0

💅✨Decorate from CSS : box model

4:Bee 2024. 2. 20. 13:21

728x90

이번 시간에는 박스 모델에 관해서 포스팅을 할 것이다. 박스 모델에는 3가지 개념을 알아야 하는데 border, padding, margin 이렇게 있다. 우선 코드를 살펴 보면 아래와 같다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti voluptates sunt voluptate </p>

</body>

</html>

p {

border: 10px solid red;

padding: 20px;

margin: 40px;

}

개발자 도구에서도 앞서 말한 3가지를 확인 할 수 있다. border은 현재 padding값의 테두리라고 생각하면 된다. 그리고 margin은 object간의 간격이라고 생각하면 된다. 식탁을 예시로 들어보겠다. 우리가 밥을 먹는 테이블 가운데에 음식이 나왔다고 하자. 음식은 object이고 테이블과 음식 간격은 padding이고 테이블의 테두리는 border인 것이다. 그리고 옆테이블의 책상과의 거리는 margin이라고 생각하면 된다. 이제 이 외에 박스를 조절 할 수 있는 witdh와 height를 적용해보면 아래와 같다.

p {

border: 10px solid red;

padding: 20px;

margin: 40px;

width: 120px;

height: 50px;

}

width와 height는 해당 오브젝트의 크기를 조절하는 역할을 하게 된다. 우리가 버튼을 생성할 때 작은 크기의 버튼을 만든다면 width와 height의 값을 조정하고 글자 텍스트의 위치를 조절하기 위해선 padding의 값을 조절하고 버튼 오브젝트의 클릭이 가능한 구역의 존재 유무를 나타내기 위해선 border를 사용해서 영역 표기를 할 수 있다. 그리고 다른 버튼이나 다른 object 간의 간격을 내기 위해서는 margin을 사용하면 되는 것이다.

inline에서의 width와 height를 살펴보자.

p {

border: 10px solid red;

padding: 20px;

margin: 40px;

width: 120px;

height: 70px;

}

여기서 inline의 특징을 가지고 있는 a태그는 이상하게 width와 heigh의 값에 영향을 받지 않는다.

아무리 width와 height를 변경해도 inline에선 아무런 변화가 이루어지지 않는 다는 것을 알 수 있다. 이제 우리는 여기서 유심이 봐야할 것이 있다. 그것은 바로 marign의 중첩현상이다. 현재 위의 결과에 개발자도구를 이용해서 select element를 통해 각 요소들의 margin을 살펴보면 각 marign의 영역을 무시하고 서로 중첩이 되어 있다는 것을 알 수 있다. 다음 포스팅에서는 margin 중첩문에 관해서 포스팅을 할 것이다.

728x90

저작자표시 (새창열림)