문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS How to add CSS ======
<WRAP left notice 80%>
  * description : CSS How to add CSS
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-04
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_howto.asp|How to Add CSS]]
\\
브라우저가 스타일시트를 참조할 때, 브라우저는 스타일 시트의 정보에 따라 HTML 문서를 구성합니다.\\
\\
=====CSS를 추가하는 3가지 방법=====
스타일 시트를 추가하는 3가지 방법이 있습니다.\\
  * 외부 CSS (External CSS)
  * 내부 CSS (Internal CSS)
  * 인라인 CSS (Inline CSS)
\\
=====외부 CSS (External CSS)=====
외부 스타일 시트를 사용하면, 단 하나의 파일만 수정하여 전체 웹사이트의 형태를 변경할 수 있습니다.\\
각각의 HTML 페이지는 head 섹션 안에서 <link> 요소 내부에 왜부 스타일 시트 참조를 포함해야 합니다.\\
===예제===
외부 스타일은 HTML 페이지의 <head> 섹션 내부의 <link> 요소 안에서 정의됩니다.\\ 
\\
<code html>
<!DOCTYPE html>
<html>
<head>
<line rel="stylesheet" href="mystyle.css">
</head>

<body>

<h1>This is a heading.</h1>
<p>This is a paragraph.</p>

</body>
</html>
</code>
\\
외부 스타일 시트는 어떤 텍스트 에디터로도 작성할 수 있고, 반드시 %%.css%% 확장자로 저장해야 합니다.\\
외부 %%.css파일%%에는 어떠한 %%HTML%% 태그도 있어서는 안됩니다.\\
예제) "mystyle.css"\\ 
\\
<code css>
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}
</code>
\\
''Note: 속성 값과 단위 사이에 공백을 넣지 마세요. ex)<del>margin-left: 20 px</del> --> margin-left: 20px'' 

=====내부 CSS (Internal CSS)=====
내부 스타일 시트는 단 하나의 HTML 페이지가 고유한 스타일을 가질 경우에 사용될 수 있습니다.\\
내부 스타일은 HTML 페이지의 <head> 섹션 내부의 <style> 요소 안에서 정의됩니다.\\ 
\\
<code html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: 1inen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph</p>

</body>
</html>
</code>
\\
=====인라인 CSS (Inline CSS)=====
인라인 스타일은 단일 요소에 고유한 스타일을 적용하기 위해 사용됩니다.\\
인라인 스타일을 사용하기 위해, 관련 요소에 스타일 속성(attribute)을 추가합니다. 스타일 속성은 어떤 CSS 속성(property)도 포함할 수 있습니다.\\
===예제===
인라인 스타일은 관련된 요소의 스타일 속성 안에서 정의됩니다.\\
\\
<code html>
<!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>
</code>
\\
''인라인 스타일은 콘텐츠와 표현 방식을 혼합하여 스타일 시트의 많은 장점을 잃어버리니 드물게 사용하세요 ''\\
\\
=====다중 스타일 시트 (Multiple Style Sheets)=====
다른 스타일 시트들에서 동일한 요소 선택자에 대한 일부 속성들이 정의된 경우, 마지막으로 읽은 스타일 시트의 값이 사용됩니다.\\
\\
외부 스타일 시트 mystyle.css가 <h1> 요소에 대해 하기의 스타일을 가졌다고 합시다.\\
<code css>
h1 {
  color: navy;
}
</code>
\\
그리고 내부 스타일 시트도 <h1> 요소에 관해 아래와 같은 스타일을 가졌다고 가정합시다.\\
<code css>
h1 {
  color: orange;
}
</code>
\\
===예제===
외부 스타일 시트 링크 이후에 내부 스타일이 정의되었다면, <h1> 요소는 "오렌지" 컬러의 폰트가 됩니다.\\
<code html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>

h1 {
  color: ornage;
}
</code>
\\
===예제===
하지만, 외부 스타일 시트 링크 이전에 내부 스타일이 정의되었다면, <h1> 요소는 "네이비" 컬러의 폰트가 됩니다.\\
<code html>
<head>

<style>
h1 {
  color: ornage;
}
</style>

<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</code>
\\
=====계단식 순서 (Cascading Order)=====
HTML 요소에 대해 명시된 스타일이 한 가지 이상이 명시되었을 때, 어떤 스타일이 사용될 것인가?\\
\\
한 페이지의 모든 스타일은 다음 규칙에 따라 **새로운 "가상" 스타일 시트 (a new "virtual" style sheet)**로 단계적으로 적용됩니다. 여기서 1번이 가장 높은 우선 순위를 가집니다.\\
\\
  - 인라인 스타일 (HTML 요소 내부에서)
  - 외부 스타일 시트와 <head> 섹션의 내부 스타일 시트
  - 브라우저 기본 설정
\\
따라서, 인라인 스타일이 가장 높은 우선 순위를 가지게 되며, 외부 스타일 시트, 내부 스타일 시트 그리고 브라우저 기본 설정보다 우선합니다.\\





{{tag>오션 CSS add css, internal, external, inline}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
