본문 바로가기

분류 전체보기

 (135)
Vue 템플릿 튜토리얼 - Interpolation 및 Directives Vue 구성 요소 의 섹션에서 HTML을 작성하고 Vue 관련 템플릿 기능을 사용할 수 있습니다.두 가지 범주로 분류 된 이러한 기능을 살펴 보겠습니다.Vue InterpolationsVue 지시어Vue InterpolationsVue Interpolations의 가장 기본적인 형태는 텍스트 Interpolations 입니다. 이는 단순히 구성 요소 로직 내에 정의 된 문자열을 표시하는 프로세스입니다.이 과정에서 우리가 작업해온 프로젝트에서이 작업을 시도하려면 /src/components/Skills.vue 파일을 열고 소품 내에 속성을 정의하십시오 . export default { name: 'Skills', data() { return { name: 'Coursetro' } } } 여기서는 name ..
Vue 구성 요소 자습서 - Vue.js 응용 프로그램의 기본 구성 요소 Vue 구성 요소 구조Vue CLI를 사용하여 프로젝트를 만들었을 때 우리에게 몇 가지 구성 요소가 생성되었습니다. /src/App.vue 파일을 엽니 다 . 이 파일은 우리의 루트 구성 요소 입니다. ... ... ... 3 가지 섹션으로 구성되어 있습니다.템플릿 - 여기에 HTML이 배치됩니다. 여기에 HTML이 아닌 요소를 정의 할 수도 있지만 나중에 이해할 것입니다.스크립트 - 앱의 로직이있는 곳입니다.스타일 - 여기에 CSS가 있습니다..vue 로 끝나는이 구성 요소 파일 은 단일 파일 구성 요소 입니다. 즉, 각 vue 파일은 자체 구성 요소입니다.다른 구성 요소 가져 오기/src/App.vue 구성 요소 내에 다음과 같은 내용이 있습니다. 그리고 논리 섹션에서 : import HelloWor..
Vue 2를 설치하는 방법 - CDN, NPM 및 Vue CLI를 통해 2018 년 Vue.js가 인기를 얻고 있으며이 페이지에 착수 한 경우이 강력한 JavaScript 프레임 워크를 사용하는 방법을 배우기 시작할 가능성이 있습니다.이 튜토리얼에서 Vue.js 2를 실행하고 실행하는 방법을 정확하게 보여 드리겠습니다. Vue를 설치할 수있는 방법은 여러 가지가 있으며 모두 살펴 보겠습니다.CDN을 간단하게 참조하는 방법, NPM (노드 패키지 관리자)을 사용하여 기존 프로젝트에 통합 한 다음 Vue CLI를 사용하는 방법이 있습니다.CDN을 통해 Vue 설치Vue를 설치하는 가장 쉽고 빠른 방법은 CDN (Content Delivery Network)을 통해 Vue를 태그 에 직접 포함시키는 것 입니다. 즉, 자신의 서버에있는 Vue 대신 별도의 서버에서 배달됩니다. 기술..
HTML 및 CSS로 애니메이션 이오니아 시작 페이지를 만드는 방법 기본 HTML과 CSS 팁을 사용하여 코드를 Ionic 2와 쉽게 호환 할 수있게되었습니다. 사실 적은 수의 코드 라인으로 프로세스가 훨씬 간단 해졌습니다.프로젝트 시작하기 스플래시 페이지를 만드는 데 관심이 있다면 이미 Ionic CLI (Command Line Interface)가 설치되어 있다는 가정을 할 것입니다. 콘솔을 열고 빠른 프로젝트를 시작하십시오.> ionic start ionic-splasher tabs --v2탭 시작 템플릿을 사용할 필요가 없으며 공백이나 다른 것을 사용할 수 있습니다. 나는 페이지가 미리 채워져있어 특정 페이지를 방문 할 때마다 스플래시 페이지가로드되지 않는다는 것을 입증 할 수 있기 때문에 사용하기로했다. 일단 앱이로드되면로드하기를 원합니다. 권리!설치가 완료되면..
Angular 4 CSS Tutorial Angular는 인라인 및 외부 CSS를 모두 정의 할 수있는 기능을 제공합니다. 클래스 바인딩과 스타일 바인딩을 통해 컴포넌트 로직에서 CSS를 제어 할 수도 있습니다. 이 튜토리얼에서는 앵귤러 CSS와 관련된 다양한 문제를 살펴볼 예정이므로 시작하겠습니다! 새 프로젝트를 생성 할 때 CSS 정의하기 Angular CLI를 사용하여 Angular 프로젝트를 생성하면 기본적으로 표준 CSS와 함께 작동하도록 프로젝트가 설정됩니다.그러나 Sass 또는 SCSS를 사용하려면 --style 접두어를 다음과 같이 추가하십시오.// Starting a project with standard CSS > ng new project-name // Starting a project with Sass > ng new pr..
Bulma CSS를 기반으로 Adobe XD를 사용하여 웹 응용 프로그램 디자인 React vs Angular vs Vue.js 예제우리가 Adobe XD에서 시작하는 이유는 내가 항상 만들려는 프로젝트의 mockup / prototype을 항상 만들기 때문입니다. 이렇게하면 HTML, CSS 및 Sass를 작성할 때 추측이되지 않습니다.이 튜토리얼에서는 궁극적으로 React, Angular 및 Vue.js를 개발 관점에서 비교하는 데 도움이되는 홈 페이지와 보조 페이지 (FAQ)를 디자인 할 것입니다. 이러한 자바 스크립트 기술에 관심이 없으면 프로토 타입 작성을 위해 Adobe XD에만 관심이있는 경우이 자습서를 계속 따라 할 수 있습니다.우리는 또한 Bulma CSS 프레임 워크를 염두에두고 웹 응용 프로그램을 디자인 할 것입니다. Bulma 란 무엇입니까?Bulma 는 " F..
세로 배치, 맞춤을 위해 CSS Flexbox 사용 나는 전형적인 웹 사이트 랜딩 페이지와 비교하여 다소 독창적 인 레이아웃을 필요로하는 새로운 앱을 시작하기 위해 나 스스로를 이용했다. 이 응용 프로그램은 다양한 요소에 걸쳐 다양한 위치, 주로 수직 위치를 필요로했습니다.이 튜토리얼에서는 일반 레이아웃을 다시 만들고 CSS Flexbox에서 어떻게 작동하는지 보여줍니다.프로젝트 시작하기이 튜토리얼은 전적으로 CSS 튜토리얼이기 때문에, 불필요한 종소리와 호루라기가있는 강력한 개발 환경을 설정하는 것에 신경 쓰지는 않습니다. 대신, 우리는 단지 하나의 폴더에 2 개의 파일을 생성 할 것입니다.기본 코드 편집기를 사용하여 index.html 이라는 파일을 만들고 다음 내용을 붙여 넣습니다. CSS Flexbox Tutorial 다음으로 같은 폴더에 styl..
CSS 그리드 예제 배우기 (새로운 CSS 그리드 튜토리얼) 레이아웃 미리보기이것은 우리가 구축 할 아주 간단한 레이아웃입니다. 나는 우리가 상대적으로 쉽게 이것을 통해 바람을 피울 수 있도록 간단하게 유지했습니다. 그것은 내 허구의 자유 론자의 견해 중 일부를지지하기위한 가상의 레이아웃입니다!프로젝트 설정이 튜토리얼을 가능한 한 정확하게 숙독하기 위해 프레임 워크 또는 빌드 도구를 포함하지 않을 것입니다. 말 그대로 단일 HTML, CSS 및 이미지 파일로 작업 할 것입니다.새 프로젝트 폴더를 만들고 다음 내용 이있는 index.html 파일 과 함께 빈 index.css 파일을 추가하십시오 . CSS Grid Tutorial 또한 단일 로고 그래픽을 다운로드하십시오 (마우스 오른쪽 단추로 클릭하고 다른 이름으로 저장 한 다음 다른 2 개의 파일 옆에있는 프로젝..

티스토리툴바