1. CSS란?
- Cascading Style Sheet,
html문서 내 정보 컨텐츠의 스타일, 글꼴 등 시각적인 요소들을 분리하여 관리하기 위해 도입된 언어이다.
2. CSS 사용 방법
1. link 태그를 통한 삽입
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
-
아래와 같이
<head>태그 안의<link>태그를 통해 삽입한다. -
이 방법은 가장 대표적이고 권장되는 방식이다.
2. style 태그를 통한 삽입
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ color: "red"} </style> </head> <body> <p>안녕하세요</p> </body> </html>
<style>태그 내 영역은 CSS만의 영역이 된다.
3. inline 스타일을 통한 삽입 (요소에 직접 삽입)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <span style="color: red;"> 안녕하세요</span> </body> </html>
- 위 방법은 매우 권장되지 않는 방식이다.
2. CSS Syntax
- CSS의 구조는 다음과 같다.
-
Selector: 선택자 부분, 즉 꾸미고자 하는 친구를 선택,<tag>뿐만 아니라id,class등이 존재 -
Property: CSS 속성 선택(ex) color, background-color 등..) -
Value: CSS 속성 선택에 따른 값 (px, em 등 ..) -
Declaraion: Prperty, Value 값을 통틀어 선언부라고 칭한다. 특히 선언부 뒤에는 반드시;, 세미콜론을 적어줘야 한다.
3. CSS Selectors
1. Selector 적용 규칙
- CSS는 Cascading, 즉 "연속화" 라는 말처럼 다음과 같은 규칙을 갖고 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p { color: "blue"; /* 파란색으로 지정 */ } p { color: "red"; /* 빨간색으로 지정*/ } </style> </head> <body> <p>안녕하세요</p> </body> </html>
- 위와 같이 동일한
Selector에게 서로 다른 색 지정을 연속적으로 하였을 때 처음 지정했던 파란색이 아닌, 가장 마지막의propery인 빨간색이 덮어쓰이게 된다.
2. Selector 종류
- Element
li { }
- Class
.hello { }
- ID
#hello { }
- 이 외에
자식,자손,형제선택자,구조적 가상 클래스 선택자,동적 가상 클래스 선택자등이 있지만 이는 다음에 "Selector우선순위"와 함께 다시 정리하도록 하겠다.
블로그를 이전하였습니다 => "https://jymini.tistory.com"
정리가 아주 깔끔하네요 용민님