CSS | Notion

⭐ CSS 문법

📌 기본 형태

h1 {
	color: red;
	font-size: 12px;
}

p {
	color: black;
}

선택자 (Selector) : 스타일을 지정할 HTML 요소를 선택
선언 블록 (declation block) : 중괄호 {} 내부의 여러 선언들을 작성
선언 (declations) : 프로퍼티와 값으로 이루어진 쌍
선택자 { 하나이상의 선언 } 의 형태로 이루어진 하나의 Rule (혹은 Rule Set)

📌 주석

/* 내용 */ 의 형식으로 작성

/* 한 줄 주석 */

/*
여러
줄을
차지하는
주석
*/

/*
span {
	color: blue;
	font-size: 1.5em;
}
*/

⭐ CSS를 적용하는 방법

내부 스타일 (embedded)

인라인 스타일 (inline)
외부 스타일 (external)

내부 스타일 (embedded)

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
    <title>CSS</title>
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>

인라인 스타일 (inline)

<body>
	<h1 style="color:red">Welcome!</h1>
</body>

외부 스타일 (external)

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <link rel="stylesheet" href="style/main.css" />
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>

⭐ 캐스캐이딩 원칙

스타일 우선순위

스타일 상속

스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
  - 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
- 적용 범위가 적을 수록 우선시 된다.
  - tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 소스코드의 순서가 뒤에 있으면 덮어쓴다.
스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
  - 자식 요소에서 재 정의 할 경우, 부모의 스타일을 덮어쓴다.
- 상속이 되지 않는 속성도 있다. (예: 배경 이미지, 배경 색 등)

⭐ CSS 선택자

▫️ 주요 선택자

📌 Type Selector

h2 {
	color: purple;
}

📌 ID Selector

#welcome-tilte {
	color: green;
}

📌 Class Selector

.blue {
	color: blue;
}

▫️ 속성 선택자

<!DOCTYPE html>
<html>
  <head>
    <title>CSS</title>
    <link rel="stylesheet" href="style/main.css" />
  </head>
  <body>
    <ul>
      <li>
        <a href="<http://example.com>" target="_blink">
          Example Link (com/http)
        </a>
      </li>
      <li>
        <a href="<http://example.org>" target="_blink">
          Example Link (org/http)
        </a>
      </li>
      <li>
        <a href="<https://example.com>">
          Example Link (com/https)
        </a>
      </li>
      <li>
        <a href="<https://example.org>">
          Example Link (org/https)
        </a>
      </li>
    </ul>
  </body>
</html>

📌 [attr]

a[target] {
	color: hotpink;
}

📌 [attr=value]

a[href="<https://example.org>"] {
	color: indigo;
}

📌 [attr^=value]

[속성이름^="속성값"] 선택자는 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택

a[href^="https://"] {
	font-style: italic;
}

📌 [attr$=value]

[속성이름$="속성값"] 선택자는 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택

a[href$=".com"] {
	color: silver;
}

📌 [attr*=value]

[속성이름*="속성값"] 선택자는 특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택

a[href*="example"] {
	color: sienna;
}

⭐ CSS 문법

⭐ CSS를 적용하는 방법

⭐ 캐스캐이딩 원칙

⭐ CSS 선택자

▫️ 주요 선택자

▫️ 속성 선택자

▫️ 가상클래스 선택자

▫️ 가상요소 선택자

⭐ float