집 >웹 프론트엔드 >CSS 튜토리얼 >Ruby on Rails - 프레임워크 CSS Classless 또는 Classlight의 프론트엔드 빠른 속도

Ruby on Rails - 프레임워크 CSS Classless 또는 Classlight의 프론트엔드 빠른 속도

Barbara Streisand원래의: 2024-12-16 19:07:15307검색

Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight

새 Rails 애플리케이션 시작

rails 명령 이전 시간은 명령 실행이 끝날 때 실행 시간을 표시하는 데 사용됩니다. 아래 예에서는 47초가 걸렸습니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

VSCode 또는 선호하는 편집기를 사용하여 프로젝트를 엽니다.

$ cd classless-css && code .

Rails 표준 마스터 레이아웃 알아보기 app/views/layouts/application.html.erb.

CoC(Convention over Configuration)에 따라 Rails는 application.html.erb를 마스터 레이아웃으로 사용하여 모든 페이지를 렌더링합니다.
Rails 8.0.0의 원본 파일에는 아래 복사된 파일과 동일하거나 유사한 내용이 있어야 합니다.


  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

… 페이지가 올바르게 렌더링되고 작동하는 데 중요한 구조적 요소가 있습니다. 헤드 태그는 페이지 동작(자바스크립트 사용), 모양(CSS 사용), 다른 시스템 및 서비스와의 관계, CSRF 및 CSP 보호와 같은 보안 설정을 구성하는 데 도움이 되는 중요한 메타데이터 및 리소스를 포함하는 데 사용됩니다.
페이지의 주요 콘텐츠는 , ERB 태그를 통해 . 이 태그는 Rails가 동적으로 렌더링한 뷰의 콘텐츠를 포함하는 통합 지점 역할을 합니다.

컨트롤러 페이지와 html_test_1, html_test_2, html_test_3 및 html_test_4 작업을 사용하여 테스트 페이지 생성

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

위의 컨트롤러 및 작업을 생성하는 동안 경로도 추가되어 링크에서 생성된 모든 작업에 액세스할 수 있습니다.
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

VSCode에서 config/routes.rb 파일을 엽니다.

페이지 루트를 이전에 생성된 컨트롤러 페이지와 html_test_1 작업으로 연결하려면 파일 끝에 아래 줄을 포함하세요. 따라서 웹 사이트나 시스템에 액세스할 때 표시되는 첫 번째 페이지는 컨트롤러 페이지의 html_test_1 페이지가 됩니다. 그렇지 않으면 기본 레일 페이지가 표시됩니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

컨트롤러를 생성할 때 --skip-routes 매개변수를 전달했다면 생성된 작업에 경로 추가를 무시했을 수 있습니다. 전체 명령은 다음과 같습니다. 레일스 g 컨트롤러 페이지 html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Rails 경로 표시

터미널을 사용하면 예를 들어 컨트롤러 페이지에서 컨트롤러를 지정하여(-c 사용) 경로를 표시할 수 있습니다

$ cd classless-css && code .

또는 다음을 사용하여 모든 경로를 표시할 수도 있습니다


  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

http://127.0.0.1:3000/rails/info/routes 주소를 사용하여 브라우저를 통해 경로에 액세스하는 것도 가능합니다. bin/dev를 사용하여 개발 서버를 시작하거나 프로젝트 루트 디렉터리에서 레일 서버를 사용하여 표준 레일 서버를 시작하는 것을 잊지 마십시오. 개발 서버는 사용자가 사용할 수 있도록 필요한 처리를 수행하기 위해 javascript 파일 및 CSS 파일의 변경 사항을 "수신"합니다. 이러한 파일을 변경하고 브라우저에서 즉시 확인하려면 Rails Livre Reload와 같은 gem을 설치해야 합니다.

CSS 스타일을 테스트하기 위해 HTML 콘텐츠가 포함된 4개의 페이지를 만들어 보겠습니다.

html_test_1 작업에 대한 페이지 콘텐츠 삽입

https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html 링크에 접속하여 아래와 같이 기본 태그의 모든 내용을 복사하세요

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

Rails 서버를 시작하고 Ugly Pure HTML을 보시겠습니까?

bin/dev로 Rails 개발 서버를 시작하거나 Rails 서버로 표준 서버를 시작하고 127.0.0.1:3000에서 브라우저를 엽니다.

root "pages#html_test_1"

페이지를 열면 상단에 이전에 생성한 html_test_1, html_test_2, html_test_3 및 html_test_4 페이지에 추가한 4개의 링크가 표시됩니다.
지금까지 일이 너무 많았습니다. 각각을 열면 HTML이 아직 CSS로 스타일이 지정되지 않았음을 알 수 있습니다. 다음 작업을 수행하겠습니다.

CDN을 통해 클래스 없는 CSS 스타일을 포함하려면 app/views/layouts/application.html.erb 페이지를 다시 엽니다.

아래 내용 이후

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

앞에 다음 내용을 붙여넣으세요. 이러한 스타일이 모두 필요한 것은 아니며 다양한 옵션을 테스트할 수 있도록 삽입되었습니다.

$ cd classless-css && code .

Normalize CSS 및 Pico CSS를 제외한 대부분의 스타일은 주석 처리되어 있습니다.
파일을 저장하고 페이지를 새로 고치거나 서버를 다시 시작하세요.

이제 예, 스타일이 포함된 HTML이요?

위 스타일시트를 저장한 후

다크 모드

일부 스타일에는 어두운 모드 옵션이 있습니다. 확인하려면 개인화 옵션에서 컴퓨터 테마를 변경하세요

다음 단계

선호도에 따라 스타일을 구성하세요.
프런트엔드에 좀 더 시간을 보내고 싶다면 좋아하는 스타일에 대한 사용자 정의 옵션을 확인하세요.
Rails Live Reload를 사용하여 브라우저에서 프로젝트 변경 사항을 동적으로 업데이트합니다.
CDN을 사용하지 않고 프로젝트 CSS 파일의 스타일을 사용합니다.
Tailwind를 사용하여 클래스 없는 CSS 프레임워크의 기능을 복제합니다.

참고자료

테스트

위 내용은 Ruby on Rails - 프레임워크 CSS Classless 또는 Classlight의 프론트엔드 빠른 속도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript ruby ruby on rails css html csrf github vscode http https

성명：

이전 기사：호버에서 이미지 소스를 어떻게 변경할 수 있나요?다음 기사：호버에서 이미지 소스를 어떻게 변경할 수 있나요?