본문 바로가기
웹 개발/웹프로그래밍

CSS | 2. 구문과 적용 방법

by KISCH 2020. 12. 14.
반응형


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기초



반응형

댓글