박스 속성

• 페이지의 레이아웃을 구성하는데 중요
  

속성	설명
content	실제 내용이 위치하는 영역
margin	border와 다른 태그 사이의 바깥쪽 여백
border	테두리
padding	border와 content 사이의 안쪽 여백 + background-color는 padding 영역까지 적용
width	content를 감싸는 영역의 가로 크기
height	content를 감싸는 영역의 세로 크기

padding

• height에서 %는 상대 단위라서 임의로 지정하지 않으면 사용할 수 없음 대신 vh 사용하면됨
  • %는 부모의 자식일 때는 가능
• "위아래 양옆" / "위 좌우 아래" / "위 우 아래 좌"(시계)

border

• border-width : 굵기
• border-style : 형태
• border-color : 속성
• border-radius : 모서리 동글기 "왼위 오위 오아래 왼아래"

margin

• auto : 좌우 동일한 여백으로 중앙 정렬 가능
• 위아래는 절대 단위로 넣어야 적용 가능
• 겹쳐졌을때 큰쪽으로 병합

박스 크기와 여백

• 전체 너비 = 내용 width + 2×(border+padding)
• 전체 높이 = 내용 height + 2×(border+padding)

display 속성

• 태그가 화면에 보이는 방식 지정

키워드	설명
none	화면에 안보임
block	블록 형식으로 설정
inline	인라인 형식으로 설정
inline-block	인라인 블록 형식으로 설정

block

• 한 줄 차지 width:100%
• width, height, margin, padding 속성 모두 반영
• div, p, h1

inline

• content만큼만 차지
• width, height 속성 지정해도 무시됨
• margin, padding는 좌우만 반영, 상하는 무시됨
• span, a

inline-block

• 인라인 처럼 배치 (content만큼만 차지)
• 높이/너비 설정 가능 (width, height, margin, padding 속성 지정됨)
• button, input, select

flex

• 레이아웃 구성을 위한 컨테이너를 설정

grid

• 그리드 기반 레이아웃 구성

배경 속성

속성	설명
background-image	배경 이미지 삽입	background-image:url();
background-size	크기 지정	background-size:500rem;
background-repeat	반복 형태 지정	background-repeat:no-repeat;
background-attachment	부착 형태 지정	background-attachment:fixed;
background-position	위치 지정	background-position:bottom;
background	모든 속성 입력

글자 속성

속성	설명
font-size	크기
font-family	글꼴
font-style	ex)기울기
font-weight	굵기
font-align	정렬(기본-left) ex) center, right
text-decoration:none	a태그 href 속성에서 밑줄 지우기

position 속성

키워드	설명
absolute	절대 위치 좌표 설정
fixed	viewport화면을 기준으로 절대 위치 좌표 설정
relative	초기 위치에서 상하좌우로 위치 이동
static	(기본값) 위쪽에서 아래쪽으로 순서 배치 / 좌표 X
sticky	스크롤때 자기 위치 고정

• z-index 기본값 0
• 코드 아래쪽이 우선순위를 갖음

absolute

• 요소를 일반적인 문서 흐름이 아닌 가장 가까운 position이 지정된 부모요소를 기준으로 배치
  • 자손이 absolute를 사용하려면 부모에게 position: relative;를 적용해야함
  • 만약 그런 부모가 없으면 body(최상위 요소)를 기준으로 배치됨
  • 따라서 부모가 position: static;(기본값)이라면, 자동으로 body를 기준으로 하게 됨.
• top, right, bottom, left 속성을 사용해서 원하는 위치로 배치 가능.
  • 하지만 기본적으로 넒이는 content 넓이 만큼 설정됨
• 부모 요소를 벗어나는 경우 overflow를 사용해서 지정할 수 있음
  • overflow: hidden; 또는 overflow: scroll;

float 속성

• 잘 자용하지 않음

1. 부모 요소의 높이를 망가트림
2. 레이아웃 깨짐 문제
   -> flex grid를 사용함

그림자 gradient 속성

• text-shadow : 오 아래 흐림 색;
• 편집기 사용 : gradient 생성기, css gradient