CSS
CSS는 'Cascading Style Sheets'의 약자로써, HTML을 이용하여 기본적인 웹 페이지의 골격을 만들었다면 CSS를 이용하여 색상, 크기, 위치, 모양 등을 지정할 수 있다. CSS에 대해 아는게 많을 수록 웹 페이지의 가시성이 높아지고, 스타일있게 꾸밀 수 있다.
CSS를 HTML에 적용시키는 방법
CSS를 HTML에 적용시키는 방법에는 3가지 정도가 있다.
- HTML 내부에 <style> 태그를 이용한 '내부 스타일시트' 방식
- 별도의 파일을 이용하여 HTML에 링크시키는 '외부 스타일시트' 방식
- HTML 태그 내부에 속성으로 스타일을 지정하는 '인라인' 방식
내부 스타일시트
내부 스타일시트 방식은 HTML의 <head> 태그 내부에 <style> 태그를 사용하여 CSS를 작성하는 방식이다.
하나의 html 파일만으로 골격 맞추기와 꾸미기를 동시에 할 수 있지만, 새로운 html 파일이 생기면 또 다시 새롭게 CSS를 작성해야 한다.
내부스타일시트.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000000;
}
h1 {
color: #ffffff;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>
(실행결과)
외부 스타일시트
외부 스타일시트 방식은 html 파일 외에 따로 CSS 파일을 만들어서 html 파일에 <link> 태그를 이용하여 CSS 파일을 링크하는 방식이다. 그렇기에 하나의 CSS 파일을 이용해서 여러 html 파일에 적용시킬 수 있다.
외부스타일시트.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>
style.css
body {
background-color: #777777;
}
h1 {
color: #000000;
font-size: 20px;
font-weight: bold;
} (실행결과)
인라인
인라인 방식은 꾸미길 원하는 HTML의 태그에 속성으로 style을 주고 속성 값을 입력하는 방식이다.
태그 속성으로 직접 꾸미는 경우, HTML 소스가 복잡해지고 각 태그의 스타일 관리가 어렵다.
인라인.html
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: green;">
<h1 style="color: red; font-size: 15px; font-weight: normal;" >Hello CSS</h1>
</body>
</html>
(실행결과)
'HTML_CSS > CSS' 카테고리의 다른 글
| 태그에 테두리를 만들어내는 border 속성 (0) | 2021.06.20 |
|---|---|
| 글자에 테두리, 그림자 넣기 (5) | 2020.03.30 |
