CSS

CSS를 표현 하는 방법은 내부, 외부, @import, 인라인이 있다.

이미사용 2023. 2. 20. 15:18
명언
-
728x90
반응형

내부 스타일시트

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

p { color: red;}는 글자색상을 빨간색으로 설정 하라는뜻
결과

외부 스타일시트

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

내부 스타일시트는 그 스타일이 기술된 페이지만 적용 하지만, 외부 스타일시트는 그 스타일을 선언한 모든 HTML에 적용됩니다.

HTML에 .css파일의 글자색을 따르도록 <link>를 이용하였다.
style.css파일
결과

@import

CSS안으로 다른 CSS 파일을 불러들일 경우 사용합니다.

style.css파일
결과

또한 어떤CSS 파일 안에 공통 CSS를 불러들일 경우에도 사용합니다.

common.css의 css를 불러 사용한다.

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

그러나 CSS 파일을 너무 여러 개로 분리하면 오히려 복잡 해져서 유지 보수가 힘들어 지니 용량이 적다면 하나의 파일로 저장하는 것이 좋습니다.

 

 

인라인 스타일(inline style)

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

내부 스타일이나 외부 스타일에서 기술된 속성 보다 우선 으로 적용 되므로 우선순위가 절대 적으로 높아야 할 경우 사용할 수있으나,

스타일을 공통CSS로 수정할 수 없고 일일이 html을 열어서 편집해야하는 불편함이 있습니다.

결과