CSS 란 무엇입니까?
CSS 는 C ascading S 스타일 S 시트 를 나타냅니다 .
CSS는 HTML 요소가 표시 되는 방법을 설명합니다.
CSS 예
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
"Try it Yourself" 버튼을 클릭하여 작동 방식을 확인하십시오.
CSS 구문
CSS 규칙은 선택기 와 선언 블록으로 구성됩니다.
선택기는 스타일을 지정할 HTML 요소(h1)를 가리킵니다.
선언 블록(중괄호)에는 세미콜론으로 구분된 하나 이상의 선언이 있습니다.
각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다.
다음 예에서 모든 <p> 요소는 중앙 정렬되고 빨간색이며 글꼴 크기는 32픽셀입니다.
예시
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
같은 예를 다음과 같이 작성할 수도 있습니다.
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
외부 스타일 시트
CSS 스타일 시트는 외부 파일에 저장할 수 있습니다.
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
외부 스타일 시트는 <link> 태그가 있는 HTML 페이지에 연결됩니다.
예시
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
인라인 스타일
예시
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
계단식 순서
HTML 요소에 대해 다른 스타일이 지정된 경우 스타일은 다음 우선 순위를 가진 새 스타일로 계단식 으로 배열됩니다.
- 우선순위 1: 인라인 스타일
- 우선순위 2: 외부 및 내부 스타일 시트
- 우선순위 3: 브라우저 기본값
- 동일한 우선 순위 수준에서 다른 스타일이 정의된 경우 마지막 스타일이 가장 높은 우선 순위를 갖습니다.
예시
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS 데모 - 하나의 HTML 페이지 - 여러 스타일!
여기에서는 4개의 다른 스타일시트로 표시된 하나의 HTML 페이지를 보여줍니다.
스타일시트 버튼(1-4)을 클릭해도 다른 스타일로 표시된 페이지가 표시됩니다.
전체 CSS 튜토리얼
CSS에 대한 간략한 설명입니다.
전체 CSS 자습서를 보려면 W3Schools CSS 자습서로 이동하십시오 .
전체 CSS 참조를 보려면 W3Schools CSS 참조로 이동하십시오 .