Journal of the Korea Society of Computer and Information (한국컴퓨터정보학회논문지)

Korean Society of Computer Information (한국컴퓨터정보학회)
권호 표지
DOI QR코드

DOI QR Code

An Optimization Technique to Improve Readability of CSS

CSS 가독성 향상을 위한 최적화기법

  • 정우성 (서울대학교 공과대학 컴퓨터공학부) ;
  • 이은주 (경북대학교 IT대학 컴퓨터학부)
  • Received : 2010.04.30
  • Accepted : 2010.05.30
  • Published : 2010.07.31
Download PDF
⟨ Previous Next ⟩

Abstract

For effective maintenance for web applications, it is necessary to improve the readability of the source pages. Though CSS(Cascading Style Sheet) belongs to pure presentation layer in various web constituent entities, CSS codes are often used by inlning and they are sometimes automatically generated by web development tools. The existing studies on CSS optimization have only focused on reducing the size of codes and they did not incorporate the readability or the reusability. In this paper, CSS codes are structured and several criteria for readability are defined to improve the readabilty and reusability. Based on them, the algorithm to improve the readability are proposed. Finally, case study are presented to show the applicability of the proposed algorithm.

웹 어플리케이션의 원활한 유지보수를 위하여 소스 페이지의 가독성 향상은 필수적이다. CSS는 웹 페이지의 구성 요소 중에서 순수한 표현계층이지만 인라인 형태로 삽입되는 경우가 많고, 웹 개발도구에 의해 자동생성되기도 하는데, 이들은 전체 코드의 가독성과 UI 계층의 재사용성이 떨어지게 된다. 기존의 CSS 최적화 연구는 주로 사이즈 압축을 다루고 있어 재사용성이나 가독성에 초점을 맞추고 있지 않다. 본 논문에서는 CSS 가독성 및 재사용성 향상을 위하여 CSS 코드를 구조화하고, 가독성 향상을 위한 기준을 정의하였다. 이들을 기반으로 최종적으로 CSS 코드의 가독성을 높이는 알고리즘을 제안하고, 예제 및 실험을 통하여 본 접근법의 유용성을 보인다.

Keywords

References

  1. 오성균, 김미진, "웹 어플리케이션의 복잡도 예측에 관한 연구," 한국컴퓨터정보학회 논문지, 제 9권, 제 3호, 27-34쪽, 2004년 9월.
  2. J. Korpela, "Lurching toward Babel: HTML, CSS and XML," IEEE Computer, Vol. 31, No. 7, pp. 103-104, 106, 1998. https://doi.org/10.1109/2.689682
  3. http://www.w3.org/Style/CSS/
  4. M. Keller and M. Nussabaumer, "Cascading style sheets: a novel approach towards productive styling with today's standards," in Proc. of the International Conference on World Wide Web, pp. 1161-1162, 2005.
  5. CSS Optimizer, http://www.cssoptimiser.com/
  6. PCSS Compressor, http://iceyboard.no-ip.org/projects/css_compressor
  7. Optimiser, http://flumpcakes.co.uk/css/optimiser/
  8. CleanCss, http://www.cleancss.com/
  9. S. R. Schach, "Object-Oriented and Classical Software Engineering," 5th ed., WCB/McGraw-Hill, 2002.
  10. 이은주, 박근덕, "웹 어플리케이션 재구조화를 위한 클러스터링에 사용되는 결합도 메트릭," 한국컴퓨터정보학회논문지, 제 12권, 제 3호, 75-84쪽, 2007년 7월.
  11. B. Lee, E. Lee, and C. Wu, "Genetic Algorithm Based Restructuring of Web Applications Using Web Page Relationships and Metrics," Lecture Notes in Computer Science, Sprinter-Verlag, Vol. 4113, pp. 697-702, 2006.
  12. CSS_Architecture_Overview, http:/ /www.netfxharmonics.com/ 2007/ 05/CSSArchitecture-Overview
  13. E. A. Meyer, "Cascading Style Sheets: The Definitive Guide," O'Reilly Media, 2000.