html
문서 내 정보 컨텐츠의 스타일, 글꼴 등 시각적인 요소들을 분리하여 관리하기 위해 도입된 언어이다.<!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>
태그를 통해 삽입한다.
이 방법은 가장 대표적이고 권장되는 방식이다.
<!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만의 영역이 된다.<!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>
Selector
: 선택자 부분, 즉 꾸미고자 하는 친구를 선택, <tag>
뿐만 아니라 id
, class
등이 존재
Property
: CSS 속성 선택(ex) color, background-color 등..)
Value
: CSS 속성 선택에 따른 값 (px, em 등 ..)
Declaraion
: Prperty, Value 값을 통틀어 선언부라고 칭한다. 특히 선언부 뒤에는 반드시 ;
, 세미콜론을 적어줘야 한다.
<!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
인 빨간색이 덮어쓰이게 된다. li { }
.hello { }
#hello { }
자식,자손,형제선택자
, 구조적 가상 클래스 선택자
, 동적 가상 클래스 선택자
등이 있지만 이는 다음에 "Selector
우선순위"와 함께 다시 정리하도록 하겠다.
정리가 아주 깔끔하네요 용민님