.png)
CSS란
: Cascade Style Sheet
| html | css | javascript |
|---|---|---|
| 뼈 | 살 | 뇌 |
html이 뼈라면, css는 그 위에 살을 붙이는 것이며, javascript는 몸 전체의 기능을 자동하게 하는 뇌와 같다.
웹사이트는 html로 전체적인 구조를 설계하고, css로 디자인을 하는 것이다.
CSS 사용 방법
"반갑습니다."를 아래와 같이 만들기 위해서는?!
1.html 코드 중 head 태그 안에서 style 태그에 적용하여 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
span {
font-size: 15px;
color: red;
}
</style>
</head>
<body>
<span>반갑습니다.</span>
</body>
</html>2. 요소에 직접 적용하여 사용한다.
<span style="font-size: 15px; color: red;">반갑습니다.</span>3. html과 다른, 별도의 css 파일을 이용하여 사용한다.
3-1. html 파일의 head 태그 내 css 연결
- home.html
<head>
<link rel="stylesheet" href="css/styles.css"/>
</head> 3-2 html 파일과 같은 경로의 css 파일에 style 적용
- styles.css
span {
font-size: 15px;
color: red;
}
