웹퍼블리셔)효율적인 css 활용(style태그, 인라인 css)

css 파일은 웹페이지의 꾸미기를 담당하기 때문에 중요한 파일이다.

다만 css 작을 때는 문제가 없는데 커질수록 문제가 발생하기 시작한다.

페이지가 로드될 때 css대로 만들어야하는데 css가 다운로드 중이라 css가 적용되지 않은 상태로 나울수도 있다.

물론 옵션 설정으로 해결할수도 있지만 그렇게되면 페이지를 불러오는 속도가 느려져서 사용자의 불편함을 유발한다.

물론 이런 경우는 매우 드물다. 

 

 

.fw100{font-weight: 100 !important;}
.fw200{font-weight: 200 !important;}
.fw300{font-weight: 300 !important;}
.fw400{font-weight: 400 !important;}
.fw500{font-weight: 500 !important;}
.fw600{font-weight: 600 !important;}
.fw700{font-weight: 700 !important;}
.fw800{font-weight: 800 !important;}
.fw900{font-weight: 900 !important;}

.blue{color: #0EADFF !important;}
.green{color: #07D0BD !important;}

.margintop10{margin-top:10 !important;}
.margintop20{margin-top:20 !important;}
.margintop30{margin-top:30 !important;}

.marginbottom10{margin-bottom:10 !important;}
.marginbottom20{margin-bottom:20 !important;}
.marginbottom30{margin-bottom:30 !important;}

 

이런 식으로 자주 쓰는 스타일을 적응해두고 class를 중첩 적용할 수 있다는 점을 활용한다.

예를 들면 

<h2 class="fw200 green marginbottom30 margintop20">오랜지를 먹어본지 얼마나 오랜지</h2>

 

아래와 비교해보자.

<h2>오랜지를 먹어본지 얼마나 오랜지</h2>

h2{
	font-weight:200;
    background: #07D0BD;
    margin-top:20;
   	margin-bottom:30;
}

 

지금이야 코드가 짧아서 별로 느끼지 못하겠지만 저런 소스가 100~200개씩 쌓이면 차이는 많이 벌어질 것이다.

이렇게 하면 코드를 작성하는 노가다를 줄일 수 있다.

 

결론은 CSS 파일크기를 최대한 줄이는 것이다.

하지만 실제로 작업을 하다보면 위 예시처럼 딱 떨어지는 중복되는 작업은 별로 없다. 

결국 css는 표시해야하는데 그럼 어디다가 작성하느냐면... 인라인 css를 적극 활용하는 것이다. 아니면 해당 페이지의 style태그를 만들어서 사용하는 방법도 있다.

해당페이지에서만 쓰는 css 코드를 따로 분리한 css파일에 적는다. 원칙상으로는 맞다. css코드는 css파일에 따로 적는게 맞다.

문제는 모든 스타일들을 저장해둔 css 파일이 너무 커져서 나누다보면 다른 사람이 봤을 때 해당 소스를 찾느냐고 수고를 해야한다.   

이런 문제점때문에 페이지 내에서 style태그나 인라인css를 사용하는 것이 관리적인 측면에서 유리하다.

물론 모든 css를 인라인으로 작성하라는 얘기는 아니다. 페이지의 크기가 커지면 로딩 속도가 매우 느려지기 때문이다.

관리적인 측면에서 약간의 타협을 할 수 있다는 것일 뿐이다.