스마트웹앱콘텐츠전문가/직장

웹페이지에서 css 적용하는 방법들

9D4U 2018. 5. 23. 15:14
728x90
반응형

웹페이지 상에서 즉, HTML파일에서

CSS를 적용시키는 방법은 


- 외부 스타일 시트

- 내부 스타일 시트

- 태그내에 직접(inline) 스타일 지정


이렇게 3가지가 있다.


1. 외부 스타일 시트

 외부의 스타일 시트 파일(.css)을 HTML파일에 연결하여 사용하는 방법

 ex) <head>

<link rel="stylesheet" type="text/css" href="외부 스타일 시트 파일 경로">

      </head>



2. 내부 스타일 시트

 HTML 파일 상의 head 안에서 직접 스타일을 정의하는 방법

 ex) <head>

<style type="text/css">

 body{background-color : white;}

</style>

</head>

3. 태그 내에 직접 스타일 지정

 ex) <div style="background-color : white;"></div>




cf. css 적용시키는 방법들의 범위 비교

외부 스타일(스타일 시트 파일을 연결한 파일 내에서만)> 내부 스타일(해당 html파일내에서만) > 태그 내에 직접 스타일 지정(해당 태그만)



cf. css 적용 우선 순위


높음

1. 속성값 뒤에 !important 를 붙인 것.

2. 태그에 직접적(inline)으로 스타일 속성을 지정한 것.

3. 선택자를 ID로 사용한 것(#)

4. 선택자를 CLASS로 사용한 것(.)

5. 선택자를 태그이름으로 지정한 것

낮음

728x90