Front/CSS

[CSS3] CSS 정의와 선택자 및 스타일 적용방법

헹창 2020. 8. 22.

[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>

728x90

저작자표시 비영리 변경금지

'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

[CSS3] CSS 정의와 선택자 및 스타일 적용방법