CSS 단위, 배경, 박스모델

CSS 정의와 구문

CSS Reference를 통해 확인 가능한 사항들

정의
해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있음
- 기본 값
- 상속 여부
- 애니메이션 가능 여부
- 사용 가능한 CSS버전

문법
해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있음

속성 값
해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있

- Initial : 초기값, 즉 속성의 기본값으로 정의 (ie에서 지원하지 않음)
- Inherit : 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우)
- 즉, 상속이 불가능한 속성일 경우에는 적용 되지 않음

지원 범위
해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 버전을 확인할 수 있음
- 어떤 브라우저의 어떤 버전이냐에 따라 같은 값이어도 다르게 렌더링 될 수 있으므로, 현재 프로젝트의 사용자 제공 지원 범위를 잘 확인하고 적용해야 함

예제
문법과 속성값을 바탕으로 실제로 속성을 동작하는 예제 코드를 확인할 수 있음

참고 사항
해당 속성에 대해 특이사항이나 버그에 대해서 확인할 수 있음

CSS 단위

절대 길이

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

상대 길이

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

%
부모의 값에 대해서 백분율로 환산한 크기를 갖음

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

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

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

CSS 색상

h1  {color: 색상 값;}

색상 값 지정 방식

컬러 키워드 
CSS 자체에서 사용 가능한 문자 식별자
red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있음
* 참고 : transparent는 투명을 나타내는 키워드 *

16진법 ex.#RRGGBB
6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타냄
첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미
각 자리의 알파벳은 대소문자를 구분 X

16진법 ex.#RGB
6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있음
예를 들어, #aa11cc 는 #a1c로 축약하여 사용할 수 있음

RGB()
RGB 값은 rgb(R,G,B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의
0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타냄

RGBA()
RGBA 값은 기존 RGB에서 A값이 추가된 형태
rgb(R,G,B,A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의
A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기
0 → 1은 투명 → 불투명으로 값의 변화를 나타냄
예를 들어, rgba( 0, 0, 0, 0)는 투명한 색상을 가지게 됨

CSS background

- background-color  (기본 값: transparent)
배경의 색상을 지정하는 속성

- background-image 	(기본 값: none)
배경으로 사용할 이미지의 경로를 지정하는 속성
url의 경로는 절대 경로, 상대 경로 모두 사용 가능
만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출됨

- background-repeat (기본 값: repeat)
이미지의 반복 여부와 방향을 지정하는 속성
기본값이 repeat이기 때문에 따로 설정하지 않으면 x, y축으로 반복되어서 표시됨
background-repeat의 값으로 사용할 수 있는 것들은 다음과 같음

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

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

** 뷰포트 : 사용자가 시각적으로 볼 수 있는 웹페이지 영역(컴퓨터나 휴대폰과 같은 장치에 Display 요소가 표현되는 영역)

• background 축약

background: [-color] [-image] [-repeat] [-attachment] [-position];

boxmodel

• Content 영역
  요소의 실제 내용을 포함하는 영역. 따라서 크기는 내용의 너비 및 높이를 나타냄

• Border 영역
  content 영역을 감싸는 테두리 선을 border

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

• Margin 영역
  border 바깥쪽의 영역을 margin이라고 함
  border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역
  즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있음

border

border-width (기본 값 : medium)
선의 굵기를 지정하는 속성

border-style (기본 값 :  none)
선의 모양을 지정하는 속성

border-color (기본 값 : currentColor)
선의 색상을 지정하는 속성

• border 축약

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

padding

• padding (기본 값 : 0)
• padding 축약

padding: [-top] [-right] [-bottom] [-left];

margin

• margin (기본 값 : 0)

margin: [-top] [-right] [-bottom] [-left];

• 수치 이외에 사용할 수 있는 'auto' 값이 있음
• margin auto 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가짐
• 이를 활용하여 수평 중앙 정렬을 할 수 있음

margin collapse(마진 병합)

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

마진 병합이 다음 세가지의 경우에 일어남

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

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

margin과 padding의 비교

	+	-	auto	단위
margin	o	o	o	px, %...
padding	o	x	x	px, %...

** %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정 됩니다.

width

• width (기본 값: 0)
• content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받음 (content, padding, border)
• box-sizing 속성을 border-box 값을 설정하면 너비가 콘텐츠, 패딩, 그리고 테두리(border)를 모두 포함하게 됨
• 부모가 인라인 레벨 요소일 때, 자식(블록 요소)이 width 값에 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산. 만일 최상단까지 블록 레벨 요소가 없으면 body를 기준으로 계산.

height

• height (기본 값: 0)
• content 영역의 높이를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다.

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

실제로 확인해보면, height: auto일 때와 height: 50%일 때 차이가 없는 것을 확인할 수 있음
왜 두 값의 차이가 없는 걸까?
MDN에서 height 속성에 percent value에 대한 설명을 보면 "Containing Block의 높이에 대한 백분율로 높이를 정의합니다."고 나와 있음.
여기서 말하는 Containing Block은 부모를 의미한다고 생각하면 됨
즉, 현재 위의 코드에서는 부모가 명시적인 높이 값을 가지고 있지 않기 때문에 자식의 높이를 %값으로 지정해줘도 적용되지 않음
부모 코드에 height: 200px로 명시적으로 높이 값을 지정해주면, 위와 같이 %값이 적용되는걸 볼 수 있음