취미와 밥줄사이

[CSS] CSS 추가하는 방법 본문

카테고리 없음

[CSS] CSS 추가하는 방법

취미와 밥줄사이 2021. 11. 16. 23:28

브라우저가 스타일 시트를 읽을 때 스타일 시트의 정보에 따라 HTML 문서의 형식을 지정합니다.

 

 

CSS를 삽입하는 세 가지 방법

스타일 시트를 삽입하는 방법에는 세 가지가 있습니다.

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

  • 외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다.
  • 각 HTML 페이지는 헤드 섹션 내부의 <link> 요소 내부에 외부 스타일 시트 파일에 대한 참조를 포함해야 합니다.
# Example
# External style are defined within the <link> element, inside the <head> section of the an HTML page:

<!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>
  • 외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있으며 .css 확장자로 저장해야 합니다.
  • 외부 .css 파일에는 HTML 태그가 포함되어서는 안 됩니다.
  • "mystyle.css"파일의 모양은 다음과 같습니다.
# "mystyle.css"

body {
	background-color: lightblue;
    }
    
h1 {
	color: navy;
    margin-left: 20px;
    }
  • 속성 값과 단위 사이에 공백을 추가하지 마십시오(예: margin-left: 20 px;).
  • 올바른 방법은 다음과 같습니다(margin-left: 20px;)

Internal CSS

  • 하나의 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있습니다.
  • 내부 스타일은 헤드 섹션 내부의 <style> 요소 내부에 정의됩니다.
# Example
# Internal style are defined within the <style> element, inside the <head> section of an HTML page:

<!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 속성을 추가하세요.
  • style 속성은 모든 css속성을 포함할 수 있습니다.
# Example
# Inline style are defined within the "style" attribute of the relevant element

<!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>
  • 인라인 스타일은 스타일 시트의 많은 장점을 잃습니다(콘텐츠와 프레젠테이션을 혼합하여).
  • 이 방법은 아껴서 사용하십시오.

여러 스타일 시트

다른 스타일 시트의 동일한 selector(element)에 대해 일부 속성이 정의된 경우 마지막으로 읽은 스타일 시트의 값이 사용됩니다.

# Assume that an external style sheet style for the <h1> element:
h1 {
	color: navy;
    }
# The, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
	color: orange;
    }
# Example
# if the internal style is defined after the link th the external style sheet, 
# the <h1> elements will be "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
	color: orange;
    }
</style>
</head>
# Example
# However, if the internal style is defined before the link to the external style sheet, 
# the <h1> elements will be "navy":

<head>
<style>
h1 {
	color: orange;
    }
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

CSS Comments

CSS주석은 브라우저에 표시되지 않지만 소스코드를 문서화하는 데 도움이 될 수 있습니다.

  • 주석은 코드를 설명할 때 사용되며 추후에 소스코드를 편집할 때 도움이 될 수 있습니다.
  • 주석은 브라우저에 의해 무시됩니다.
  • CSS 주석은 <stlye>element 내부에 위치합니다. 그리고 /*로 시작하고 */로 끝납니다.
# Example 

/* This is a single-line comment */
p {
	color: red;
    }

코드에서 원하는 곳에 주석을 추가할 수 있습니다.

 

# Example

p {
	color: red; /* Set text color to red */
    	}

주석은 여러 줄에 걸쳐 있을 수도 있습니다.

# Example

/* This is 
a multi-line
comment */

p { 
	color: red;
    }

HTML과 CSS Comments

  • HTML은 <!-- ...-->구문을 사용하여 HTML 소스에 주석을 추가할 수 있습니다.
# Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
	color:red; /* Set text color to red */
    }
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->
<p>Hello World</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

 

 

 

REFERENCE

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

https://www.w3schools.com/css/css_comments.asp

 

CSS Comments

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

 

https://www.w3schools.com/css/css_comments.asp

 

CSS Comments

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