CSS 선언방법

• 들어가기 전에

CSS를 HTML안에 선언하는 방식은 크게 세가지가 있다.

• 학습 목표

1. CSS 선언 방식을 이해하고 활용할 수 있다.

• 핵심 개념

- inline

- internal

- external

• CSS 기본사용법

- (1) span {(2) color : (3) red; }

· (1) : selector(선택자)

· (2) : property

· (3) : value

· div > p : div 하위의 p 영역을 의미

• sytle을 HTML 페이지에 적용하는 세가지 방법

- inline : HTML 태그 안에 직접 넣는 방법 → 좋은 방법은 아님. 구조를 표현하는 HTML에 CSS가 들어있으면 구조와 스타일이 섞이게 되므로 유지보수와 관리가 어렵다. element.style로 DOM 트리에 보여짐

- internal : head 안에 바로 style을 넣는 방법 → 별도의 CSS 파일을 관리하지 않아도 되며, 서버에 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보내지 않아도 되는 장점이 있다.

- external : HTML에 별도의 분리된 CSS 파일(.css)을 만들어서 include 시키는 방법 → 보편적으로 많이 사용. style.css 와 같은 파일을 별도로 만든 후 link 태그로 추가하면 사용 가능

- 적용 우선 순위 : inline > internal >= external (겹치는 선언이 있을 경우에는 나중에 선언된 속성이 반영됨)

• 생각해보기

Q1. JavaScript로 동적으로 CSS 코드를 수정하려고 하면 어떻게 해야 할까요?

A1.