전체 글 (31) 썸네일형 리스트형 object-fit 속성 CSS의 object-fit 속성은 이미지나 비디오와 같은 대체 요소(replaced element)의 콘텐츠 크기를 어떻게 조정할지 결정하는데 사용됩니다. 이 속성은 요소의 가로 세로 비율을 유지하면서, 지정된 너비와 높이에 맞게 콘텐츠를 채우거나, 콘텐츠를 자르거나, 또는 콘텐츠의 원래 크기를 유지하는 등의 동작을 정의합니다. object-fit 속성을 사용하면, 개발자는 콘텐츠의 가로 세로 비율을 유지하면서도, 다양한 디스플레이 크기와 해상도에 맞게 콘텐츠를 적절히 조정할 수 있습니다. 이를 통해 사용자에게 보다 일관된 시각적 경험을 제공할 수 있습니다. object-fit 속성은 주로 비주얼 콘텐츠를 다룰 때 유용하며, 웹 개발에서 사용자 인터페이스의 시각적 일관성을 유지하는 데 큰 도움이 됩니다.. CSS 함수란 CSS에서 함수의 사용은 CSS의 진화와 함께 점차 확장되어 왔습니다. 초기의 CSS는 매우 단순한 스타일링 기능만을 제공했습니다. 예를 들어, CSS1(1996년 발표)에서는 주로 색상, 폰트, 간격 등의 기본적인 시각적 속성을 정의하는 데 초점을 맞췄습니다. 그러나 웹의 발전과 함께 더 복잡하고 다양한 디자인 요구가 생겨나기 시작했고, 이를 효율적으로 처리하기 위해 CSS도 발전해야 했습니다. CSS 함수가 등장한 이유는 몇 가지로 요약할 수 있습니다: 디자인의 복잡성 증가: 웹 페이지와 애플리케이션의 디자인이 점점 더 복잡해지면서, 개발자와 디자이너는 스타일을 더 세밀하게 제어할 수 있는 방법이 필요했습니다. 유지 관리의 용이성: 함수를 사용하면 코드의 중복을 줄이고, 유지 관리를 용이하게 할 수 .. [Typescript] 클래스 선언 및 인스턴스화 타입스크립트 클래스 타입스크립트 관련 기능 - 클래스 멤버, 액세스 한정자 필수 또는 선택적 매개 변수 ES6 기능 확장 필요에 따라 모든 주요 브라우저 및 플랫폼에서 작동하는 자바스크립트로 컴파일 가능 타입스크립트 클래스 클래스 개념 (예) 자동차를 빌드한다고 할 때 Car 클래스는 청사진 자동차의 특성 - 제조사, 색상, 문 개수 등 자동차의 동작 - 가속, 제동, 회전 자동차 빌드를 위한 계획일 뿐, 실제 개체가 되려면 Car 클래스에서 Car 인스턴스를 빌드해야 한다. Car 클래스를 사용해 고유한 특성이 있는 새로운 Car 객체를 원하는 수만큼 만들 수 있다. Car 클래스를 확장해서 ElectricCar 같은 클래스를 만들 수도 있다. 이 클래스는 Car의 모든 특성과 동작을 포함하지만 주행거.. [Typescript] 형식화된 함수 개발 타입스크립트에는 표준 자바스크립트 함수에는 없는 몇 가지 새로운 기능이 있어 쉽게 함수를 작성할 수 있다. 타입스크립트에서 함수 만들기 왜 타입스크립트로 함수를 만드나 자바스크립트 함수에서는 매개변수에 데이터 형식을 지정하거나, 전달된 인수의 형식 검사를 시행하거나, 수신된 인수의 수를 확인하지 않는다 ⇒ 사용자가 매개변수를 확인하는 논리를 함수에 추가해야 한다 타입스크립트는 함수 개발을 간소화하며 사용자가 매개변수를 입력하고 값을 반환할 수 있어 문제를 쉽게 해결한다 매개변수에 새로운 옵션을 추가할 수 있다. → 매개변수를 필수 또는 선택 사항으로 지정 가능 (자바스크립트에서 모든 매개변수는 선택사항) 함수에 형식을 추가하면 ⇒ 함수에 전달하는 값과 반환되는 값을 검사할 수 있다 함수 논리를 만들 때 .. [Typescript] 인터페이스 구현하기 인터페이스란 인터페이스를 사용하여 개체, 이름 지정, 개체 형식의 매개 변수화를 설명하고 명명된 기존 개체 형식을 새 개체 형식으로 구성 인터페이스는 내부에 선언된 속성을 초기화하거나 구현하지 않습니다. 인터페이스의 유일한 작업은 형식을 설명하는 것이기 때문입니다. 인터페이스는 코드 계약에 필요한 항목을 정의하는 반면, 인터페이스를 구현하는 변수나 함수 또는 클래스는 필요한 구현 세부 정보를 제공하여 계약을 충족합니다. interface Employee { firstName: string; lastName: string; fullName(): string; } let employee: Employee = { firstName : "Emil", lastName: "Andersson", fullName():.. 이전 1 2 3 4 5 ··· 7 다음
