CSS(Cascading Style Sheet)는 HTML과 함께 웹페이지를 구성하는 기본 프로그래밍 요소로서 웹페이지를 꾸미기 위해 작성하는 코드를 말합니다. HTML 요소를 더욱 돋보이게 꾸미기 위해 용도와 웹페이지의 통일성을 갖추기 위한 디자인 작업에 활용됩니다.
CSS를 적용하는 방식에는 크게 인라인 방식, 임베디드 방식, 외부 css 파일 링크 방식 이렇게 3가지의 방식이 있습니다.
이번 글에서는 CSS(Cascading Style Sheet)를 적용하는 3가지 방식에 대한 설명과 각 방식의 사용 방법 및 장단점에 대해 알아보겠습니다.
인라인 방식(Inline styles)
HTML 태그 내에 직접 스타일을 지정하는 방식으로 해당 태그에만 스타일이 적용되는 방식 입니다.
향후 Style을 변경할 경우 태그를 일일이 찾아 변경해 주어야 합니다. 유지보수의 어려움으로 바람직한 적용 방식은 아닙니다.
페이지에 태그가 많지 않거나 향후 변경될 일이 거의 없고, 사이트의 통일성을 갖지 않아도 되는 웹 사이트라면 간단하게 사용할 수 있는 방식 입니다.
<형식>
<p style=”color: red;”>안녕하세요. 감사합니다.</p>
임베디드 방식(Embedded style)
내부 스타일 시트(Internal style sheet)라고도 하며, HTML 문서 내의 <head>와 </head> 사이에 <style> ~ </style> 형식으로 정의해서 스타일을 적용하는 방식 입니다.
한 문서 내에서만 스타일이 적용 됩니다. 따라서 각 html 문서마다 스타일을 정의해 주어야 합니다.
웹 페이지마다 스타일이 서로 독립적이거나 페이지 수가 많지 않을 때 사용할 수 있는 방식 입니다.
<형식>
<head>
<style type=”text/css”>
p {
color: red;
}
</style>
</head>
이렇게 선언해 주면 해당 html 문서의 모든 P 태그에 스타일이 적용 됩니다.
외부 Style Sheet 파일 링크 방식
외부 스타일 시트(External style sheet)라고도 하며, css라는 확장자를 가진 스타일 시트 파일을 HTML 문서에서 Link해서 사용하는 방식 입니다.
스타일 시트 파일만 수정하면 웹사이트 전체의 스타일이 수정된 것으로 적용되므로 유지보스에 대한 효율성 극대화 및 홈페이지의 일관성 있는 스타일을 구현할 수 있습니다.
단점은 웹사이트의 모든 HTML 문서에 대한 스타일을 스타일 시트 파일에서 관리해주어야 하므로 지나치게 복잡해질 수 있습니다. 스타일을 사용하기 쉽도록 몇 개의 css 파일로 분리하는 등의 관리 노하우가 필요하기도 합니다.
<형식>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
Html문서에 적용한 style.css 스타일 시트 파일은 미리 만들어 놓아야 합니다.
※ 함께 읽으면 도움이 될 만한 다른 포스팅 글입니다.
이 글이 도움이 되었기를 바랍니다. ^-^