CSS 구성
span {
color : red;
}- span : selector(선택자)
- color: property
- red : value
style을 HTML페이지에 적용하는 3가지 방법
- inline
- html 태그 안에 적용한다.
- 다른 css 파일에 적용한 것보다 우선순위가 높다.
- internal
- html 파일 head 태그 안에 style 태그로 지정한다.
- 별도의 css 파일을 관리하지 않아도 된다.
- 서버에 css 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.
- 외부파일(.css)로 저장하는 방식이다.
- css코드가 아주 짧지 않다면 이 방법이 가장 좋다. 현업에서는 여러개의 css 파일로 분리한다.
<link rel="stylesheet" href="style.css">- link태그를 사용해서 분리한 css파일을 불러올 수 있다.
생각해보기
- javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지 고민해보세요.
- querySelector로 태그나 클래스 등을 지정하고 선택자.style.속성명 = '속성값'형태로 사용할 수 있다.
- 구글 웹사이트는 어떻게 css를 선언하고 있을까요? 구글 웹사이트(구글 내 여러가지 웹사이트중 하나)에서 소스보기를 해서 CSS 코드를 한번 찾아보세요. internal 방식이나 external 방식 등을 목격할 수 있을 겁니다.
- inline, internal, external 모두 사용하고 있다.
do for me