- 스타일 형식과 스타일 시트
1. 스타일 형식
스타일은 맨 앞에 선택자를 지정하고, 중괄호(｛,｝) 안에 세미콜론(；)으로 구분한다.
/* 선택자 { 스타일 속성:속성 값; } */
p { text-align:center; } /* 텍스트 단락을 중앙에 정렬 */
h2 { font-size:20px; color:orange; } /* 2단계 제목의 글자 크기 20px, 글자 색상 주황색 */2. 스타일 시트
스타일은 위치에 따라 내부, 외부, 인라인으로 나눠진다.
- 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 정리한 것을 '내부 스타일 시트'라고 한다.
→ 상단 <head> 태그 내 <style> 태그 안에 입력한다.
<head>
<style>
section {
width:500px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border: 5px solid gray; /* 테두리 스타일 */
}
</style>
</head>- 외부 스타일 시트
외부에 .css 파일을 따로 만들어 가져오는 것을 '외부 스타일 시트'라고 한다.
→ 여러 개의 웹 문서에 공통적인 스타일 시트를 적용하고자 할 때 사용
<head>
<link rel="stylesheet" href="외부 스타일 파일 경로">
</head>- 인라인 스타일
스타일 시트를 사용하지 않고 적용할 대상에 직접 표시하는 방법을 '인라인 스타일'이라고 한다.
<p style="color:blue;">개울가에 올챙이 한 마리..</p>
참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱