스타일 시트 알아보기
웹 문서 안에서는 스타일 규칙을 여러 개 사용합니다.
이런 스타일 규칙을 한 눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 스타일 시트라고 합니다.스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과사이트 제작자가 만드는 사용자 스타일로 나눌 수 있습니다. 사용자 스타일은 다시 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉩니다.
브라우저 기본 스타일
CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용하는데,
이것을 브라우저 기본 스타일이라고 합니다.
간단한 스타일 정보를 적용하는 인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.
이런 방법을 인라인 스타일 이라고 합니다.
스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용해
style="속성: 속성값;" 형태로 스타일을 바꿀 수 있습니다.
다음 예제는 첫 번째 <p>태그에 인라인 스타일을 사용해 글자를 파란색으로 바꾼 것입니다.
| 인라인 스타일 적용하기 |
| <h1>레드향</h1> <p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.<p> <p>레드향은 한라봉과 귤을 교배한 것으로.....</p> <p>비타민 C와 비타민 P가 풍부해 ......</p> |
스타일을 여러 곳에 적용할 때 쓰는 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다.
스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로모든 스타일 정보는 <head>태그 안에서 정의하고 <style>과 </style> 태그 사이에 작성합니다.다음 예제는 <h1>태그를 사용한 부분에 배경색과 글자색을 지정한 것입니다.다음 예제에서 사용한 속성과 속성값은 앞으로 배울 것이므로 지금은 스타일 시트의 위치만 확인!
| 내부 스타일 시트 사용하기 |
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <style> h1{ padding: 10px; background-color: #222; color: #fff; } </style> </head> <body> <h1>레드향</h1> <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.<p> <p>레드향은 한라봉과 귤을 교배한 것으로.....</p> <p>비타민 C와 비타민 P가 풍부해 ......</p> </body> </html> |
스타일 정보를 따로 저장해 놓은 외부 스타일 시트
웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다.
대부분 디자인에 일관성이 있도록 같은 스타일을 여러 웹 문서에 사용하죠.
그런데 그때마다 웹 문서를 똑같은 내부 스타일 시트로 만든다면 서버 공간은 물론 문서를 내려받는 시간까지 낭비합니다.
따라서 사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을
별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 것이 일반적입니다.
이렇게 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라 하고 *.css라는 파일 확장자를 사용합니다.
외부 스타일 시트 파일에 스타일을 작성할 때는 <style>태그를 사용하지 않습니다.
그리고 이렇게 만든 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용됩니다.
외부 스타일 시트를 연결할 때 사용하는 태그는 <link>태그 입니다.
| 기본형 <link rel="stylesheet" href="외부 스타일 시트 파일 경로"> |
다음 예제는 <h1> 태그를 사용한 부분에 배경색과 글자색을 style.css라는 외부 스타일 시트 파일에 지정해 놓고,
HTML 파일에서 style.css를 링크한 것입니다.
예제.html 파일을 보면 외부 스타일 시트에 있는 스타일 정보가 적용된 것을 볼 수 있습니다.
| 외부 스타일 시트 사용하기 CSS 파일 (style.css) |
| h1 { padding: 10px; background-color: #222; color: #fff; } |
| 외부 스타일 시트 사용하기 HTML 파일 (예제.html) |
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>레드향</h1> <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.<p> <p>레드향은 한라봉과 귤을 교배한 것으로.....</p> <p>비타민 C와 비타민 P가 풍부해 ......</p> </body> </html> |
출처 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석
'##CSS' 카테고리의 다른 글
| 기타선택자 수업내용 복습 (5) | 2024.10.16 |
|---|---|
| 기본 선택자 수업내용 복습 (0) | 2024.10.15 |
| 선택자 우선순위 (0) | 2024.10.14 |
| CSS 기본 선택자 알아보기 (1) | 2024.08.18 |
| 스타일이란 ? (0) | 2024.08.09 |