[CSS] 6-2. 스타일과 스타일 시트
6-2. 스타일과 스타일 시트
스타일 형식
CSS 스타일의 형식은 다음과 같습니다.
선택자 {속성1: 속성값1; 속성2: 속성값2}
맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호({ })사이에는 스타일 정보를 넣습니다.
속성과 값을 하나의 쌍(스타일 규칙)으로 사용해야 하고, 2개 이상의 스타일 규칙을 사용할 시 세미콜론(;)으로 구분해주어야 합니다.
👍 예시: < p > 태그에 스타일 적용하기
p{
text-align: center;
color: blue;
}
여러 개의 스타일 규칙을 사용할 경우 한 줄로 작성해도 되고 여러 줄로 작성해도 됩니다.
스타일의 주석을 표기하는 방법
태그에서 주석을 사용한 것처럼 스타일에도 주석을 덧붙일 수 있습니다. 주석은 /* 와 */ 사이에 내용을 입력합니다.
/* CSS에서 주석을 사용하면
소스를 이해하기 쉽고
나중에 수정할 때도 편리합니다. */
p{
text-align: center; /*텍스트 정렬 - 중앙 */
color: blue; /* 글자색 - 파랑 */
}
스타일 시트
여러 개의 스타일 규칙을 한눈에 확인하기 쉽고 수정하기도 쉽도록 한군데 묶어놓은 것을 스타일 시트라고 합니다.
스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있습니다. 사용자 스타일은 다시 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉩니다.
브라우저 기본 스타일
CSS를 사용하지 않은 웹 문서에 대해 웹 브라우저가 기본으로 적용하는 스타일을 브라우저 기본 스타일이라고 합니다. 이는 HTML 태그만를 사용해서 웹 문서를 작성했을 때 각 태그에 맞게 스타일이 달라지는 것에서 확인할 수 있습니다.
간단한 스타일 정보를 적용하는 인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는데, 이런 방법을 인라인 스타일이라고 합니다.
스타일을 적용하고 싶은 태그에 style 속성을 사용해 style=”속성: 속성값” 과 같이 사용합니다.
👍 예시
<h1>레드향</h1>
<p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
레드향
껍질에 붉은 빛이 돌아 레드향이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.
비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
스타일을 여러 곳에 적용할 때 쓰는 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다.
스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로 모든 스타일 정보는 < head > 태그 안에서 정의하고 < style> 태그 내에 작성합니다.
👍 예시
<!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>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
스타일 정보를 따로 저장해 놓은 외부 스타일 시트
웹 사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할 때마다 가져와서 사용하는 것이 일반적입니다. 이렇게 따로 저장해놓은 스타일 정보를 외부 스타일 시트라 하고 *.css 라는 파일 확장자를 사용합니다.
외부 스타일 시트에서는 < style > 태그를 사용하지 않습니다.
h1 {
padding:10px;
background-color:#222;
color:#fff;
}
외부 스타일과 웹 문서와의 연결은 < link > 태그를 사용합니다.
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
그리고 마찬가지로, < link > 태그는 < head > 태그 안에 정의합니다.
정리
- CSS의 스타일 형식은 선택자와 중괄호({ })안 의 스타일 규칙으로 이루어지며, 스타일 규칙은 ‘속성: 속성값’과 같이 사용합니다. 또한 여러 개의 스타일 규칙을 사용할 시 세미콜론( ; )으로 구분합니다.
- 스타일 시트는 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있으며, 사용자 스타일은 다시 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉩니다.
- 인라인 스타일은 태그의 style 속성을 지정합니다.
- 내부 스타일 시트는 웹 문서 내의 < head > 태그 내에서 < style > 태그 안에 내용을 작성합니다.
- 외부 스타일 시트는 웹 문서와 별개로 디자인 파일을 만드는 것이고, 이 때 < style > 태그는 사용하지 않습니다. 웹 문서와 외부 스타일은 < head > 태그 내에서 < link > 태그를 통해 이루어지고, 속성으로는 rel과 href를 지정합니다.
Leave a comment