CSS 표현 방법(4가지 방법)

CSS 표현 방법

CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, @import, 인라인 스타일시트 등이 있습니다.
실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다.  

 

1. 내부 스타일시트

내부 스타일시트는 CSS를 HTML 문서 안에 <style></style> 태그로 기재하여 HTML 문서 안에 CSS가 함꼐 저장되도록 하는 형태입니다. 그 스타일이 기술된 페이지에만 적용

 

내부 스타일시트 예시

 

내부 스타일시트 결과

 

 

2. 외부 스타일시트

 

외부 스타일시트는 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 <link> 태그를 이용하여 선언합니다.

그 스타일을 선언한 모든 HTML 페이지에 적용

 

외부 스타일시트 예시

 

외부 스타일시트 style.css 예시

 

외부 스타일시트 결과

 

3. @import

 

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

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

 

@import 예시

 

@import style.css 예시

 

@import 결과

4. 인라인 스타일시트

 

인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" " 형식으로 기술합니다.

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

 

인라인 스타일시트 예시

 

인라인 스타일시트 결과