선택자 = 어디에 적용할 것인지를 나타냄속성과 속성 값은 콜론(:)으로 구분 '속성:속성 값' 같은 형시으로 표시하고 다음에는 세미콜론(;)으로 구분한다여러개 사용된 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것= 문서 안에 정리
font-family = 글꼴 지정
\-요소를 삽입했을 때 혼자 한 줄을 차지하는 요소\-요소의 너비가 100%\-줄을 차지하지 않는 요소\-화면에 표시돠는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음
포지셔닝 = css를 웹 문서 요소를 적절히 배치시키는 것\-css를 이용해 여러 박스 모델을 화면상에 배치하려면 박스 모델 너비 값을 정확히 계산해야 함\-width 값을 계산하기 어렵다면 box-sizing-border-box;로 지정해 박스모델 너비를 알기 쉽게
\-선택자와 선택자를 연결해 적용 대상을 한정하는 선택자\-컴비네이션 선택자 또는 조합 선택자 라고도 함
사용자 동작에 반응하는 가상 클래스 ul 요소에 상태에 따른 가상 클래스 구조 가상 클래스 ![](https://images.velog.io/images/hanan0105/
변형(트랜스폼) = 특정 요소의 크기나 형태 등 스타일이 바뀌는 것\-수평이나 수직으로 웹 요소 변형\-크기나 각도만 지정하면됨\-2차원 좌표 사용\-x축과 y축에 원근감 추가\-z축은 앞뒤로 이동, 보는 사람 쪽으로 다가올 수록 값이 더 커짐\-웹 요소를 변형하려면
웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트
그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것여유 공간에 따라 너비나 높이,위치를 자유롭게 변형할 수 있음배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정최신 모던 브라우저에서는 모두 지원되고 대부분의 구식 버전에서도 지원됨하지만 브라우저