object-fit : fill / contain / cover - fill : 이미지의 비율이 틀어지더라도 화면에 꽉 채움 - contain : 프레임에 여백이 남더라도 이미지를 자르지않고 비율에 맞게 꽉 채움 - cover : 이미지가 잘리더라도 여백 없이, 비율에 맞게 꽉 채움 --> IE11 이하에서는 동작이 안됨 (background-size와 같은 역할, 이미지 혹은 비디오에 적용할 수 있음) 배경으로 쓰이는 이미지/비디오는 opacity 값을 주어 약간 연하게 해주는 것이 보기 좋음

width: 100%; height: 100vh; ▶ body 안에서 직계자식의 블록요소는 height: 100% 적용이 안되기 때문에 높이값에는 vh를 사용해줘야 함 ▶ 너비값을 100vw로 지정하면 세로 스크롤이 있는경우 가로 스크롤이 생성되기 때문에 너비값에는 %를 사용해줘야 함 - 100%는 세로 스크롤바를 포함한 안쪽 너비 - 100vw는 세로 스크롤바를 제외한 안쪽 너비

id 페이지 내에서 중요한 컨텐츠에 고유의 이름을 부여해서 주소값을 설정 - 주로 개발요소를 빠르게 탐색할 때 쓰임 - 동일한 아이디값 중복설정 불가 class - 단지 구분점을 줘서 스타일을 주기위한 선택자 - 같은 클래스명이 한 페이지 내에서 복수개 등록 가능

absolute를 이용해 원하는 위치에 요소 적용시키기 - 배치할 요소에 position:absolute 적용한 뒤 가로, 세로 좌표값을 설정 - absolute의 좌표값은 무조건 '부모요소' 중에서 position 속성이 있는 기준으로 좌표값 설정 - 특정 요소를 absolute로 설정하는 순간에 해당 요소는 문서에서 강제로 뜯어져나와 설정한 좌표값 위치로 얹혀짐 - position: relative는 화면상에 (좌표값을 주지 않으면) 아무런 변화를 일으키지 않으면서 position 속성만 설정 - position: relative는 보통 자식 absolute요소의 기준점을 설정할 때 쓰임 - position: static 기본설정값, 위에서 아래로 쌓임 - absolute를 사용할 경우엔 float을..

margin역상속 - 블록요소인 부모태그 안에 첫번째 자식의 블록요소에 margin-top을 적용하면 해당 margin 값이 부모요소에 역상속 해결방법 - 부모 블록요소에 border값 적용 - 부모태그 안쪽으로 padding값 적용

세로로 1개일때 너비값 1180px 세로로 2개 분할되는 영역일때는 너비값 580px 세로로 3개 분할되는 영역일 때는 너비값 380px 세로로 4개 분할되는 영역일 때는 너비값 280px 사이간격 20px