【HTML만으로 OK】class/id 필요없음의 초간편하고 경량인 CSS를 이용한다

소개



"bootstrap"으로 대표되는 CSS 프레임은 매우 편리하기 때문에 이용해 왔습니다. 평소부터 쓰러뜨리고 있어, 이미 몸에 붙었다, 라고 하는 분이면 문제 없다고 생각합니다만, 가끔 밖에 사용하지 않는 나와 같은 것에 있어서는, 지정하는 class를 조사하면서 지정해 가는 것은 조금 귀찮은 그렇다고 생각했습니다. (간단한 HTML을 만들 때 등은 특히 그렇게 생각했습니다)

class나 id를 지정하지 않아도 좋은 방법이 있다는 것을 알았으므로 시도해 보았습니다.
classless CSS framework 라고 합니다.

준비하는 것은 HTML만으로, class/id의 지정은 필요 없습니다. 어쨌든 간단하고 HTML의 head 태그에 한 줄 추가하는 것만으로 좋은 느낌을줍니다.
  • ①new.css
    htps : // 기주 b. 이 m/x·네 w. cs
  • ②mvp.css
    htps : // an dyb 될 수 r. 기주 b. 이오/mvp/

  • ①new.css



    추가할 코드



    sample.html
    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
    </head>
    

    데모 사이트
    htps // // wcs. 네 t/하지만/



    npm/yarn에도 대응하고 있다.
    npm i @exampledev/new.cssyarn add @exampledev/new.css
    또, 테마도 있어 나이트 모드나 터미널 모드가 있어, 폭속으로 변경·적용이 가능.
  • 밤 테마 적용

  • samle.html
    <head>
      <link rel="stylesheet" href="https://newcss.net/theme/night.css">
    </head>
    
  • 터미널 테마 적용

  • sample.html
    <head>
      <link rel="stylesheet" href="https://newcss.net/theme/terminal.css">
    </head>
    

    터미널 테마를 적용한 샘플 사이트는 여기



    ②mvp.css



    추가할 코드



    sample.html
    <head>
      <link rel="stylesheet" href="https://unpkg.com/mvp.css">
    </head>
    

    데모 사이트
    htps : // an dyb 될 수 r. 기주 b. 이오/mvp/



    샘플 사이트는 여기



    요약


  • classless CSS framework는, 간단한 HTML로 스타일을 정돈하고 싶은 경우, 매우 편리하다고 생각했으므로, 적극적으로 사용해 가고 싶다고 생각했습니다.



  • CSS 프레임워크를 적용하고 확인하는 것은 반응형에 대응할 수 있는지 여부라고 생각합니다. 동시에 장치를 확인하는 사이트 도구는 여기가 편리합니다. (ID 등록 등은 불필요)

    everysize

    htps : // 에ゔぇ ry하자. 키바 bs. 코m/


    참조 URL



    new.css


  • 공식 페이지
  • htps // // wcs. 네 t/
  • htps : // 기주 b. 이 m/x·네 w. cs

  • 참고
  • htps : // 코 s. 코 m / r 치 c ぇ s / 부이 ld ぇ b하고 s / 오페라 치온 / cs / c ぁ s s s s c s f s. HTML


  • mvp.css


  • 공식 페이지
  • htps : // an dyb 될 수 r. 기주 b. 이오/mvp/

  • 참고
  • htps : // 코 s. 코 m / r 치 c ぇ s / 부이 ld ぇ b하여 s / 오페라 치온 / cs s / 미니 마 스타 스타 ぇ오멘 ts-mvpcs. HTML

  • 좋은 웹페이지 즐겨찾기