본문 바로가기

개발/CSS3

 (5)
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 개의 파일 옆에있는 프로젝..
CSS Grid Positioning Tutorial 이 튜토리얼을 작성하는 시점에서 CSS 그리드는 76 %의 브라우저에서 지원되며 여기에서부터 지원이 늘어날 것입니다.CSS 그리드를 사용하면 컨텐츠를 breeze로 쉽고 빠르게 배치하고 정렬 할 수 있습니다.프로젝트 시작 및 실행우리는 엄격하게 HTML과 CSS로만 작업 할 예정이지만 최소한 라이브 브라우저 재로드와 Gulp 및 브라우저 동기화를 통합하려고합니다. 이것은 내 인생을 교사로 더 쉽게 만들 것입니다. 또한 Gulp 파일을 확장하여 sass를 허용하거나 다른 멋진 일을 수행하려면 다음과 같이 할 수 있습니다. 먼저,이 파트에 대해 Node.js가 필요합니다 ( 아직 Nodejs.org에 설치 하지 않은 경우 이를 설치하십시오 ).새 프로젝트 폴더를 만들고 그 안에 들어가십시오.> mkdir c..
CSS 활용을위한 PostCSS 자습서 PostCSS를 사용하면 타사 개발자가 만든 다양한 PostCSS 플러그인으로 CSS를 변형 할 수 있습니다 .이 플러그인은 다음과 같은 다양한 작업을 처리 할 수 ​​있습니다.향후 CSS 구문폴백CSS 언어 확장그림 물감이미지 및 글꼴그리드최적화자유롭게 수백 가지 플러그인을 사용할 수 있으므로 JavaScript 작업 러와 쉽게 통합 할 수 있으며 PostCSS를 통해 모두 사용할 수 있습니다. 프로젝트 시작하기우리는 일을 단순하게 유지하고 모든 유형의 프레임 워크 (CSS 또는 JS)를 사용하지 않을 것입니다. PostCSS와 Gulp를 설치하기 위해 Nodejs가 필요할 것입니다.Nodejs가 없으면 Nodejs.org를 방문하여 Downloads 섹션을 방문하십시오. OS에 따라 적절한 설치 프로..

티스토리툴바