====== CSS How to add CSS ====== * description : CSS How to add CSS * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 \\ =====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 섹션 안에서 요소 내부에 왜부 스타일 시트 참조를 포함해야 합니다.\\ ===예제=== 외부 스타일은 HTML 페이지의 섹션 내부의 요소 안에서 정의됩니다.\\ \\

This is a heading.

This is a paragraph.

 \\ 외부 스타일 시트는 어떤 텍스트 에디터로도 작성할 수 있고, 반드시 %%.css%% 확장자로 저장해야 합니다.\\ 외부 %%.css파일%%에는 어떠한 %%HTML%% 태그도 있어서는 안됩니다.\\ 예제) "mystyle.css"\\ \\ body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } \\ ''Note: 속성 값과 단위 사이에 공백을 넣지 마세요. ex)margin-left: 20 px --> margin-left: 20px'' =====내부 CSS (Internal CSS)===== 내부 스타일 시트는 단 하나의 HTML 페이지가 고유한 스타일을 가질 경우에 사용될 수 있습니다.\\ 내부 스타일은 HTML 페이지의 섹션 내부의

This is a heading

This is a paragraph

\\ =====인라인 CSS (Inline CSS)===== 인라인 스타일은 단일 요소에 고유한 스타일을 적용하기 위해 사용됩니다.\\ 인라인 스타일을 사용하기 위해, 관련 요소에 스타일 속성(attribute)을 추가합니다. 스타일 속성은 어떤 CSS 속성(property)도 포함할 수 있습니다.\\ ===예제=== 인라인 스타일은 관련된 요소의 스타일 속성 안에서 정의됩니다.\\ \\

This is a heading.

This is a paragraph.

 \\ ''인라인 스타일은 콘텐츠와 표현 방식을 혼합하여 스타일 시트의 많은 장점을 잃어버리니 드물게 사용하세요 ''\\ \\ =====다중 스타일 시트 (Multiple Style Sheets)===== 다른 스타일 시트들에서 동일한 요소 선택자에 대한 일부 속성들이 정의된 경우, 마지막으로 읽은 스타일 시트의 값이 사용됩니다.\\ \\ 외부 스타일 시트 mystyle.css가

요소에 대해 하기의 스타일을 가졌다고 합시다.\\ h1 { color: navy; } \\ 그리고 내부 스타일 시트도

요소에 관해 아래와 같은 스타일을 가졌다고 가정합시다.\\ h1 { color: orange; } \\ ===예제=== 외부 스타일 시트 링크 이후에 내부 스타일이 정의되었다면,

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