차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_how_to_add_css [2021/03/04 15:28]
emblim98 만듦
+++ wiki:css:css_note:css_how_to_add_css [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== Document ======
+====== CSS How to add CSS ======
 <WRAP left notice 80%>
   * description : CSS How to add CSS
@@ 줄 22: / 줄 22: @@
 외부 스타일 시트를 사용하면, 단 하나의 파일만 수정하여 전체 웹사이트의 형태를 변경할 수 있습니다.\\
 각각의 HTML 페이지는 head 섹션 안에서 <link> 요소 내부에 왜부 스타일 시트 참조를 포함해야 합니다.\\
-====예제====
+===예제===
-외부 스타일은 HTML 페이지의 <head> 섹션 내부에 <link> 요소 안에서 정의됩니다.\\
+외부 스타일은 HTML 페이지의 <head> 섹션 내부의 <link> 요소 안에서 정의됩니다.\\
 \\
-<code javascript>
+<code html>
 <!DOCTYPE html>
 <html>
@@ 줄 41: / 줄 41: @@
 </code>
 \\
-외부 스타일 시트는 어떤 텍스트 에디터로도 작성할 수 있고, 반드시 **.css**확장자로 저장해야 합니다.\\
+외부 스타일 시트는 어떤 텍스트 에디터로도 작성할 수 있고, 반드시 %%.css%% 확장자로 저장해야 합니다.\\
 외부 %%.css파일%%에는 어떠한 %%HTML%% 태그도 있어서는 안됩니다.\\
-<code javascript>
+예제) "mystyle.css"\\
+\\
+<code css>
 body {
   background-color: lightblue;
@@ 줄 52: / 줄 54: @@
   margin-left: 20px;
 }
-<code>
+</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> 섹션의 내부 스타일 시트
+  - 브라우저 기본 설정
+\\
+따라서, 인라인 스타일이 가장 높은 우선 순위를 가지게 되며, 외부 스타일 시트, 내부 스타일 시트 그리고 브라우저 기본 설정보다 우선합니다.\\
-====인라인 CSS (Inline CSS)=====
-{{tag>오션 CSS combinator selector, combination selector}}
+{{tag>오션 CSS add css, internal, external, inline}}

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

사용자 도구

사이트 도구

차이

문서 도구