본문 바로가기
Publishing/CSS3

CSS 사용법

by 오다다의 이상한 코드 odada 2020. 2. 14.

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
CSS 사용법  (0) 2020.02.14

댓글0