728x90 반응형 CSS4 CSS / object-fit 이미지 비율 유지하면서 채우기 object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다 CSS img { width: 100px; height: 100px; border: 1px solid #000 // object-fit: fill ; // object-fit: cover; // object-fit: contain; // object-fit: none; // object-fit: scale-down; } fill : 대체되는 요소의 내용이 지정된 너비와 높이에 따라 크기가 확대(scale up) 혹은 축소(down), 늘어나거나(stretch) 움츠러든다(shrunk). 요소를 .. 2021. 6. 23. CSS / 링크 상태 속성 / <a>태그 CSS / 밑줄 없애기,변경하기 태그 CSS a태그입니다 :link → 방문 전의 링크의 상태 :visited → 한번이라도 방문한 링크의 상태 :active → 클릭하는 순간의 상태 :hover → 마우스 오버시 상태 링크 밑줄 상태 a태그입니다 text-decoration: none; → 밑줄 지우기 text-decoration: dotted underline black; ㅁ 2021. 5. 7. CSS/기호/공백/띄어쓰기/<> html에서 여러번의 띄어쓰기를 하거나, 를 직접적으로 사용하면 안되는 경우가 있습니다. 줄 바꿈 없는 공백 (non-breaking space, no-break space) //공백(띄어쓰기) //> 2021. 5. 4. CSS/table/border-collapse/테이블 선 속성 border-collapse 표의 테두리와 셀의 테두리 사이의 간격 처리 방식을 정하는 속성입니다. border-collapse:collapse; 간격을 합치고 하나의 선으로 나타냅니다. border-collapse:separate; 간격을 두고 두개의 선으로 나타냅니다 테이블의 기본 속성이기도 합니다. border-spacing:10px; 테이블과 셀의 간격을 10px;로 변경합니다. table{ border-collapse:separate; border-spacing:10px; } border-collapse:inherit; 부모 요소의 속성값을 상속받습니다 table{ border-collapse:inherit; } border-collapse:initial; 테이블을 기본값으로 설정합니다. tab.. 2021. 4. 28. 이전 1 다음 728x90 반응형
