[CSS3] 스타일 형식과 스타일 시트 [내부 스타일 시트, 외부 스타일 시트, 인라인 스타일]

---

- 스타일 형식과 스타일 시트

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 웹 표준의 정석, 이지스 퍼블리싱

---