반응형
CSS 구문
CSS는 html 을 꾸며주는 표현용 언어입니다. 관리적인 차원에서 css의 필요성을 살펴 보겠습니다. h1 제목을 파란색으로 바꿔야 하는 경우가 생겼고 html문서가 많고 h1 태그가 많으면 하나하나 다 고치는데 많은 시간과 노력이 필요합니다. 이러한 디자인적인 부분을 css에 담아 관리 수정이 용이해집니다. css에서 h1을 찾아 한 줄만 추가한다며 모든 html의 모든 h1태그가 똑같아지기 때문이죠. css의 구조를 살펴보겠습니다.
1 2 3 4 | h1 { color: blue; font-size: 2em; } | cs |
- 선택자 (selector) : h1
- 내용 (property) : color
- 값 (value) : blue
- 선언
1 2 | color: blue; font-size: 2em; | cs |
- 선언부
1 2 3 4 | { color: blue; font-size: 2em; } | cs |
CSS 적용
inline
- 해당 요소에 직접 스타일 속성을 이용해서 규칙을 선언
- 직접 입력하기 때문에 선택자는 필요없고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다
1 | <div style="color:blue;"> 내용 </div> | cs |
internal
1 2 3 4 5 6 7 | <style> div{ color:blue; } </style> | cs |
- <head> 내부에 <style> 안에 스타일 규칙이 들어감
- 모든 <div>에 같은 스타일을 줄 수 있다.
External
- CSS 파일을 하나 만들고 스타일 규칙을 만든 다음, <link>를 이용해서 CSS파일을 연결
- CSS 파일
1 | div {color:blue;} | cs |
- html 파일 <head> 태그 내부
1 | <link rel="stylesheet" href="css/style.css"> | cs |
관련포스트
반응형
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| CSS | 7. 조합자와 가상선택자 (0) | 2020.12.23 |
|---|---|
| CSS | 3. 선택자 (0) | 2020.12.20 |
| HTML | 5. 콘텐츠 모델 (0) | 2020.12.19 |
| CSS | 4. 폰트 텍스트 관련 (0) | 2020.12.16 |
| HTML | 6. 인라인 프레임 (iframe) 속성 (0) | 2020.12.12 |
| HTML | 4. meta 태그의 속성과 종류 (0) | 2020.12.04 |
| CSS | 1. 기초 (0) | 2020.11.23 |
| HTML | 1. 기초 (0) | 2020.11.20 |
댓글