웹페이지 상에서 즉, 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. 선택자를 태그이름으로 지정한 것
낮음
댓글
댓글 쓰기