css 작성법 (expanded, compact, nested, compressed)

CSS(카스케이딩 스타일 시트)는 HTML 요소들의 스타일을 정의하고 적용하는 데 사용되는 스타일 시트 언어입니다. 여러 가지 작성 방법이 있습니다. CSS 는 아래와 같이 네가지의 작성법이 있습니다.

Expanded

Expanded 방법은 각각의 스타일 규칙을 개별적으로 작성하는 방법입니다. 각 스타일 규칙은 하나의 라인에 작성되며, 속성은 콜론(:)으로 구분됩니다. 또한 각 스타일 규칙은 세미콜론(;)으로 끝나야 합니다.

장점: 가독성이 좋아 유지보수가 쉽고 코드를 이해하기 쉽습니다.
단점: 코드 양이 많아 파일 크기가 크며, 로딩 속도가 느려질 수 있습니다.

.container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}

Compact

Compact 방법은 Expanded 방법과 유사하지만, 중괄호({})를 생략하고 각 스타일 규칙을 한 줄에 작성하는 방법입니다.

장점: 파일 크기가 작아 로딩 속도가 빠르며, 가독성이 좋아집니다.
단점: 여러 속성이 한 줄에 작성되어 가독성이 떨어질 수 있습니다.

.container { width: 100%; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border: 1px solid #ccc; }

Nested

Nested 방법은 선택자들을 중첩시켜 작성하는 방법입니다. 이 방법은 HTML 요소들의 계층 구조와 비슷한 구조로 작성됩니다.

장점: 가독성이 좋아 유지보수가 쉽고 코드 중복을 방지할 수 있습니다.
단점: 중첩된 선택자가 많을수록 파일 크기가 커지며, 로딩 속도가 느려질 수 있습니다.

.container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  .heading {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
  .paragraph {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
  }
}

Compressed (minify)

Compressed 방법은 CSS 파일의 크기를 최소화하는 방법입니다. 줄바꿈, 공백, 주석 등을 모두 제거하여 파일 크기를 줄입니다.

장점: 파일 크기가 매우 작아 로딩 속도가 빠르며, 전송 데이터 양을 최소화하여 서버 부하를 줄일 수 있습니다.
단점: 가독성이 매우 떨어져 유지보수가 어렵고, 수정이 필요한 경우 실수를 할 가능성이 높습니다.

.container{width:100%;margin:0 auto;padding:20px;background-color:#f2f2f2;border:1px solid #ccc}.heading{font-size:24px;font-weight:bold;color:#333}.paragraph{font-size:16px;line-height:1.5;color:#666}

CSS 파일의 크기가 클수록 웹페이지의 로딩 시간이 늘어나기 때문에, SEO와 성능을 위해 CSS 파일의 용량을 줄이는 것이 중요합니다.

CSS 파일을 압축해주는 사이트 (코드 경량화)

CSS Minifier: https://cssminifier.com/
CSS Compressor: https://csscompressor.com/

종합적으로, 각각의 CSS 작성 방법에는 장단점이 있습니다. Expanded CSS와 Nested CSS는 가독성이 좋아 유지보수가 쉬우며, Compact CSS와 Compressed CSS는 파일 크기가 작아 로딩 속도가 빠릅니다. 하지만 Compact CSS와 Compressed CSS는 가독성이 떨어져 유지보수가 어려울 수 있습니다. 따라서, 프로젝트의 목적과 상황에 따라 적절한 CSS 작성 방법을 선택하는 것이 중요합니다.

저작자표시 (새창열림)

iroiro