CSS 유지보수

jsleeg98·2020년 5월 23일
0

CSS

목록 보기
8/12

CSS 유지보수의 필요성

같은 CSS를 여러 페이지에 적용할 때 사용

  • 컴퓨터는 한번 다운 받은 CSS는 캐쉬를 통해 이미 저장되어있는 임시 디렉토리에서 꺼내써서 경량화가 가능하다.
  • 재사용성을 높여준다.

link

html 태그로 CSS를 로드하는 방식 (마치 html 태그처럼 사용된다.)
<link rel="stylesheet" href = "CSS파일"> 형식으로 head 태그에 추가한다.

예시
link.css

#test{
    color: red;
    font-size: 40px;
    text-align: center;
}

link.html

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="link.css">
</head>
<body>
    <div id="test">HELLO WORLD</div>    
</body>
</html>

import

CSS안에서 다른 CSS를 로드하는 방식 (CSS 코드로 해석되는 부분(style태그 or .css 파일)에서 사용된다.)
@import url("파일이름")형식으로 style태그에 추가하거나 CSS파일에 추가한다.

예시
import_1.css

@import url("link_2.css");

#test{
    color: red;
    font-size: 40px;
    text-align: center;
}

import_2.css

body{
    background-color: powderblue;
}

import.html

<!doctype html>
<html>
<head>
    <style>
        @import url("link_1.css");
    </style>
</head>
<body>
    <div id="test">HELLO WORLD</div>    
</body>
</html>

minify 코드 경량화

사이트의 규모가 커지고 사용자가 많아지면 필요한 기술이며 비용을 감소하는데 효과가 있다.

  • clean-css online을 통해 경량화 https://html-cleaner.com/css/
  • Brackets의 확장기능 사용 - js css minifier 설치
  • node.js를 이용하여 명령어로 실행

preprocessor

CSS는 표준화 언어이기 때문에 변화에 신중하고 느리다. 그래서 새로 나온 기능을 바로 써볼 수 없다. 이때 proprocessor가 필요하다.
CSS가 제공하지 않는 문법을 사용할 수 있는 기능

  • 온라인 변환기 - https://stylus-lang.com/
  • 비교 사이트 - https://csspre.com/compile/
  • Brackets의 확장기능 사용 - stylus auto compile 설치
    • 사용방법
      • 파일이름.styl에 첫줄에 //out : 파일이름.css compress : true 입력 후 styl 문법에 맞추어 파일 작성
  • node.js를 이용하여 명령어로 실행 - 만약 에디터가 확장기능을 지원하지 않더라도 사용가능하다.

style의 문법

0개의 댓글