01. CSS3 기본 문법

I. CSS

CSS(Cascading Style Sheets)는 HTML element의 style을 정의하는 언어이다. 즉, HTML element를 화면에 렌더링할 방법을 지정하는 언어이다.

II. CSS Rule

Rule을 모아놓은 것을 스타일 시트(Style Sheet)라고 부른다.

selector는 style 적용의 대상이 되는 HTML element를 지정하는 용도로 사용한다.

III. HTML-CSS 연동

HTML에는 CSS를 적용시킬 수 있다. CSS를 따로 적용하지 않은 HTML에는 브라우저의 default style sheet, 즉 user agent stylesheet가 적용된다.

HTML에 CSS를 적용하는 방법은 3가지가 존재한다.

Link (External Style Sheet)

External style sheet를 가져오는 방법이다. 실무에서 자주 사용된다고 한다.

index.html

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>Document</title>

          <link rel="stylesheet" href="css/style.css">
     </head>
     <body>
          <h1>Hello CSS</h1>
          <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.</p>
     </body>
</html>

style.css

h1 { color: red; }
p { background: yellow; }

Embedding (Internal Style Sheet)

HTML 문서 내부에 internal style sheet를 포함시키는 방법이다. HTML과 CSS의 역할을 명확히 구분하는 것이 좋고, external style sheet는 internal style sheet와 달리 caching이 가능하다는 장점도 있기 때문에 embedding style보다는 link style을 쓰는 것이 더 권장된다.

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <title>Document</title>

          <style>
               h1 { color: red; }
               p { background: yellow; }
          </style>
     </head>
     <body>
          <h1>Hello CSS</h1>
          <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.</p>
     </body>
</html>

Inline

비슷한 이유로 inline style을 사용하는 것은 권장하지 않는다.

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <title>Document</title>
     </head>
     <body>
          <h1 style="color: red">Hello CSS</h1>
          <p style="background: yellow">Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.</p>
     </body>
</html>

IV. Reset CSS

Reset CSS는 여러 HTML element의 style을 초기화한다. 브라우저마다 default style이 다르기 때문에 생기는 문제를 해결하기 위해 사용한다.

Examples

https://meyerweb.com/eric/tools/css/reset/

https://necolas.github.io/normalize.css/

Reference

[1] https://poiemaweb.com/css3-syntax

[2] https://www.w3schools.com/css/css_syntax.asp

Uploaded by N2T

'Frontend > CSS' 카테고리의 다른 글

02. CSS3 Selector (2)	2022.08.29
Box Model (1)	2022.06.05
스타일 결정 우선순위 (0)	2022.06.05
Pseudo classess & Pseudo elements (0)	2022.06.05
Combinators (0)	2022.06.05