① 스타일 시트를 적용하는 방법은 세 가지가 있다.
㉠ 한 개의 요소에 고유한 스타일이 있을 경우 인라인 스타일시트(Inline CSS)를 사용할 수 있다.
ⓐ 인라인 스타일시트를 사용하기 위해 관련 요소에 스타일 속성을 추가하면 된다.
<!DOCTYPE html>
<html>
<body>
<p style ="font-weight: 700;">짧고 굵은</p>
</body>
</html>
㉡ 한 개의 HTML 페이지에 고유한 스타일이 있을 경우 내부 스타일시트(Internal CSS)를 사용할 수 있다.
ⓐ 내부 스타일시트를 사용하기 위해 해드 <head>요소 내부에 <style>요소를 추가하면 된다.
<!DOCTYPE html>
<html>
<head>
<style>
p {text-align: center;}
</style>
</head>
<body>
<p>가운데</p>
</body>
</html>
㉢ 외부 스타일시트(External CSS)는 웹사이트의 스타일을 하나의 파일에 저장해서 사용하는 방법이다.
ⓐ 각 HTML 페이지의<head>요소 내부에 <link> 요소를 이용해 외부 스타일시트의 참조가 포함되게 해야한다.
ⓑ 오직 하나의 외부 스타일시트 파일을 이용해 웹사이트의 외형을 바꿀 수 있다.
ⓒ 외부 스타일시트는 .css 확장자로 저장해야 한다 .css 파일에는 HTML 태그가 포함되서는 안된다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>가운데가 아니라 왼쪽</p>
</body>
</html>p {
border: 2px solid powderblue;
padding: 30px;
}
② 하나 이상의 스타일이 적용 되었을 때의 우선순위는 다음과 같다.
㉠ 인라인 스타일이 우선적으로 적용된다.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: left;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p style="text-align:center">왼쪽인가 가운데인가 오른쪽인가</p>
</body>
</html>p {
text-align: right;
}
㉡ <head> 요소에서 정의되는 외부 스타일 또는 내부 스타일 시트가 그다음으로 적용된다.
ⓐ 동일한 선택자에 대해 다른 스타일시트(내부 스타일시트 또는 외부 스타일시트)에서 중복되어 정의될 경우 마지막으로 읽힌 스타일시트의 스타일이 적용된다.
ⓑ 첫 번째 코드는 외부 스타일시트가 내부 스타일시트보다 위에 있다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<style>
p{
text-align: left;
}
</style>
</head>
<body>
<p>왼쪽인가 오른쪽인가</p>
</body>
</html>p {
text-align: right;
}
ⓒ 두 번째 코드는 내부 스타일시트가 외부 스타일시트보다 위에 있다.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: left;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>왼쪽인가 오른쪽인가</p>
</body>
</html>p {
text-align: right;
}
㉢ 브라우저 기본값이 제일 마지막 순위로 적용된다.
'All about WEB > All about CSS' 카테고리의 다른 글
| 6. CSS 색(Colors) (0) | 2021.07.17 |
|---|---|
| 5. CSS 주석(Comments (0) | 2021.07.17 |
| 3. CSS 선택자(Selectors) (0) | 2021.06.30 |
| 2. CSS attribute와 property (0) | 2021.06.26 |
| 1. CSS 기초 (0) | 2021.06.26 |
