[CSS3] CSS 정의와 선택자 및 스타일 적용방법
CSS 란?
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
마크업 언어(ex. HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다.
즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.
CSS 선택자 (Selector)
다음 예제를 바탕으로 자주쓰이는 CSS 선택자를 살펴보자.
<h1 id="logo" class="logo"></h1>
1.전체 선택자
* {
...
}
2. 태그 선택자
h1 {
...
}
3. 아이디 선택자
#logo {
...
}
4. 클래스 선택자
.logo {
...
}
스타일(style) 적용
1. 인라인 스타일
HTML 요소안에 style 속성으로 CSS 적용하기
- HTML에 읽히는 최상위 style이기 때문에 다른 CSS 우선순위를 무시하고 적용된다.
[사용예제]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>
<body>
<h1 style="color: red; border: 1px solid blue;">인라인 스타일</h1>
</body>
2. 내부 스타일시트
style 태그를 만들어서 CSS 적용하기
- 원칙적으로 HTML head 태그 안쪽에 style 태그를 만들어서 사용한다.
[사용예제]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
h1 {
color: red;
border: 1px solid blue;
}
</style>
</head>
<body>
<h1 style="color: red; border: 1px solid blue;">내부 스타일 시트</h1>
</body>
3. 외부 스타일시트
외부 스타일 시트인 CSS 파일을 만들어서 외부의 파일을 연결하여 적용하기
- 외부 별도 CSS파일을 생성 및 작성하고 그 문서를 HTML 문서에서 해석할 수 있도록 <link> 태그를 사용하여 href 속성에 파일의 경로를 입력하면 외부 스타일시트를 이용하여 스타일을 적용할 수 있다.
<link rel="stylesheet" href="CSS경로">
[사용예제]
style.css 파일 생성
h1 {
color: red;
border: 1px solid blue;
}
html 파일에 링크 연결
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<line rel="stylesheet" href="./style.css">
</head>
<body>
<h1>외부 스타일시트</h1>
</body>
'Front > CSS' 카테고리의 다른 글
| [CSS3] 이미지 편집하지 않고, 투명한 배경 유지하면서 색상 변경 시키는 방법 (2) | 2021.05.03 |
|---|---|
| [CSS3] 요소 애니메이션 이벤트 transition, transform 속성 살펴보기 (0) | 2020.09.12 |
| [CSS3] CSS cursor 속성의 종류 살펴보기 (1) | 2020.08.31 |
| [CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기 (1) | 2020.08.29 |
| [CSS3] Block Level 과 Inline Level, Inline-block Level 차이 및 요소 살펴보기 (0) | 2020.08.22 |
댓글