CSS 표현식
selector{attribute: value;}
- selector (선택자) : 스타일 효과를 적용하는 대상
- attribute (속성) : 해당 선택자에 적용할 스타일 효과 이름
- value (값) : 해당 선택자에 적용할 스타일 효과 값
CSS 적용 방법
1. 인라인 스타일
2. 내부 스타일시트
3. 외부 스타일시트
1. 인라인 스타일 : HTML 태그에 기술
HTML 태그의 style 속성을 이용한다.
<p style=“margin: 15px;”>
<div style='color: red;'>this is red text.</div>
2. 내부 스타일시트 : HTML 문서 내부에 기술
HTML 문서 <head> 태그 내부에 <style> 태그를 기술한다.
<html>
<head>
<style type="text/css">
p{
margin: 15px;
}
</style>
</head>
<body>
<p>
I like CSS.
</p>
</body>
</html>
<html>
<head>
<style type="text/css">
.my-text{
color: blue
}
</style>
</head>
<body>
<div class="my-text">
this is red blue
</div>
</body>
</html>
3. 외부 스타일시트 : HTML 문서 외부로 연결
HTML 문서 외부로 .css 파일로 분리하여 이를 HTML 문서에 연결한다.
- HTML 문서 <head> 태그 안에 <link>를 사용하여 외부 스타일시트를 참조한다.
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“./css/default.css”>
</head>
<body>
</body>
</html>
- HTML 문서 <head> 태그 안에 @import를 사용하여 외부 스타일시트를 참조한다.
<html>
<head>
<style type=“text/css”>
@import url("./css/default.css”);
</style>
</head>
<body>
</body>
</html>
CSS 적용 우선순위
- 기본적으로 뒤에 나올수록 우선순위가 높다.
- 즉 컴퓨터가 위에서 아래로 읽으면서 내려오기 때문에 뒤에 나오는 CSS가 나중에 적용되어 우선순위가 높다고 볼 수 있다.
- 인라인 스타일 > 내부 스타일시트 > 외부 스타일시트
- 즉 외부 스타일시트를 가장 먼저 적용하고, 그러고 나서 내부 스타일시트를 적용한 다음, 마지막으로 인라인 스타일을 적용하기 때문에 인라인 스타일, 내부 스타일시트, 외부 스타일시트 순으로 CSS가 우선적으로 적용되는 것처럼 보인다.
'HTML&CSS' 카테고리의 다른 글
| [CSS] 목록 관련 속성 :: list-style-type, list-style-image, list-style-position, list-style (0) | 2020.05.03 |
|---|---|
| [CSS] 선택자 (0) | 2020.04.19 |