[🦁FE DAY8(3)] 표준 CSS 박스 모델

17419 단어 빔캠프 제주코딩베이스캠프 front-end school CSS 멋쟁이사자처럼 CSS

표준 CSS 박스 모델

표준 CSS 박스모델에서 요소 전체 크기 = 컨텐츠 + 보더 + 패딩

1. 컨텐츠 박스 크기를 설정하는 width, height (block box인 경우만!)

<head>
  <style>
  	div { 
    	width: 50px;
    	height: 50px;
    	background-color: orange;
    }
  </style>
</head>
	<div><div>
<body>

2. border

border는 말 그대로 컨텐츠 박스의 테두리!
표준 CSS 박스 모델에서 border의 크기 또한 요소 전체 크기에 포함 된다.

button {
	border-width: 3px;
    border-style: solid;
    border-color: blue;
}

/* 축약형 */
button {
	border: 3px solid blue;
}

border-width
- 직접 지정 - px과 같은 단위로 직접 지정
- medium - 중간 굵기로 지정
- thin - 얇은 선으로 지정
- thick - 굵은 선으로 지정
border-style
- none - 테두리선 없애기
- solid - 직선
- dotted - 점선
- dashed - 바느질선
- double - 이중선
  ,
  ,
  ,
  border style은 매우 다양하기 때문에 그때그때 찾아보기!
  (https://developer.mozilla.org/ko/docs/Web/CSS/border-style)
border-color

button {
    border-color: red; /* 네 면에 동일한 색상*/
    border-color: red orange; /* 상하 좌우 */
    border-color: red orange yellow; /* 상 좌우 하 */
    border-color: red orange yellow green; /* 상 우 하 좌 (시계방향)*/
}

border-radius
radius 속성은 테두리 꼭짓점을 둥글게 만들어 준다.

border-radius: 30px;

원 만들기
-> radius를 50%로 주게되면 요소 넓이의 절반만큼 반지름이 만들어져서 원이 만들어진다.

div{
	width: 100px;
    height: 100px;
    border-width: 3px;
    border: 3px solid black;
    border-radius: 50%;
}

특정 꼭짓점만 둥글게 만들기

border-top-left-radius: 50px; /* 상단 왼쪽 */
border-top-right-radius: 40px; /* 상단 오른쪽 */
border-bottom-left-radius: 30px; /* 하단 왼쪽 */
border-bottom-right-radius: 20px; /* 하단 오른쪽 */

3. padding

표준 CSS 박스 모델에서 padding의 크기도 요소 전체 크기에 포함 된다.

div {
	width: 100px;
    height: 30px;
    border: 3px solid black;
    padding: 10px;
}

div 전체 가로값 = 100+10+10+3+3 = 126
div 전체 세로값 = 30+10+10+3+3 = 56

padding 값 따로따로 줄 수 있음

padding: 10px; /* 네 방향 모두 동일하게 10px 적용*/
padding: 10px 20px; /* 상하 좌우 */
padding: 10px 20px 30px; /* 상 좌우 하 */
padding: 10px 20px 30px 40px; /* 상 우 하 좌 */

4. margin

margin은 요소 전체 크기에 포함되지 않는다. 하지만 요소와 요소 사이의 영역에 영향을 준다.

div {
	width: 100px;
    height: 30px;
    border: 3px solid black;
    margin: 10px;
}

div 전체 가로값 = 100+3+3 = 106
div 전체 세로값 = 30+3+3 = 36
-> 마진값은 전체 요소 크기에 포함되지 않는다!

margin 값 따로따로 줄 수 있음

margin: 10px; /* 네 방향 모두 동일하게 10px 적용*/
margin: 10px 20px; /* 상하 좌우 */
margin: 10px 20px 30px; /* 상 좌우 하 */
margin: 10px 20px 30px 40px; /* 상 우 하 좌 */

margin: 10px auto;
/* auto
	: 요소 크기를 제외한 나머지 마진영역을 반으로 나눠 왼쪽과 오른쪽에 분배한다. 
      좌우로만 auto적용할 수 있고 상하로는 auto 적용할 수 없다.*/

마진 겹침 현상 (margin collapsing)

: 인접하는 블록요소의 상하단의 마진이 겹쳐졌을 때 더 큰 마진 값이 적용되는 현상

마진 겹침 현상의 조건
1. 인접하는 block 요소끼리만 일어난다.
2. 상하단만 겹침현상이 일어난다. (좌우의 여백의 병합은 일어나지 않는다)

Case 1: 인접하는 block 요소끼리 상하로 마진이 겹친 경우

<div class="one"></div>
<div class="two"></div>

div {
	width: 100px;
    height: 100px;
    background-color: khaki;
}
.one {
	margin-bottom: 30px;
}
.two {
	argin-top: 60px;
}

두 요소의 마진이 위 아래로 겹치지만 두 마진 값이 더해지지 않는다. 첫번째 요소의 마진값(30px) 보다 더 큰 두번째 마진 값(60px)이 적용된 것을 확인할 수 있다.

Case2: 부모와 자식간 마진이 겹친 경우
(1) 부모와 자식 둘 다 마진이 없는 상태

.parent {
	background-color: white;
    width: 300px;
    margin: 0;
}
.children {
	background-color: blue;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 0;
}

(2) 자식에게 마진 상하 좌우 50px씩 줬다.

이렇게 된 이유는,
마진 겹침 현상의 조건이 만족하기 때문인데
일단 부모, 자식요소 둘다 블럭요소이고 인접해있다.(조건1 만족)
그리고 자식의 좌우 마진은 잘 적용 되었지만 상하 마진만 적용이 되지 않았다. 이것은 부모와 자식간의 마진이 결합되었다는 뜻! (조건2 만족)

즉, 마진 결합이 되면 두 마진값 중 큰 마진값이 적용이 되는데
자식의 마진값은 50px이고 부모의 마진값은 0px이므로 더 큰 자식의 마진값 50px이 적용된다.

따라서, 50px은 이제 부모의 마진값이 되어버린 것이다.

해결방법

부모 요소에 border값 적용하기
- 부모 요소에 border값을 적용해주어 부모와 자식의 마진이 겹치지 않게 만든다.
- 하지만, 만약 border = 1px을 주었다고 가정한다면, 어찌됬던 1px이 더 늘어난 것이기 때문에 디자인 측면에서 1px의 오차가 발생하게 된다.
1.1 빈 table태그 넣기
table태그 자체에는 아무런 크기가 없어서 박스 크기에 영향을 주지 않는다!

	<div class="parent">
    	<div class="children">A</div>
        <div class="children">B</div>
    </div>

자식 요소의 display속성값을 inline-block으로 바꾸기
- 마진 결합 현상의 조건1(인접하는 block 요소끼리만 일어난다)이 더이상 만족되지 않아 부모와 자식간의 마진 결합 현상이 일어나지 않는다.
- 하지만, 자식들끼리의 마진병합도 일어나지 않아 자식들의 마진값이 더해진다.
  이미지를 보면 자식들간 마진결합이 원래 생겨야하는 부분에 마진결합이생기지 않고 서로 밀어내어 해당 부분이 더 넓어졌다.
부모요소에 overflow: hidden 적용하기
- 부모요소에 overflow: hidden을 적용시켜주면 부모, 자식박스의 크기에도 영향이없고 자식들간의 마진병합도 일어나는 동시에 부모, 자식간의 마진병합은 또 일어나지 않게 만들 수 있다!

참고

https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin

https://youtu.be/c19Mjg-ivxc

Author And Source

이 문제에 관하여([🦁FE DAY8(3)] 표준 CSS 박스 모델), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alsdl3344/FE-DAY84-표준-CSS-박스-모델-대체-CSS-박스-모델

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

oe-core, bitbake 를 이용한 recipe 개발

짝맞추기 게임 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다