CSS의 구성
span {
color : red;
}span : selector(선택자)
color : property
red : value
style을 HTML페이지에 적용하는 3가지 방법
1. inline
HTML태그 안에 적용. CSS파일에 적용하는 다른 방식들보다 가장 먼저 적용된다.
장점 : 별도의 문서로 외부 스타일을 만들거나 업로드 할 필요가 없다.
단점 : CSS코드를 HTML에 추가하면 구조가 복잡해진다. CSS의 분량이 커질수록 수정 시간이 많이 소요된다. 웹페이지 크기와 다운로드 시간에 영향을 줄 수 있다.
<p style="border:1px solid gray;color:red;font-size:2em;">2. internal
style 태그로 지정. 별도의 CSS파일을 관리하지 않아도 된다. 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.
장점 : inline 방식보다 비교적 HTML 코드가 깔끔하다.
단점 : 동일한 CSS를 여러 페이지에 적용할 경우, 페이지마다
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>3. external
외부파일(.css)로 지정하는 방식. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋다. 현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 한다. internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만든다. 이후에 아래처럼 link태그로 추가한다.
장점 : CSS가 분리된 파일이므로 내부 스타일 시트 방식과 다르게 수정 시 CSS 파일만 수정해 상당히 효율적이다.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</div>
</body>
</html>4. 우선순위
inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등하다.
따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.
생각해보기
1. javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지 고민해보세요.
▷ style 태그와 style.cssText를 사용할 수 있다. | [Javascript] DOM의 style(css) 변경하기, 읽기
2. 구글 웹사이트는 어떻게 css를 선언하고 있을까요? 구글 웹사이트(구글 내 여러가지 웹사이트중 하나)에서 소스보기를 해서 CSS 코드를 한번 찾아보세요. internal 방식이나 external 방식 등을 목격할 수 있을 겁니다.
▷ style 태그를 사용하는 internal 방식, 외부파일로 지정하는 external 방식을 주로 사용한다
