CSS사용 방식의 특징들..

웹 기반 프로그래밍을 하다보면, 프로그래머라고 해서 피해 갈 수 없는 부분이 CSS 부분입니다. 프로그래머라고 디자인 부분을 무시하고 가선 안되겠죠. 처음 제가 웹 프로그래밍 (정확하게는 HTML 기반의 SNG)의 개발을 접하게 되면서, 좀 당혹스러워 했던 부분이 HTML 자체와 CSS 였습니다.

이녀석들 자체가 생소한 것도 있지만... 프로그래머가 프로그램 내부적인 작동 말고 외형 적으로 보이는 디자인 구조라던지.... HTML의 정보 양식이라던지.. 많이 생소 했습니다.(물론.. 처음 받은 정보들이 생각보다 아름답지 못한 정보들이 였다는 것을 나중에 알게 알게 되긴 했습니다만...)

 그런데 보다 보면 볼 수록 이 웹 프로그래밍 분야 참 매력 있더군요. 정말 제대로 무엇인가 장작 적인 것을 만들려면 엄청나게 신경을 많이 써야 하는 분야 같습니다. 그래서 그런지.. 잘한다 못한다의 갭이 상당히 차이 나고... 같은 기능이지만 성능이 엄청나게 차이나는 경우도 많더군요.

같은 스크립트, 같은 CSS도 어떤 방식으로 적용하냐에 따라 이래저래, 많이 다른 것 같아. CSS의 사용방식에 따른 특징들을 정리 해볼까 합니다.

웹 어플리케이션 상에서 CSS의 사용방법, 링크,임베디드,인라인!
웹 어플리케이션에서 CSS를 적용하는 방법은 이렇게 세가지가 있습니다. 이 3가지 방법중 도서등을 살펴보면 링크 방식으로 사용하는 것이 가장 바람직 하다고 이야기 합니다. 제가 작업을 하면서 경험 해 본 경우도 특별한 경우가 아니라면 '링크' 방식을 사용하여 적용 하는 것이 코드의 재사용성이나 유지보수에 유리 한 것 같습니다. 그럼 각기 방법의 특징과 사용 법들을 한번 살펴보죠

1. 링크
 링크는 CSS를 별도의 파일로 만든후 HTML의 link 테그를 이용하여 CSS를 적용하는 방식입니다. 링크는 성능이 좋고, 브라우저에서 페이지를 처음 로드 할때 링크된 CSS를 읽어 오는데, 처음 캐싱한 CSS는 여러 웹페이지에 공유하기 때문에 성능 개선이 됩니다. 개발을 할때 공유될 CSS 요소가 무엇인지 고민하고 적용하면 더욱 효율적으로 만들 수 있습니다.

 링크 테그: <link href="경로" type="text/css" rel="stylesheet"/>

link 테그를 이용해서 불러올때 media 옵션을 이용하여 출력용 화면, 스크린 화면을 다르게 설정 할 수 도 있습니다. 브라우저의 크기? 에따라 사이즈에 따라 다른 스타일 시트를 링크 할 수도 있습니다
(media query 라는 기법이 있더군요.. 아직 저도 사용은 못해봤습니다.)
링크를 걸어서 개발을 하게 되면 브라우저 캐시에 내용이 저장되므로, 변경사항이 바로 확인이 안될 가능성이 있습니다. 그럴 경우에는 브라우저 방문 기록을 삭제 하거나, 링크를 설정한 CSS 파일명에 버전 번호로 구분하여 링크 걸면 캐시가 갱신 됩니다.

2. 임베디드
임베디드는 웹페이지 블록에 style 블록을 선언하여 직접 넣는 방법입니다. 임베디드 방식에서도 media 형식을 지정 할 수 있습니다. 링크 테그를 이용하는 경우와 크게 차이없는 기능을 사용할 수 있지만, html을 읽을 때 마다 새롭게 받아 갱신하므로 속도가 느려질 수 있습니다.

3. 인라인
 인라은인 html의 테그에 style="" 형식으로 추가하는 방식인데, 저는 이 방식을 추천 하지 않습니다.
이 형태의 방식은 매우 신중이 사용해야 하는데요. 유지보수가 어렵고, 여러가지 브라우저에 대응 하기도 쉽지가 않습니다. (저만 그런건지....) 꼭 필요한 부분에만 사용하시면 되겠습니다.