CSS 사용법 How to

브라우저가 스타일 시트를 읽을 때, 브라우저는 스타일 시트에 있는 정보에 따라 HTML 문서를 포맷할 것이다.

CSS 삽입하는 3가지 방식

1. 외부 스타일 시트 2. 내부 스타일 시트 3. 인라인 스타일 시트

1. 외부 스타일 시트

하나의 파일을 변경함으로써 웹사이트의 전체적인 모습을 바꿀 수 있다.

각 페이지는 반드시 <link>요소 안에 외부 스타일 시트를 참조해야 한다. <link> 요소는 <head> 섹션에 들어간다.

외부 스타일 시트는 아무 텍스트 에디터에서 쓰여져도 된다. 파일은 html 태그를 포함하지 않아야 한다. 파일은 .css 확장자로 저장되어야 한다.

속성의 값과 단위 사이에는 띄어쓰기가 없어야 한다. 20 px; (X) -> 20px; (O)

2. 내부 스타일 시트

단일 페이지가 유일한 스타일을 가질 경우 사용될 수 있다.

<head> 섹션 안에 있는 <style> 요소 안에 내부 스타일이 정의된다.

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

3. 인라인 스타일 시트

하나의 요소에 유일한 스타일을 적용하기 위해 사용될 수 있다.

사용하기 위해 style 속성을 요소에 추가한다. style 속성은 CSS 속성을 포함할 수 있다.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

잘하고 싶은 백엔드 개발자