씨 (4) 썸네일형 리스트형 서버 아키텍처 - 엠브이씨 비즈니스 로직과 데이터를 처리하는 코드는 분산하는 것이 좋습니다. 엔티티프레임워크는 MVC 패턴을 제공하는데요. 사용법을 살펴보겠습니다. 프로젝트 구성하기 프로젝트 생성 및 기본구조 구성 서버 아키텍처 - 프로젝트 분산하기 서버 구조 인터페이스는 서버에 대한 요청과 응답처리하며 데이터베이스에 전송할 쿼리를 작성하고 데이터를 받는 역할을 수행하는 인프라스트럭처 프로젝트에 의존합니다. 인프라스트럭처 jin-co.tistory.com 패키지 설치 데이터베이스와 연결을 위한 설정을 해 줄 패키지가 필요한데요. 검색창에 누겟갤러리를 검색하여 엽니다. NuGet: Open NuGet Gallery ▶ 설치할 패키지 패키지를 설치할 때 주의할 점은 패키지 버전이 반드시 .NET의 버전과 같아야 한다는 점입니다. 예를.. 앵귤러 - 씨엘아이 앵귤러 씨엘아이는 (커맨드라인 인터페이스)는 앵귤러 어플리케이션을 만들고 관리하는데 권장되는 도구입니다. CLI 설치 npm install -g @angular/cli CLI 업데이트하기 npm uninstall -g @angular/cli npm install -g @angular/cli@latest 글로벌환경에서 업데이트를 하더라도 프로젝트에서 사용하는 버전이 우선적용되기 때문에 기존에 생성해 둔 프로젝트는 따로 업데이트를 해야 합니다. 방법은 해당 프로젝트 파일에서 아래 명령어를 실행하면 됩니다. rm -rf node_modules npm uninstall @angular/cli --force npm install @angular/cli@latest --force npm i --force 비주얼 스.. CSS 컴포넌트 - 토글버튼 HTML과 CSS로 토글 버튼을 만들어보겠습니다. 구현 코드 방법 1 HTML CSS /* toggle */ label { height: 30px; width: 60px; border-radius: 30px; } input { display: none; } input:checked + span { background-color: gray; } input:checked + span::before { left: 30px; } .toggle-circle { height: 100%; width: 100%; display: block; border-radius: 30px; transition: 0.4s ease; border: 1px solid black; position: relative; } .toggle-c.. CSS 컴포넌트 - 카운트다운 CSS animation을 활용해서 카운트다운을 구현해 보겠습니다. 구현 코드 HTML 카운터로 표시될 만큼의 숫자를 추가합니다. 1 2 3 Go CSS 애니메이션에서 delay를 통해 순차적으로 작동하도록 구현합니다. /* count */ .count { height: 50px; width: 50px; position: relative; margin: auto; overflow: hidden; } .count .num { height: 40px; position: absolute; bottom: -5px; left: 50%; transform-origin: bottom; transform: translateX(-50%) rotate(180deg); font-size: 1.5rem; } .count .n.. 이전 1 다음
