○ width, height

높이와 너비

단위	설명
px	절대 크기: 모니터상의 한 점
%	상대 크기: 바로 윗 부모의 크기에 비례
vw	상대 크기: 뷰포트 너비의 1/100
vh	상대 크기: 뷰포트 높이의 1/100
vmax	상대 크기: 뷰포트 너비, 높이 중 긴 쪽의 1/100
vmin	상대 크기: 뷰포트 너비, 높이 중 짧은 쪽의 1/100

• calc() : CSS 속성의 값으로 계산식을 지정할 수 있다. <length>, <frequency>, <angle>, <time>, <percentage>, <number>, 또는 <integer>를 받는 속성의 값으로 사용할 수 있습니다.

/* property: calc(expression) */
width: calc(100% - 80px);

표현식은 단순 계산식이며, /, *의 피연산자는 <number>여야 한다. 또한 +, -연산자는 좌우에 공백이 있어야 하며, /, *는 공백을 요구하지는 않지만 일관성있게 넣는 편이 좋다.

○ margin

바깥쪽 여백

값의 갯수에 따른 설정 요소

• 1개 : 네 면의 여백
• 2개 : 위와 아래 / 왼쪽과 오른쪽
• 3개 : 위 / 왼쪽과 오른쪽 / 아래
• 4개 : 위 / 오른쪽 / 아래 / 왼쪽

값

• <length> : 여백의 크기로 고정값 사용
• <percentage> : 여백의 크기로 컨테이닝 블록 너비의 백분율 사용
• auto : 브라우저가 적절한 여백의 크기를 선택, 요소를 중앙 정렬하고 싶을 때 사용.

참고

수평 중앙 정렬을 하고 싶을 때

• display : flex;, justify-content : center;
• margin : 0 auto : 플렉스 박스 레이아웃을 지원하지 않는 IE 8-9를 지원해야 한다면 사용

⭐️ 여백 상쇄
: 두 개의 요소와 위와 아래 여백은 종종 합쳐져서 하나의 여백이 되고, 여백의 크기는 둘 중 큰 여백과 같아진다.

○ padding

안쪽 여백, 컨텐츠와 테두리 사이의 공간

○ border

border-color, border-style, border-width 값 중에서 선택해서 지정할 수 있으며, 순서는 영향을 주지 않는다.

border-style

• none : hidden 키워드와 마찬가지로 테두리를 표시하지 않습니다. background-image를 지정하지 않았으면 해당 면의 border-width 계산값은 지정값을 무시하고 0이 됩니다. 표에서, 칸의 테두리 상쇄 시 none은 제일 낮은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가진다면 테두리를 그립니다.
• hidden : none 키워드와 마찬가지로 테두리를 표시하지 않습니다. Unless a background-image를 지정하지 않았으면 해당 면의 border-width 계산값은 지정값을 무시하고 0이 됩니다. 표에서, 칸의 테두리 상쇄 시 hidden은 제일 높은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가지더라도 그리지 않습니다.
• dotted : 테두리를 둥근 점 여러개로 그립니다. 점 간격은 명세에서 지정하지 않으며 구현마다 다릅니다. 점의 반지름은 해당 면 border-width의 절반입니다.
• dashed : 테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다.
• solid : 테두리를 하나의 직선으로 그립니다.

○ border-radius

둥근 모서리

/*원이 그려짐*/
div {
  border-radius: 50%;
}

○ background

속성	설명
background-color	배경색
background-image	배경 이미지
background-size	배경 이미지 크기
background-position	배경 이미지 위치
background-repeat	배경 이미지 반복 여부

div {
  /* 비율 유지, 상자에 빈 곳이 없도록 꽉 채움 */
  /* 상자와 비율이 다르면 이미지를 잘라냄 */
  background-image: url("./nature.jpg");
  background-size: cover;
}

div {
  /* 비율 유지, 상자를 벗어나지 않도록 꽉 채움 */
  /* 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 */
  background-image: url("./nature.jpg");
  background-size: contain;
  background-repeat : no-repeat;
}

○ box-shadow

• 두 개에서 네 개의 값.
  - 두 개의 값을 사용하면 로 분석합니다.
  - 세 번째 값이 주어지면 로 분석합니다.
  - 네 번째 값이 주어지면 로 분석합니다.
• 선택사항으로 inset 키워드 : 값을 지정하지 않으면 요소가 공중에 떠있는 것처럼 밖에 드리우는 그림자가 된다. inset 키워드가 존재하면 요소가 움푹 들어간 것 같은 효과가 난다.
• 선택사항으로 값.

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

⭐️ 브라우저 별 접두어

• -webkit- : 구글, 사파리 브라우저에 적용
• -moz- : 파이어폭스 브라우저에 적용.
• -ms- : 익스플로러에 적용 (생략가능)
• -o- : 오페라 브라우저에 적용.