목차
CSS How to add CSS
- description : CSS How to add CSS
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-04
Source of the article
브라우저가 스타일시트를 참조할 때, 브라우저는 스타일 시트의 정보에 따라 HTML 문서를 구성합니다.
CSS를 추가하는 3가지 방법
스타일 시트를 추가하는 3가지 방법이 있습니다.
- 외부 CSS (External CSS)
- 내부 CSS (Internal CSS)
- 인라인 CSS (Inline CSS)
외부 CSS (External CSS)
외부 스타일 시트를 사용하면, 단 하나의 파일만 수정하여 전체 웹사이트의 형태를 변경할 수 있습니다.
각각의 HTML 페이지는 head 섹션 안에서 <link> 요소 내부에 왜부 스타일 시트 참조를 포함해야 합니다.
예제
외부 스타일은 HTML 페이지의 <head> 섹션 내부의 <link> 요소 안에서 정의됩니다.
<!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>
외부 스타일 시트는 어떤 텍스트 에디터로도 작성할 수 있고, 반드시 .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 페이지의 <head> 섹션 내부의 <style> 요소 안에서 정의됩니다.
<!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>
인라인 CSS (Inline CSS)
인라인 스타일은 단일 요소에 고유한 스타일을 적용하기 위해 사용됩니다.
인라인 스타일을 사용하기 위해, 관련 요소에 스타일 속성(attribute)을 추가합니다. 스타일 속성은 어떤 CSS 속성(property)도 포함할 수 있습니다.
예제
인라인 스타일은 관련된 요소의 스타일 속성 안에서 정의됩니다.
<!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)
다른 스타일 시트들에서 동일한 요소 선택자에 대한 일부 속성들이 정의된 경우, 마지막으로 읽은 스타일 시트의 값이 사용됩니다.
외부 스타일 시트 mystyle.css가 <h1> 요소에 대해 하기의 스타일을 가졌다고 합시다.
h1 { color: navy; }
그리고 내부 스타일 시트도 <h1> 요소에 관해 아래와 같은 스타일을 가졌다고 가정합시다.
h1 { color: orange; }
예제
외부 스타일 시트 링크 이후에 내부 스타일이 정의되었다면, <h1> 요소는 “오렌지” 컬러의 폰트가 됩니다.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: ornage; }
예제
하지만, 외부 스타일 시트 링크 이전에 내부 스타일이 정의되었다면, <h1> 요소는 “네이비” 컬러의 폰트가 됩니다.
<head> <style> h1 { color: ornage; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
계단식 순서 (Cascading Order)
HTML 요소에 대해 명시된 스타일이 한 가지 이상이 명시되었을 때, 어떤 스타일이 사용될 것인가?
한 페이지의 모든 스타일은 다음 규칙에 따라 새로운 “가상” 스타일 시트 (a new “virtual” style sheet)로 단계적으로 적용됩니다. 여기서 1번이 가장 높은 우선 순위를 가집니다.
- 인라인 스타일 (HTML 요소 내부에서)
- 외부 스타일 시트와 <head> 섹션의 내부 스타일 시트
- 브라우저 기본 설정
따라서, 인라인 스타일이 가장 높은 우선 순위를 가지게 되며, 외부 스타일 시트, 내부 스타일 시트 그리고 브라우저 기본 설정보다 우선합니다.
