브라우저는 스타일시트를 읽을 때 스타일시트의 정보에 따라 HTML 문서의 형식을 지정한다.
CSS를 추가하는 3가지 방법
스타일 시트를 삽입하는 세 가지 방법은 다음과 같다:
- 외부 CSS
- 내부 CSS
- 인라인 CSS
외부 CSS(External CSS)
외부 스타일시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있다!
각 HTML 페이지에는 <link> 요소 내부, 헤드 섹션 내부의 외부 스타일 시트 파일에 대한 참조가 포함되어야 한다.
| <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>제목</h1> <p>단락.</p> </body> </html> |
위의 코드를 실행한 결과 화면이 아래 그림이다.
외부 스타일 시트는 모든 텍스트 편집기에 작성할 수 있으며 .css 확장자로 저장해야 한다.
외부 .css 파일에는 HTML 태그가 포함되지 않아야 한다.
"mystyle.css" 파일의 모양은 다음과 같다:
| mystyle.css 파일 내용 body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } |
참고: 속성 값(20)과 단위(px) 사이에 공백을 추가하지 마세오:
부정확함(공백): 여유-좌측: 20px;
정답(공백 없음): 여백 왼쪽: 20px;
내부 CSS(Internal CSS)
단일 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있다.
내부 스타일은 <style> 요소 내부, 헤드 섹션 내부에 정의된다.
| <!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>제목</h1> <p>단락.</p> </body> </html> |
위의 코드 실행 화면은 아래 그림과 같다.
인라인 CSS(Inline CSS)
인라인 스타일을 사용하여 단일 요소에 고유한 스타일을 적용할 수 있다.
인라인 스타일을 사용하려면 스타일 특성을 관련 요소에 추가합니다. 스타일 특성은 모든 CSS 속성을 포함할 수 있다.
| <!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">제목</h1> <p style="color:red;">단락.</p> </body> </html> |
위의 코드 실행 결과 화면이 아래 그림이다.
다중 스타일 시트(Multiple Style Sheets)
다른 스타일 시트에서 동일한 선택기(요소)에 대해 일부 특성이 정의된 경우 마지막으로 읽은 스타일 시트의 값이 사용된다.
외부 스타일이 h1 요소에 다음과 같은 스타일로 정의되어 있다. h1 색을 네이비 색을 정한다.
| h1 { color: navy; } |
그런 다음 내부 스타일시트에도 <h1> 요소에 대한 다음 스타일이 있다고 가정한다:
| <style> <- 내부 스타일 h1 { color: orange; } </style? |
위의 코드르 종합적으로 정리하면 아래 표와 같다.
| <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: orange; } </style> </head> <body> <h1>제목</h1> <p>이 문서의 스타일은 외부 스타일시트와 내부 스타일의 조합입니다</p> </body> </html> |
결과는 h1 요소의 색깔은 오렌지이다. 최후로 실행되는 스타일이 적용이 된다.
그런데 인터널 CSS와 외부 CSS 순서를 바꾼 코드를 실행하면 아래와 같은 코드이다.
| <!DOCTYPE html> <html> <head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>제목</h1> <p>이 문서의 스타일은 외부 스타일시트와 내부 스타일의 조합입니다</p> </body> </html> |
그러면 h1 요소는 파란색이 설정이 된다. 아래 그림과 같다.
계단식 순서(Cascading Order)
HTML 요소에 대해 두 개 이상의 스타일이 지정된 경우 어떤 스타일이 사용될까?
페이지의 모든 스타일은 다음 규칙에 따라 새 "가상" 스타일 시트로 "캐스케이드"됩니다. 여기서 1번이 우선 순위가 가장 높다:
- 인라인 스타일(HTML 요소 내부)
- 외부 및 내부 스타일 시트(헤드 섹션)
- 브라우저 기본값
따라서 인라인 스타일이 가장 높은 우선순위를 가지며 외부 및 내부 스타일과 브라우저 기본값을 재정의한다.
| <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> body {background-color: linen;} </style> </head> <body style="background-color: lavender"> <h1>여러 스타일이 하나로 캐스케이드됩니다</h1> <p>여기서 페이지의 배경색은 인라인 CSS와 내부 CSS, 외부 CSS로 설정됩니다.</p> <p>스타일을 제거하여 계단식 스타일시트가 어떻게 작동하는지 실험해 보십시오(인라인 CSS를 먼저 제거한 후 내부, 외부).</p> </body> </html> |
위의 코드를 실행한 결과 화면이 아래 그림이다.
지금까지 3가지 CSS 스타일 추가하는 방법, 3가지 스타일의 적용 순서 등에 대해서 간략히 살펴보았다.
간단하지만 꼭 실습하기를 추천합니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS 색상(CSS Colors) (0) | 2023.07.02 |
|---|---|
| CSS 주석(CSS Comments) (0) | 2023.07.01 |
| CSS 선택기(selector) (0) | 2023.06.29 |
| CSS Syntax(CSS 구문) (0) | 2023.06.28 |
| CSS 개요 (0) | 2023.06.26 |
댓글