시멘틱 태그 : html5 추가 된 태그로 문서의 각 구조에 사용하는 태그 header main footer : 기본 구조 nav : 네비게이션 영역 section : 주제별 그룹 article : 본문에 긴 글 aside : 부가설명 영역 figure : 사진, 차트, 소스코드 등 삽화 영역 figcaption : figure로 블록화 한 그림 등의 제목 영역
object-fit 이란 CSS의 'object-fit' 속성은 html 태그 요소 내에 이미지나 비디오를 배치하고 크기를 조절하는 데 사용 object-fit 속성 값 cover : 이미지의 비율을 유지하면서 요소를 꽉 채움 fill : 이미지의 비율을 유지하지 않고 요소를 꽉 채움 contain : 이미지의 비율을 유지하면서 내용이 전체적으로 비오도록 함 none : 내용의 크기 조정 없이 그대로 표시 scale-down : 'contain'과 'none' 중에 적절한 것을 선택 .container { width: 300px; height: 200px; overflow: hidden; } .image { width: 100%; height: 100%; object-fit: cover; } ex) +추..
z-index : 화면에 나타나는 요소들의 우선순위를 정할 수 있습니다. 숫자의 크기가 커질수록 화면에 앞 쪽에 나타납니다. 헤더영역에 있는 퀵바가 이미지 뒤에 가려지는 것을 볼 수 있습니다. position: relative; z-index: 값; 기본 바탕이 0이여서 0보다 큰 숫자를 입력하시면 요소가 바탕 위로 올라옵니다. 이 때, position: relative가 있어야 합니다. z-index는 position이랑 함께 씁니다.
