css란 웹 문서의 스타일 시트이다.
html에서 웹에 관한 내용을 구성한다면, css는 디자인 역할을 맡고 있다.
폰트, 글씨 크기, 색, 도형, 정렬 등등 웹 페이지의 내용을 제외한 모든 디자인 부분
1. Inline Style Sheet
첫 번째는 html 태그의 속성에 css코드를 넣는 방법이다.
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
</head>
<body>
<h1 style="color: black; background-color:lightgreen;">고양이는 귀여워</h1>
</body>
</html><h1>이라는 태그 안에 속성 값을 만들어 글씨에는 검은색, 배경에는 연두색을 적용하였다.
디자인 요소를 태그마다 하나하나 지정해 줘야 하기 때문에 한계가 있으며 재사용이 불가능하다.
2. Internal Style Sheet
두 번째는 <html> 안에 <style> 안에 css코드를 넣는 방법이다.
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<style>h1{
color:gray;
background-color:lightgreen;
}</style>
</head>
<body>
<h1>고양이는 귀여워</h1>
</body>
</html>html 문서 안에 <style> 태그를 넣어 디자인을 적용했다.
(<style> 태그는 보통 <head>와 </head> 사이에 넣지만 어디에 넣어도 상관없다.)
html 문서 안의 여러 요소를 한 번에 꾸밀 수 있다는 장점이 있다.
하지만 다른 html 문서에는 적용할 수 없다는 단점
3. Linking Style Sheet
마지막은 별도의 css 파일을 생성하고 html 문서와 연결하는 방법이다.
우선 style.css 라는 파일을 만든다.
css파일
h1{
color:gray;
background-color: lightblue;
}
test 파일
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<link rel ='stylesheet' href = './style.css'/>
</head>
<body>
<h1>고양이는 귀여워</h1>
</body>
</html>
style.css 앞에 './' 는 파일의 위치를 의미한다.
html과 css가 같은 폴더에 있으므로 href= './style.css'라고 작성한 것이다.
만약 'home' 이라는 폴더 안에 'style.css'라는 파일을 두면
href = './home/style.css' 라고 작성해야 한다.
이것을 상대 경로라고 한다.
★ 정리하기 ★
✔ css 적용하는 방법
- Inline Style Sheet
- Internal Style Sheet
- Linking Style Sheet
'Web 개발 > [HTML,CSS]' 카테고리의 다른 글
| [HTML/CSS] 6. 단위와 위치 (0) | 2022.07.03 |
|---|---|
| [HTML/CSS] 5. 클래스 , 패딩과 마진 (0) | 2022.07.01 |
| [HTML/CSS] 3. 중요태그 정리 (0) | 2022.06.30 |
| [HTML/CSS] 2. HTML의 기본 구조 (0) | 2022.06.30 |
| [HTML/CSS] 1. HTML과 CSS (0) | 2022.06.27 |
