본문 바로가기

분류 전체보기

 (31)
border-radius CSS의 border-radius 속성은 박스 모델의 코너를 부드럽게 처리하기 위한 속성입니다.코너 부분에 원이 있다고 가정해서 원의 반지름 값을 지정하면 코너를 둥글게 처리할 수 있죠. 예를 들어, 다음과 같이 border-radius 값을 24px이라고 지정하면 네 방향 코너에 반지름 24px인 원이 있는 것처럼 둥글게 만들어 줍니다. Border radius  만일 안과 밖에 테두리가 있을 경우에는 다음처럼 표시하려면 border-radius 값을  어떻게 지정해야 할까요? 안과 밖의 요소에 같은 border-radius 값을 지정해 보겠습니다.  Border radius  안쪽 와 바깥쪽 에 같은 border-radius 값을 사용했는데 모양이 어긋나 ..
깃허브에 2개 이상의 계정으로 접속하기 깃허브에 계정을 1개만 사용하는 경우가 대부분이지만, 회사 계정과 개인 계정을 하나의 컴퓨터에서 사용하는 경우도 있습니다. 저처럼 실제 계정 외에 테스트 계정이 필요한 경우도 있고요. 그런데 깃허브 원격 저장소를 한번 추가하면 다른 계정으로 접속하려고 해도 처음 계정 정보를 가지고 있기 때문에 다른 계정의 push 권한을 가지지 못합니다. 깃허브에서 2가지 계정을 각각 사용하려면 SSH 접속을 사용하면 됩니다. 새로운 SSH 키 만들기 1) Git Bash를 실행한 후 다음 과정을 따라서 SSH 키를 생성합니다. cd ~/.ssh ssh-keygen -t ed25519 -C "메일주소" Enter file in which to save the key : ssh 키 파일 이름을 지정할 수 있습니다. 그냥 ..
깃허브 소개 깃허브 소개 깃허브(GitHub)는 분산 버전 제어 시스템인 Git을 핵심으로 사용하는 클라우드 기반 플랫폼으로 프로젝트에서 협업 프로세스를 간소화하고 개발자와 사용자의 협업을 허용합니다. 이미 알고 있듯이 깃허브는 동종 최대 규모의 개발자 커뮤니티입니다. 1억 명 이상의 개발자, 3억 3천만 개 이상의 리포지토리 그리고 수많은 배포 관련 실시간 데이터를 통해 개발자의 변화하는 요구 사항을 이해하고 제품을 그에 맞게 변경하고 있죠. 그 결과 깃허브는 전 세계 어느 기업도 따라올 수 없는 놀라운 규모를 갖추게 되었고 혁신적인 효율성을 위한 협업 기능, 생산성 향상을 위한 도구, 모든 단계의 보안, 이 모든 것을 새로운 차원으로 끌어올리는 생성형 AI의 통합까지, 계속해서 발전해 가고 있습니다. 협업 : 깃..
[기타] 깃허브 코파일럿 설치 및 구성하기 여기에서는는 깃허브 코파일럿에 등록하는 방법, Visual Studio Code를 사용하여 깃허브 코파일럿 을 구성하는 방법, Visual Studio Code를 사용하여 깃허브 코파일럿의 문제를 해결하는 단계에 대해 살펴봅니다. 깃허브 코파일럿 에 등록 깃허브 코파일럿을 사용하려면 먼저 개인 계정용 무료 평가판을 사용하거나 유료로 결제(구독 설정)해야 합니다. 참고: 깃허브에서 인기 있는 오픈 소스 프로젝트의 관리자나 학생, 교사는 코파일럿 개인(Copilot Individual)을 무료로 사용할 수 있습니다. 학생이나 교사라면 깃허브 에듀케이션 페이지를 방문해 보세요. 무료 평가판 등록하기 깃허브 코파일럿을 한번도 사용해 본 적이 없다면 무료 평가판을 먼저 사용해 보기 바랍니다. 30일간 무료로 사용..
[깃허브] 깃허브 코파일럿 소개 깃허브 코파일럿 소개 AI가 기술 환경에 변화를 일으키고 있다는 것은 이미 잘 알려진 사실입니다. AI는 세상이 움직이는 방식과 조직과 팀의 운영 방식에 근본적인 변화를 가져오고 있습니다. 이러한 AI의 발전은 기폭제의 역할을 할 수 있으며, 이를 잘 활용하고 적용하면 전 세계 개발자의 생산성을 획기적으로 발전시킬 수 있습니다. 개발자의 경우 자주 사용하는 개발자 도구에 AI 기능을 추가함으로써 이전보다 더 빠르고 효율적인 공동 작업, 개발, 테스트, 제품 출시의 결과를 가져올 수 있습니다. 깃허브 코파일럿은 모든 상용 프로그래밍 언어에서 작동되며 개발자의 생산성을 전반적인 영역에서 획기적으로 높여주는 AI 보조 프로그래머가 지원되는 서비스입니다. 최근 연구에서 GitHub와 Microsoft는 개발자가..
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():..

티스토리툴바