개발자가 자주 쓰는 스타일

 

display

• flex: 아이템들을 가로 방향 혹은 세로방향으로 배치할 수 있음(1차원)
• grid: 컬럼과 로우의 비율이나 크기를 지정(2차원)
• none: 요소를 렌더링하지 않음. 영역 차지 x
• inline: 줄 바꿈되지 않는 한줄짜리로 width, height, 여백 지정 x (span, a, b, i, img 태그)
• block: 가로 영역을 모두 차지하며 항상 줄바꿈이 되어 새로운 라인에서 시작 (div, p, h, li, form 태그)
• inline-block : 요소 자체는 inline처럼 동작하지만(줄바꿈x) 해당 요소 내부에서는 블록 요소처럼 동작(크기나 여백을 지정할 수 있음)

 

position

• static(기본값) : 기본값으로 배치를 브라우저에게 맡기겠다는 의미 (브라우저 너에게 배치를 맡길겡)
• relative : 브라우저가 배치하고 나서 추가 조정하겠다는 의미 (브라우저 너 먼저 배치해. 그다음에 내가 조정할게)
• absolute: 브라우저 왼쪽 모서리 기준으로 사용자가 직접 배치하겠다는 의미 (브라우저 넌 관여하지마. 내가 알아서 할겡)
• fixed: 화면상 특정 위치에 고정, 메뉴바나 모달 만들때 많이 사용

 

부모: relative 자식: absolute 

자식을 부모 왼쪽 모서리 기준으로 배치 가능

left, top, right, bottom 값을 주지 않으면 자식은 자동으로 부모 왼쪽 모서리에 붙음

 

 

 

z-index

z축 기준으로 앞(+), 뒤(-)로 이동

position 속성이 relative, absolute일 떄 동작

 

transform

• scale: 기존 사이즈의 (좌우, 상하) 배로 늘리고 줄이기. 
• rotate: 회전
• skew: (x,y)도 만큼 왜곡

 

overflow

• visible (기본값): 넘칠 경우 컨텐츠가 상자 밖으로 보여짐
• hidden: 넘치는 부분은 잘려서 보이지 않음
• scroll: 스크롤바가 추가되어 스크롤할 수 있음 (가로, 세로 모두 추가)
• auto: 컨텐츠량에 따라 스크롤바 추가가 자동으로 결정됨