css 프레임워크 사용..

2609 단어 cssbootstraptailwindcssbeginners
나는 당신이 css 프레임워크를 배워야 한다고 생각합니다. 내가 반응에 대해 고장난 데 2주를 보낸 후에 내 형제가 나에게 말한 것입니다. css 프레임워크를 검색하기 위해 휴대전화에 손을 뻗은 기억이 나는데, 내가 무엇을 보고 있는지에 대한 단서가 없었기 때문에 조금 압도당했습니다. 이로 인해 심층 분석을 하게 되었고 몇 시간, 몇 주 동안의 튜토리얼을 통해 css 프레임워크가 무엇이고 어떻게 사용할 수 있는지 확실히 더 잘 이해할 수 있었습니다.

CSS 프레임워크란 무엇입니까?



Css 프레임워크는 현재 스타일이 지정되는 페이지에 적용할 수 있는 미리 정의된 규칙 세트를 포함하는 스타일시트입니다. 올바르게 사용하면 작업을 더 쉽고 빠르고 원활하게 만들기 위해 개발자가 사용하는 도구입니다. 이러한 프레임워크의 예는 다음과 같습니다. tailwindcss, bootstrap, bulma, 구체화, 기초 등

Css 프레임워크는 다음과 같은 많은 이점을 제공합니다.
  • CSS 프레임워크는 많은 요소 선택기 규칙을 통해 페이지를 즉시 보기 좋게 만듭니다.
  • 프레임워크를 사용하면 처음부터 코딩하지 않고도 소프트웨어를 구축할 수 있습니다.
  • Css 프레임워크는 문제가 발생할 경우 참조할 수 있는 설명서 웹 사이트에 많은 예제 코드가 제공되므로 시간을 절약하는 데 도움이 됩니다. 또한 바닐라 CSS 코드 작성에 소요되는 시간을 줄여줍니다.
  • CSS 프레임워크는 대부분의 경우 코드에서 버그를 방지하는 데 도움이 됩니다.
  • Css 프레임워크는 표준 웹 디자인 패턴 및 스타일을 적용하는 데 도움이 됩니다.

    • 이러한 프레임워크에는 다음과 같은 몇 가지 단점이 있습니다.
  • 프레임워크를 사용하면 지식이 제한될 수 있습니다. 바닐라 CSS에 대한 이해 부족으로 이어질 수 있습니다.
  • 프레임워크가 제한적일 수 있습니다. 디자인에 가장 적합한 프레임워크를 선택하는 대신 프레임워크에 맞춰 디자인하는 자신을 발견할 수 있습니다.
  • 프레임워크 학습은 작업 이벤트로 볼 수 있습니다. 모든 프레임워크는 서로 다른 작성자의 것이므로 변경하기로 결정하면 구문도 처음부터 다시 배워야 합니다.
  • 고유한 스타일을 적용하는 것이 약간 어려울 수 있음

    • CSS 프레임워크 사용 방법



    모든 프레임워크는 작업에 프레임워크를 통합하는 방법에 대한 단계별 지침을 제공하는 문서 페이지와 함께 제공됩니다. 경우에 따라 cdn 링크를 통해 이러한 프레임워크를 html 페이지에 추가할 수 있습니다.
    예를 들어 부트스트랩을 다음과 같이 html 페이지에 추가할 수 있습니다.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>


    npm 패키지를 통해 프레임워크를 추가할 수도 있습니다.

    npm install [email protected]


    다음은 디자인에 프레임워크를 추가하는 가장 쉬운 두 가지 방법입니다.

    프레임워크는 학습 과정을 가속화하고 아름답고 깔끔한 웹 사이트를 구축하는 데 도움이 될 수 있습니다. 반드시 하나를 사용하는 것이 좋지만 준비가 되었을 때만 배우십시오.
    접착제 – Athena 사용자 지정 출력 고정 파일 수
    RSpec에서 반비밀 `within` 매처 사용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage