CSS를 설정하기 위해 필요한 4가지 방법 ?

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

css를 정의하는 방법으로는 크게 내부 스타일리스트, 외부 스타일리스트, 인라인스타일리스트, @import가 있습니다.

1) 내부 스타일리스트(Internal Style Sheet)

CSS를 HTML 문서 안에 <style> 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태이고

HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법입니다.

HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.

관리가 편하다는 것이 장점이지만 정리를 잘 해둬야지 나중에 어떤 부분에서의 스타일인지 알 수 있습니다.

통상적으로는 본문이 헤드 , 콘텐츠, 사이드바, 풋 부분으로 구별 돼 있듯 마크업도 비슷하게 구별해서 작성하는 편입니다.

2) 외부 스타일 시트(External Style Sheet)

스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다.

이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 <link> 태그를 이용하여 선언합니다.

또한 css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.

이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.

반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다. 그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.

그러나 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 합니다.

3) @import

@import는 css 안으로 다른 css파일을 불러들일 경우 사용합니다. css 맨 윗줄에 기술합니다.

또한 @import는 어떤 css 파일 안에 공통 css를 불러들일 경우에도 사용할 수 있습니다.

@import는 공통으로 들어가야 할 스타일을 따로 지정하여 다른 css에 삽입시켜 사용할 수 있도록 해줍니다.

그러나 css 파일을 너무 여러 개로 분리하면 오히려 복잡해져 유지보수하기 힘든 부분도 있으니

용량이 적다면 하나의 파일로 저장하는 것이 좋습니다.

4) 인라인 스타일(inline style)

인라인 스타일은 위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다.

스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다. 태그에 직접 css를 정의해주는 기법으로,

해당 요소에 style=" " 형식으로 기술합니다.

인라인 스타일은 내부나 외부 스타일에서 기술된 속성보다 우선으로 적용되므로 우선순위가 절대적으로 높아야할 경우에 사용할 수 있으나, 스타일을 공통 css로 수정할 수 없고 일일이 html을 열어서 편집해야 하므로

일반적으로 많이 사용하지는 않습니다.

내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼 땐 바람직하지 않으나

직관적으로 사용이 가능하다는 장점이 있어 강좌를 진행할 땐

주로 이 방법을 사용합니다.

xoouxa