CSS는 HTML과 함께 웹 표준의 기본 개념이다.
HTML이 텍스트나 이미지, 표 같은 웹 문서의 뼈대를 만드는 역할을 한다면 CSS는 뼈대에 생기를 불어넣는 역할을 한다.
CSS를 적용시키는 방법은 크게 인라인스타일, 내부 스타일 시트, 외부 스타일 시트 3가지가 있다,
1.인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.
See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.
2.내부 스타일 시트
- 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 적용하기</title>
<style>
p{
color: tomato;
}
</style>
</head>
<body>
<p>내부 스타일을 적용해보자!!!</p>
</html>
3. 외부 스타일 시트
- 스타일 정보를 따로 저장해 놓은 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 적용하기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>외부 스타일을 적용해보자!!!</p>
</body>
</html>
p{
color: tomato;
}
이제 CSS의 기본 선택자를 알아보자
'WEB > CSS' 카테고리의 다른 글
| [CSS] position (0) | 2023.11.08 |
|---|---|
| [CSS] margin/padding (0) | 2023.11.08 |
| [CSS] block, inline (0) | 2023.11.08 |
| [CSS] text-align, text-decoration, text-shadow (0) | 2023.11.08 |
| [CSS] font-family, font-size, font-weight (0) | 2023.11.08 |