css 정의와 3가지 적용방식 및 사용법

CSS 정의는 Cascading Style Shees 의 약어로 마크업 언어가 실제 표현되는 방법을 정의한 언어입니다.

html에서는 레이아웃, 스타일등을 정의할때 사용하며 기본정의는 css 파일로 모두 정의해 왼만한 기본 설정은 모든 페이지에 일괄로 스타일을 적용시켜 많이 사용합니다.

퍼블리싱할때 html문과 소스코드를 분리하는데 CSS는 html문안에 표현하는 데이터와 디자인 분리를 용이하게 해줍니다. 하지만 지금은 거의 스타일시트는 기능별 형식별로 분류하여 각각의 파일을 분류해서 쓰는게 정석입니다.

그럼 css에서 가장기본적으로 본다면 어떤형식에 표현들이 있는지에 대해 알아보도록 하겠습니다.

[css 3가지 적용방식 및 사용법]

inline 방식 (inline style sheet)

1
<h1 style="color:blue;margin-left:30px;">타이틀</h1>
cs

html 태그에 style="속성1:값;속성2:값;" 형식으로 지정하는 방식으로 간혹 독립적인 html 태그에 한두개 쓰는건 이해해도 실제로 권장하지 않습니다.

이걸 남발하면 데이터에 디자인 관련 값들이 많아 보이기도 하고 향후 스타일 변경 시 모든 페이지에 들어가 일일이 변경시켜줘야 하는 어려움이 있습니다. 그래서 테스트할때만 가끔 사용해서 적용해 보시기 바랍니다.

사용예로는 <h1 style="color:blue;margin-left:30px;">타이틀</h1> 참고하시면 됩니다.

임베디드 방식 (internal style sheet)

1
2
3
4
5
6
<style>
p {
    color: red;
    text-align: center;
} 
</style>
cs

html 파일에서 스타일정의를 이런 <style>정의</style> 형태로 미리 지정해서 쓰는 방법입니다.

해당 스타일의 적용 엘리먼트를 찾기 위해 css 셀렉터를 사용하며 inline 방식보다는 유지보수가 아주 쉬워집니다.

그리고 style 블럭이 별도로 있어 코드 가독성을 높입니다. 하지만 이것도 전체적인 사이트 스타일 변경시 모든 페이지에 들어가서 일일이 바꿔줘야 한다는 단점이 있죠.

css 파일 링크 방식 (external style sheet)

html 파일

-----------

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Colored by Color Scripter
cs

mystyle.css

-------------

1
2
3
4
5
6
7
<style>
body { background-color: lightblue;}
h1 {
    color: navy;
    margin-left: 20px;
}
</style>
cs

디자인과 데이터가 완전 분리된 방식으로 css 파일을 만들어 각 페이지에서 해당 css 파일을 로드할때 같이 읽어 표현합니다.

스타일이 하나의 파일로 관리되므로 유지보수 쉽고 가독성이 뛰어납니다.

권장하는 방식이자 많이들 선호하는 방식인데 전체 페이지를 잘 구조화해서 재사용이 가능한 sytle 고려를 해야 하니

머리와 신경을 좀 더 쓰셔야 합니다.

케스케이드 순서 (Cascading)

HTML 요소에 대해 하나 이상의 스타일이 지정되면 어떤 스타일이 사용됩니까? 하면서 질문을 한다.

일반적으로 말하자면, 모든 스타일은 다음 규칙에 따라 새로운 "가상(virtual)"스타일 시트로 "virtual(계단식)"될 것입니다. 여기서 번호 1은 가장 높은 우선 순위를가집니다.

따라서 인라인 스타일이 가장 우선 순위가 높습니다. 즉, <head> 태그 내부 또는 외부 스타일 시트 또는 브라우저 기본값에 정의 된 스타일보다 우선합니다.

미래디자인 life