css 구문
h1 { color: yellow; font-size:10px; }- 선택자(selector) - "h1"
- 속성(property) - "color"
- 값(value) - "yellow"
- 선언(declaration) - "color: yellow", "font-size: 10px"
- 선언부(declaration block) - "{ color: yellow; font-size:10px; }"
- 규칙(rule set) - "h1 { color: yellow; font-size:10px; }"
css 적용
inline
<div style="color:green;">안녕하세요</div>inline은 해당 요소에 스타일 속성을 이용해 규칙을 선언하는 방법이다.
해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않고, 선언부의 내용만 스타일의 속성 값으로 넣어준다.
inline 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지는 않는다.
internal
<style>
div {color: green;}
</style>style 태그를 활용한 방법이다.
<style>은 html 파일 내, <head>내부에 들어가며, <style>태그안에 스타일 규칙을 넣을 수 있다.
위 코드로인해, <body> 태그 내 작성된 모든 <div>의 color값이 green 으로 설정된다.
따라서 페이지가 많고 스타일 규칙 내용이 많아지면 복잡해질 것이다.
External
외부 스타일 시트 파일을 이용한 방법이다.
외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일로 만들어 넣는 방식이다.
<link rel="stylesheet" href="css/style.css">이후<head>내부에 <link>를 선언한 뒤, css파일을 연결하면 된다.
rel 속성은 연결되는 파일이 문서와 어떤 관계인지 명시하는 속성으로 css 파일에는 'stylesheet'라고 적어줘야 한다.
'Front-end > CSS' 카테고리의 다른 글
| [CSS] Safari환경에서 적용안되는 폰트 해결하기 (0) | 2022.06.23 |
|---|---|
| [CSS] 마진 병합(margin collapse) 정리 (0) | 2022.06.04 |
| [CSS] div border , table 태그 border 테두리 겹침 제거 (0) | 2022.05.25 |
| [CSS] 선택자 class & id (0) | 2022.05.22 |
| [CSS] 구체성 (0) | 2022.05.22 |
