박스 모델 /border / padding / margin / float대용 margin병합? / table 선 없애기

박스모델

---

박스는 총 4가지의 세분된 영역으로 구성. 영역마다 다양한 스타일을 적용

• Content 영역 : 요소의 실제 내용을 포함하는 영역. 따라서 크기는 내용의 너비 및 높이. 너비는 width가 선언하고 너비는 height가 선언. 

• Padding 영역 : content 영역과 테두리 사이의 여백을 padding
  content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향
  이에 따라 padding을 content의 연장으로 볼 수도 있다.
• Border 영역 : content 영역을 감싸는 테두리 선

• Margin 영역 : border 바깥쪽의 영역
  border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역
  즉, 주변 요소와의 여백(간격) 지정

전체 박스 사이징의 값은 width + height + padding + border

border

---

요소의 테두리에 관련된 속성을 지정할 때 사용. 테두리의 굵기, 모양, 색상을 지정할 수 있는 속성.

border 관련 속성

• border-width

기본 값 : medium 선의 굵기 지정. border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다.

border-width: [top] [right] [bottom] [left];

< 속성 값 >

키워드	thin, medium, thick
단위	px, em, rem ... ( % , 정수 단위 사용불가 )

 

---

• border-style 

기본 값 :  none 선의 모양 지정. border-top-style, border-bottom-style, border-right-style, border-left-style을 이용 상하좌우 선의 모양을 다르게 표현. 하단 처럼 축약하여 공백을 이용해 각 방향에 대한 스타일을 지정가능

border-style: [top] [right] [bottom] [left];

< 속성 값 >

none	border를 표시 하지 않습니다.
solid	border를 실선 모양으로 나타냅니다.
double	border를 이중 실선 모양으로 나타냅니다.
dotted	border를 점선 모양으로 나타냅니다.

그 밖에도 dashed, double, groove, ridge, inset, outset 등의 다양한 스타일이 있습니다.

---

• border- color 

기본 값 : currentColor 선의 색상을 지정하는 속성입니다. border-top-color, border-bottom-color, border-right-color, border-left-color를 이용하여 상하좌우 선의 색상을 다르게 표현 가능. 하단처럼 축약하여 공백을 이용해 각 방향의 색상을 지정가능

border-color: [top] [right] [bottom] [left];

---

• border 축약

공백으로 구분해 축약하여 사용가능, 정의되지 않은 속성값에 대해서는 기본값이 적용

border: [-width] [-style] [-color];

---

 

MDN Color 표

Border 스타일 종류

border-collapse 속성 : table의 테두리와 셀(td)의 테두리 사이의 간격 처리 방식 설정하는 속성

 

padding

---

padding 영역은 border와 content 사이의 여백.

기본 값 : 0이며 CSS에서 0 값에 대해선 단위를 쓰지 않음

< 속성 값 >

length	고정값으로 지정합니다. (ex. px, em ....)
percent	요소의 width에 상대적인 크기를 지정합니다.
padding-top	content 영역 위쪽 여백 지정
padding-right	content 영역 오른쪽 여백 지정
padding-bottom	content 영역 아래쪽 여백 지정
padding-left	content 영역 왼쪽 여백 지정

padding: [-top] [-right] [-bottom] [-left];
            0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
            0      10px     20px                 /* 좌, 우 같음 */
            0      10px                              /* 상, 하 같음 & 좌, 우 같음 */
            0                                            /* 상, 우, 하, 좌 모두 같음 */

속성의 순서는 시계방향. 홀수, 짝수번째끼리 같은 값이면 축약된다고 생각하면 편하다.

border에서는 축약형 사용 시 정의되지 않은 속성값에 대해서 기본값이 적용되었지만, padding은 조금 다른 방식으로 동작.  상하, 좌우 영역의 값이 같을 때 하나로 합쳐서 적용하기 떄문

• padding : 20px 30px 40px 30px 일 때, 좌우의 패딩 값이 같을 때 padding : 20px 30px 40px 와 같이 함축하여 사용
• padding : 20px 30px 20px 일 때, 좌우 패딩과 마찬가지로 상하의 패딩 값이 같을 때 padding : 20px 30px 와 같이 함축하여 사용
• padding : 20px 20px ( = 20px, 20px, 20px, 20px )일 때, 상하좌우 패딩 값이 모두 같을 때 padding : 20px 와 같이 하나의 값으로 함축하여 사용

 

margin

---

margin은 border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역. 다른 요소와의 간격을 만들 수 있다는 것.

padding과 유사하지만 몇가지 차이점 존재한다.

기본값 : 0

< 속성 값 >

length	고정값으로 지정합니다. (ex. px, em ....)
percent	요소의 width에 상대적인 크기를 지정합니다.
auto	브라우저에 의해 계산된 값이 적용 됩니다.
margin-top	border 영역의 위쪽 여백을 지정합니다.
margin-right	border 영역의 오른쪽 여백을 지정합니다.
margin-bottom	border 영역의 아래쪽 여백을 지정합니다.
margin-left	border 영역의 왼쪽 여백을 지정합니다.

margin: [-top] [-right] [-bottom] [-left];
          0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
          0      10px     20px                 /* 좌, 우 같음 */
          0      10px                              /* 상, 하 같음 & 좌, 우 같음 */
          0                                            /* 상, 우, 하, 좌 모두 같음 */

상하, 좌우에 대해서 값이 같으면 하나로 합하여 사용

margin에서는 수치 이외에 사용할 수 있는 'auto' 값

 

---

margin auto

• margin auto 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가집니다. 이를 활용하여 수평 중앙 정렬을 할 수 있습니다. 아래 코드를 살펴봅시다.

margin-left: auto;
margin-right: auto;

좌우의 margin이 모두 auto 적용시, 브라우저는 요소가 가질수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할. 이에 따라 요소는 수평 중앙 정렬.

상하의 경우 수직 중앙 정렬이 되지 않으며, 기본적인 플로우를 벗어나는 상황에 대해서 적용. 심화적인 개념이 필요하므로 기초에서 수평 정렬 개념을 확실히 잡아두는 것이 좋다.

---

margin collapse(마진 병합)

인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것.

마진 병합이 다음 세가지의 경우에 발생

1. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어납니다.
2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
   1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어납니다.
   2. 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어납니다.
3. 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어납니다.

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않음
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야함.

마진 병합을 활용하여 첫 번째와 두 번째 컴포넌트의 조합이 다양한 경우 여백을 다르게 사용