CSS 란 무엇입니까?
- CSS는 의미 C ascading의 S의 tyle가 S heets을
- CSS는 HTML 요소가 화면, 종이 또는 다른 매체에 표시되는 방법을 설명 합니다
- CSS 는 많은 작업을 저장합니다 . 여러 웹 페이지의 레이아웃을 한 번에 제어 할 수 있습니다
- 외부 스타일 시트는 CSS 파일에 저장됩니다
CSS 구문
CSS 규칙 세트는 선택기와 선언 블록으로 구성됩니다.
선택기는 스타일을 지정할 HTML 요소를 가리 킵니다.
선언 블록에는 세미콜론으로 구분 된 하나 이상의 선언이 포함됩니다.
각 선언에는 CSS 속성 이름과 값이 콜론으로 구분되어 포함됩니다.
CSS 선언은 항상 세미콜론으로 끝나고 선언 블록은 중괄호로 묶습니다.
p {
color: red;
text-align: center;
}
CSS 주석
주석은 코드를 설명하는 데 사용되며 나중에 소스 코드를 편집 할 때 도움이 될 수 있습니다.
브라우저에서는 주석을 무시합니다.
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
https://www.w3schools.com/css/css_syntax.asp
CSS Syntax
CSS Syntax CSS Syntax A CSS rule-set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS
www.w3schools.com
CSS를 삽입하는 세 가지 방법
- 외부 CSS (External CSS)
- 내부 CSS (Internal CSS)
- 인라인 CSS (Inline CSS)
External CSS
외부 스타일 시트를 사용하면 하나의 파일 만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
각 HTML 페이지에는 헤드 섹션 내부의 <link> 요소 내부에있는 외부 스타일 시트 파일에 대한 참조가 포함되어야합니다.
외부 스타일 시트는 모든 텍스트 편집기에서 쓸 수 있으며 확장자는 .css로 저장해야합니다.
외부 .css 파일에는 HTML 태그가 포함되지 않아야합니다.
"mystyle.css"파일은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Internal CSS
하나의 단일 HTML 페이지에 고유 한 스타일이있는 경우 내부 스타일 시트를 사용할 수 있습니다.
내부 스타일은 헤드 섹션 내부의 <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>
Inline CSS
인라인 스타일을 사용하여 단일 요소에 고유 한 스타일을 적용 할 수 있습니다.
인라인 스타일을 사용하려면 관련 요소에 스타일 속성을 추가하십시오. 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>
Multiple Style Sheets
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
https://www.w3schools.com/css/css_howto.asp
How to add CSS
How To Add CSS When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. Three Ways to Insert CSS There are three ways of inserting a style sheet: External CSS Internal CSS Inline CSS External CS
www.w3schools.com
'Publishing > CSS3' 카테고리의 다른 글
| CSS Web font (0) | 2020.02.20 |
|---|---|
| CSS Fonts (0) | 2020.02.18 |
| 가상 선택자 (0) | 2020.02.17 |
| CSS 속성(Attribute) 선택자 (0) | 2020.02.14 |
| CSS Type 선택자 (0) | 2020.02.14 |