0033 HTML에 CSS 적용하고 기본 문법 알아보기
CSS를 HTML 문서에 적용하는 방법은 다음의 3가지 방식이다.
Inline - 개별 요소에 style 속성으로 적용
Internal - <head>의 영역에 있는 <style> 요소에 스타일 시트 설정
External - 외부의 CSS 파일을 링크로 연결하여 적용
인라인(inline) 방식은 HTML의 style 속성에서 다루었기 때문에 0025 HTML style 속성(attribute) 및 배경색 설정을 참조하자.
CSS를 HTML 문서에 적용할 때 가장 자주 사용하는 방법은 외부에 CSS 파일을 만들어서 이를 HTML 문서에 링크하는 External 방식이다. 하지만 External 방식은 나중세 살펴보고 이번에는 우리는 주로 보기 쉽고 이해하기 편한 Internal 방식으로 기본적인 CSS 문법을 익혀보자.
Internal CSS를 사용하는 경우는 하나의 HTML 페이지를 꾸미는 경우다. 이는 하나의 요소만을 대상으로 꾸미는 Inline CSS와 대조된다.
Internal CSS를 사용하기 위해서는 <head> 섹션에 <style> 요소를 중첩시킨다.
다음과 같이 
0033.html 파일을 만들어 실행해 보자.
<!DOCTYPE html>
<html>
<head>
<title>간단한 CSS 적용 사례</title>
<style>
p {
color: white;
background-color: red;
}
</style>
</head>
<body>
<p>1번 p블록 시작<br /><br />1번 p블록 끝</p>
<p>2번 p블록 시작<br /><br />2번 p블록 끝</p>
</body>
</html>
위의 예문은 <style></style> 요소 내에 CSS를 집어넣어 사용하는 Internal CSS 사용방식을 보여준다. 작성한 예문을 실행해보면 다음과 같이 나타난다.
위에서 작성한 CSS가 어떻게 작성되었는지 기본적인 내용들을 살펴보자.
다음은 <p>요소를 선택하여 배경색(background-color) 속성(property)을 빨간색(red)으로 선언한 규칙이다.
이 전체를 하나의 규칙(Rule)이라고 부른다. 그리고 규칙(Rule)은 어떤 요소에 어떤 속성을 적용할지 결정한다.
CSS에서 작성된 규칙이 어떤 HTML의 요소에 적용되는지 나타내는 것을 선택자(selector)라고 한다. 위의 예문에서는 선택자로 <p> 요소를 선택하여 모든 <p> 요소가 해당 규칙의 적용을 받아 서로 다른 2개의 <p> 요소 블록에 동일한 CSS 규칙이 모두 적용되는 것을 확인할 수 있다.
현재는 <p> 요소를 선택하고 있지만, <body> 요소, <h1> 요소 등 다른 요소를 선택할 수 있고 그 외에도 id 속성, class 속성 등 굉장히 다양한 방식으로 선택이 가능하다(나중에 자세히 살펴보자.).
중괄호({ })로 감싸져 있는 부분 안에는 속성(property)과 속성값(value)이 위치한다. 속성과 속성값은 콜론(:)으로 연결되어 있고 여러 개의 속성값이 하나의 속성(property)에 적용되는 경우는 다음과 같이 공백으로 속성값을 구분한다.
border: 10px solid white;
속성(property)과 속성값(value)은 합쳐서 하나의 단위를 이루고 이 단위를 선언(declaration)이라고 한다.
그리고 선언(declaration)은 반드시 세미콜론(;)으로 마무리 한다.
※ 이어지는 다음 선언이 없는 마지막 선언은 세미콜론(;)을 쓰지 않아도 되지만 그런 습관으로 오류가 발생할 수 있으므로 세미콜론(;)으로 마무리하는 것을 습관으로 하자.
여러 개의 선언(declaration)을 한 줄에 또는 여러 줄에 걸쳐서 한 번에 작성할 수 있다.
p { color: white; background-color: red; }
또는
p {
color: white;
background-color: red;
}
하나 또는 여러 개의 선언(declaration)들은 중괄호({ })로 둘러싸이는데 이렇게 중괄호({ })로 묶인 것을 선언(declaration) 블록이라고 한다.
선택자와 중괄호 사이, 중괄호와 선언(declaration) 사이, 선언과 선언 사이에는 공백을 넣거나 줄을 바꿔 구별하는 것을 권장하는 것 같다. 실제로 공백을 넣지 않아도 작동하는 경우도 있지만 그렇지 않은 경우도 있어서 권장하는 것으로 알고 있다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0033 HTML에 CSS 적용하고 기본 문법 알아보기.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0035 External CSS 적용을 위한 link 요소 (0) | 2018.12.10 |
|---|---|
| 0034 CSS 요소 선택자(element selector) (0) | 2018.12.07 |
| 0032 CSS 소개 (0) | 2018.12.04 |
| 0031 약어(character entity)로 특수문자 표시하기 (0) | 2018.12.03 |
| 0030 HTML 주석(comment) 달기 (0) | 2018.12.02 |