[CSS] 단위, 배경, 박스모델

1. 절대 vs 상대 길이

절대 길이

절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음

• px ( 1px = 1/96th of 1 inch )

절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적임.
여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서,
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장

 

상대 길이

상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함

• % : 부모의 값에 대해서 백분율로 환산한 크기

• em : font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합

• rem : root의 font-size를 기준으로 값을 환산

• vw : viewport의 width값을 기준으로 1%의 값으로 계산

 

2. background 속성

• background- repeat : 이미지의 반복 여부와 방향을 지정하는 속성
  
  기본 값 : repeat

기본값이 repeat이기 때문에 따로 설정하지 않으면 x, y축으로 반복되어서 표시

 

< 속성 값 >

repeat	x, y축 으로 모두 반복합니다.
repeat-x	x 축 방향으로만 반복합니다.
repeat-y	y 축 방향으로만 반복합니다.
no-repeat	이미지를 반복하지 않습니다.

 

• background-position : 기본 값 : 0%  0% 요소에서 배경 이미지의 위치를 지정하는 속성 =>  x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격입니다. 만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용

 

• background-attachment : 기본 값 : scroll 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성

< 속성 값 > => 브라우저 성능에 좋지 않아 많이 사용 x

scroll	배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않습니다.
local	배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 됩니다.
fixed	배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않습니다.

 

3. padding 순서 (margin도 같은 순서)

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

• 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 

 

4. margin

• margin auto : 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가짐. 이를 활용하여 수평 중앙 정렬을 할 수 있음.
  • 좌우의 margin이 모두 auto로 적용 되었다면, 브라우저는 요소가 가질수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할 하여 적용.
  • 이에 따라 요소는 수평 중앙 정렬. 상하의 경우 수직 중앙 정렬이 되지 않으며, 기본적인 플로우를 벗어나는 상황에 대해서 적용.
• margin collapse(마진 병합) : 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것
  •  margin은 상하 요소 사이의 병합 현상이 일어나고 이때는 큰 값을 기준으로 병합
  • 일어나는 상황 3가지
    • 1. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어남.
      2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
         1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어남.
         2. 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어남.
      3. 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어남
    • 마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않음
    • 마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 함

 

5. margin과 padding의 비교

	+	-  (음수 가능여부)	auto	단위
margin	o	o	o	px, % ...
padding	o	x	x	px, % ...

• %값의 사용과 기준점 : margin과 padding은 px과 같은 고정적인 단위 외에도 %라는 상대적인 단위를 가능. %는 요소의 크기를 기준으로 상대적인 값을 결정짓게 됩니다. %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정.

 

6. width의 %

<div class="parent">
  <div class="child">
    child
  </div>
</div>
 
.parent {
  width: 300px;
  border: 20px solid red;
}
.child {
  width: 50%;
  padding: 20px;
  border: 10px solid black;
}

- child의 width의 크기는 ? 

• 정답은 210px 우선, padding (20px * 2) + border (10px * 2) = 60px 임. 210px - 60px = 150px 이며, 150px은 부모의 width가 300px이므로 300px의 50%인 150px이 width값으로 결정
• 결국 %값일 때에는 부모의 width값에 대해서 계산되어지는데, 이때 부모의 width는 content 영역의 크기를 의미
• 부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준

 

7. height의 %

<div class="parent">
  <div class="child">
    child
  </div>
</div>
 
.parent {
  width: 200px;
  border: 10px solid black;
}
.child {
  height: 50%;
  background: red;
}

- child의 height의 크기는 ? 

height: auto일 때와 height: 50%일 때 차이가 없음.

그 이유는 MDN에서 height 속성에 percent value에 대한 설명을 보면 "Containing Block의 높이에 대한 백분율로 높이를 정의합니다."고 나와 있음. 여기서 말하는 Containing Block은 부모를 의미.

즉, 현재 위의 코드에서는 부모가 명시적인 높이 값을 가지고 있지 않기 때문에 자식의 높이를 %값으로 지정해줘도 적용되지 않음.

 

+ width와 height 그리고 padding과 border을 모두 더한 것이 요소의 전체 크기가 된다