▶ Browser가 스타일 시트를 읽을 때, 스타일 시트안에 정보에 따라 HTML 문서의 형식을 지정한다.
■ CSS을 넣는 3가지 방법
▶ 외부 CSS
▶ 내부 CSS
▶ 인라인 CSS
■ 외부 CSS
▶ 외부 스타일 시트를 사용하면 하나 파일로 전체 웹사이트의 외관을 바꿀 수 있다.
▶ 각 HTML 페이지는 <head> 섹션 안에 <link> 요소에 외부 스타일 시트 파일에 대한 참조를 포함해야 한다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_external
▶ 외부 스타일 시트는 텍스트 편집기로 작성할 수 있으며, ".css" 확장자로 저장한다.
▶ 외부 ".css" 파일은 HTML 태그를 포함되어서는 안 된다.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
※ 속성과 값 사이에 공백을 추가하지 않는다.
※ 옳은 예시 : margin-left: 20px;
※ 잘못된 예시 : margin-left: 20 px;
■ 내부 CSS
▶ 내부 스타일 시트는 하나의 HTML 페이지가 유일한 스타일을 가질 때 사용된다.
▶ 내부 스타일은 <head> 섹션 안에 <style> 요소에 정의된다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_internal
■ 인라인 CSS
▶ 인라인 스타일은 하나의 요소에 대해 고유한 스타일을 적용하기 위해 사용된다.
▶ 인라인 스타일을 사용하려면 해당 요소에 "style" 속성을 추가한다.
▶ "style" 속성은 CSS 속성을 포함할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_inline
※ 인라인 스타일은 스타일 시트의 많은 장점을 잃는다.
■ 여러 스타일 시트
▶ 다른 스타일 시트 안에 동일한 선택자에 대해 일부 속성이 정의된 경우 마지막으로 읽은 스타일 시트의 값이 사용된다.
▷ 예시 : 외부 스타일 시트
h1 {
color: navy;
}▷ 예시 : 내부 스타일 시트
h1 {
color: orange;
}<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_multiple
▶ 내부 스타일이 외부 스타일에 대한 <link> 요소 전에 정의됬다면 외부 스타일이 적용된다.
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_multiple2
■ 계단식 순서
▶ HTML 요소에 대해 지정된 스타일이 둘 이상인 경우 어떤 스타일이 적용되나?
▶ 페이지의 모든 스타일은 다음 규칙에 따라 새로운 "virtual" 스타일 시트로 적용된다.
▶ 여기서 1번이 가장 높은 우선 순위를 갖는다.
1. 인라인 스타일 ( HTML 요소 안에 )
2. 내 외부 스타일 시트 ( <head> 섹셕 안에 )
3. Browser 기본값
▶ 인라인 스타일이 가장 높은 우선순위를 가진다.
실습 : https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_cascade
출처 : https://www.w3schools.com/css/css_howto.asp
How to add CSS
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'CSS' 카테고리의 다른 글
| CSS / (3) CSS 선택자 (0) | 2023.03.12 |
|---|---|
| CSS / (2) CSS 구문 (0) | 2023.03.10 |
| CSS / (1) CSS 소개 (0) | 2023.03.10 |
