HTML & Css (3) 썸네일형 리스트형 [Css] object-fit 속성에 대해서 알아보자. object-fit Css의 object-fit은 이미지와 비디오 요소의 크기와 관련된 속성입니다. 이 속성은 이미지나 비디오 요소의 '부모 크기'에 맞게 조정하고 요소의 가로세로 비율을 유지하면서 요소를 자르거나 확대/축소할 수 있습니다. object-fit이 가지고 있는 속성값들은 다음과 같습니다. 속성값 설명 fill 기본값, 이미지나 비디오 요소를 부모 요소에 맞게 꽉 채우면서 가로세로 비율은 유지하지 않기 때문에 오브젝트가 늘어나거나 찌그러집니다. contain 이미지나 비디오 요소를 부모 요소에 맞게 조정하면서 가로세로 비율을 고정된 상태로 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. cover 이미지나 비디오 요소를 부모 요소에 꽉 채우면서 가로세로 비율을 고정된 상태로 맞추기 때문에.. [Css] Class 작명법에 대해서 알아보자. Css에서는 OOCSS(Object Oriented CSS)와 BEM(Block Element Modifier)이라는 두 가지 클래스 작명 방법론이 있습니다. OOCSS(Object Oriented CSS) 방법론 OOCSS는 Css를 객체 지향적으로 작성하는 방법입니다. 이 방법은 스타일을 재사용이 가능한 모듈로 분리하여 코드의 유지 보수성과 재사용성을 높히는 것을 목표로 합니다. 예를들어, 버튼 요소에 대한 클래스 이름은 "button"이 아닌 "btn"과 같이 간결한 이름으로 작성하고, 버튼의 색상, 크기, 모양 등의 속성은 별로의 클래스로 분리하여 작성합니다. 흔히 뼈와 살을 분리하는 작명법이라고 합니다. Primary Button Second Button Css 작성은, /* Css */ .btn{ [HTML] Form 태그에 대해서 알아보자. 양식 입력은 필수이다. form 양식은 웹사이트에서 사용자가 데이터를 입력하고 제출할 수 있는 기능을 제공합니다. 이를 통해, 사용자가 원하는 정보를 제공하고, 웹사이트에서 필요한 데이터를 수집할 수 있습니다. 따라서, form 양식은 웹사이트에서 매우 중요한 역할을 합니다. 사용자들은 일상에서 다양한 형태의 form 양식을 접하게 됩니다. 예를 들어, 온라인 쇼핑몰에서 상품을 구매하기 위해 주문서를 작성하거나, 회원가입을 위한 가입 양식을 작성하는 경우가 있습니다. 또한, 검색 엔진에서 검색어를 입력하거나, 뉴스 사이트에서 댓글을 작성하는 등의 경우도 form 양식을 사용합니다. 우리가 일상에서 가장 흔하게 볼 수 있는 로그인 페이지가 바로 대표적인 form 양식입니다. 아이디와 비밀번호를 입력하고 l.. 이전 1 다음
