css (3) 썸네일형 리스트형 Vue 구성 요소 자습서 - Vue.js 응용 프로그램의 기본 구성 요소 Vue 구성 요소 구조Vue CLI를 사용하여 프로젝트를 만들었을 때 우리에게 몇 가지 구성 요소가 생성되었습니다. /src/App.vue 파일을 엽니 다 . 이 파일은 우리의 루트 구성 요소 입니다. ... ... ... 3 가지 섹션으로 구성되어 있습니다.템플릿 - 여기에 HTML이 배치됩니다. 여기에 HTML이 아닌 요소를 정의 할 수도 있지만 나중에 이해할 것입니다.스크립트 - 앱의 로직이있는 곳입니다.스타일 - 여기에 CSS가 있습니다..vue 로 끝나는이 구성 요소 파일 은 단일 파일 구성 요소 입니다. 즉, 각 vue 파일은 자체 구성 요소입니다.다른 구성 요소 가져 오기/src/App.vue 구성 요소 내에 다음과 같은 내용이 있습니다. 그리고 논리 섹션에서 : import HelloWor.. 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.. 프론트엔드 가이드 라인 (Frontend-guidelines) - CSS 편 CSS세미콜론(Semicolons) 세미콜론은 기술적으로 CSS의 구분 기호로 항상 마지막에 처리한다. / * bad * / div { color : red } / * good * / div { color : red ; } 박스모델(Box model)Box model은 전체 문서에 대해 이상적으로 동일해야합니다. 전역 * { box-sizing: border-box; }은 괜찮지만 특정 요소에 대한 기본 상자 모델을 변경하면 안된다. /* bad */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* good */ div { padding: 10px; } 흐름(Flow)element의 기본 동작을 변경하면 X. 가능한 한 자연스러운 문서 흐름.. 이전 1 다음