1. CSS 란
Cascading Style Sheetd의 약자로 스타일을 적용하는 방식이 우선순위에 따라 순차적으로 되기 때문에 Cascade라는 이름이 붙여졌다. html과 같은 문서를 꾸미기 위해 사용하는 스타일시트이며 CSS 2.1 개발이 완료되고 CSSWG(CSS Working Group)는 더 이상 CSS의 버전을 3, 4와 같은 메이저 업데이트로 가져가지 않기로 결정로 했다.
2. css 속성값
1) 선택자(Selector)
선택자는 규칙을 적용할 요소를 나타낸다.
2) 프로퍼티(property)
변경하려는 요소의 부분을 나타낸다.
3) 값(value)
선택한 프로퍼티에 사용하려는 설정을 지정한다.
4) 선언(declaration)
선택자로 지정한 요소의 스타일을 적용하는 방법을 나타낸다.
3.css 적용 방식
1) 인라인 방식
태그마다 직접 태그 안에 스타일을 적용하는 방법
<h1 style='color:red; background-color:yellow;'>Hello world</h1>2) 내부 스타일 시트
<head> 요소 내에 위치하는 <style> 요소 안에 스타일을 적용해주거나 <body>에 스타일 태그를 만들어 스타일을 적용해주는 방식
<head>
<style>
body {font-size: 14px;}
</style>
</head><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1 {
color:red;
background-color:yellow;
}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
3) 외부 스타일 시트
<head> 태그 내에서 <link> 요소를 사용하여 스타일을 적용할 css파일의 위치를 알려주고 외부에 있는 css파일로 스타일을 적용하는 방식이다.
<head>
<link rel="stylesheet" href="main.css">
</head>- rel: 페이지와 연결된 파일 간의 관계를 지정하는 요소이다. css 파일을 연결할 때에는 stylesheet를 입력해준다.
4) 다중 스타일 시트
@import "main.css";- at-rule이라고 부른다. css에 행동방식을 지시하며 다음과 같은 다양한 조건을 지시한다.
@charset : 스타일시트에서 사용하는 문자 인코딩을 지정한다. 문서에서 가장 먼저 선언한다.
@import : 다른 스타일 시트에서 스타일 규칙을 가져온다. @charset 바로 다음에 선언되어야 한다.
@font-face : 디바이스에 없는 폰트를 다운로드하여 적용할 때 사용한다.
@keyframes : 애니메이션을 만들 때 사용한다.
@media : 사용자 디바이스에 따른 스타일을 분기 처리하고자 할 때 사용한다.
@supports : 특정 CSS 속성을 브라우저가 지원하는지 확인하고 스타일을 선언하고자 할 때 사용한다.
4. CSS를 적용할 때에는 주로 외부 스타일시트를 사용하는 이유
1) 동일한 CSS파일로 여러 웹페이지의 스타일을 적용할 수 있다.
2) 따라서 코드 양도 줄어들고 처음 스타일 시트를 내려받게 되면 동일 css가 적용된 다른 페이지들의 업로드 속도가 빨라진다.
3) html 코드를 더 쉽게 파악하고 편집할 수 있다.
5. 선택자(selector) 우선순위 규칙
- 후자 우선의 원칙: 두 개의 선택자가 동일하면 줄 중에 후자가 우선된다.
- 구체성: 선택자가 다른 선택 자보다 더 구체적이면 구체적인 선택자가 우선된다.
- 중요성:! impotant로 적용된 요소는 더 중요하게 적용된다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [CSS] 인라인 요소와 블록라인 요소 개념과 display 프로퍼티 (0) | 2022.04.06 |
|---|---|
| [CSS] margin 병합 현상과 해결법 (0) | 2022.04.06 |
| [HTML] Form 태그 종류 및 개념정리 (0) | 2022.04.05 |
| [HTML] Text-level Tag 모음 (0) | 2022.03.31 |
| [HTML] Grouping Content 모음 (0) | 2022.03.29 |