기본 문법

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)를 정의하여 화면에 어떻게 랜더링하면 되는지 브라우저에게 설명하기 위한 언어이다.

HTML과 CSS는 각자의 문법을 갖는 별개의 언어이다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없다.

1. Selector (선택자)

CSS는 HTML 요소의 style을 정의 하는데 사용된다. 따라서 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야한다.

셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다.

위와 같은 구문을 RuleSet(또는 Rule)이라 하며 셀렉터에 의해 선택된 특정 HTML 요소를 어떻게 렌더링할 것인지 브라우저에게 지시하는 역할을 한다. 위의 CSS RuleSet은 HTML 문서에 속해 있는 셀렉터를 통해 모든 h1 요소를 선택한 후 선택된 h1 요소의 스타일을 선언 블록에서 정의하고 있다.

이와 같은 RuleSet의 집합을 스타일시트(StyleSheet)라 한다.

2. 프로퍼티 (Property / 속성)

셀렉터로 HTML요소를 선택하고 {} 내에 프로퍼티와 값을 지정하는 것으로 다양한 style을 정의할 수 있다. 프로퍼티는 표준 스펙으로 이미 지정되어 있는 것을 사용해야하며 사용자가 임의로 정의할 수 없다. 여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분한다.

p {
  color: ...;
  font-size: ...;
}

3. 값 (Value / 속성값)

셀렉터로 지정한 HTML 요소에 style을 적용하기 위해 프로퍼티를 사용했다. 프로퍼티의 값은 해당 프로퍼티에 사용할 수 있는 값을 "키워드"나 "크기 단위" 또는 "색상 표현 단위" 등의 특정 단위로 지정하여야 한다.

p {
  color: orange;
  font-size: 16px;
}

4. HTML과 CSS의 연동

HTML은 CSS를 포함할 수 있다. CSS를 가지고 있지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS에 의해 렌더링 된다.

4.1 Link style

HTML에서 외부에 있는 CSS 파일을 로드하는 방식이다. 일반적으로 사용된다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

HTML

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

CSS

4.2 Embedding style

HTML 내부에 CSS를 포함시키는 방식이다. 간단한 웹페이지가 아닐경우 복잡해질 가능성이 매우 높으니 가능하면 HTML 과 CSS 는 다른 파일로 작성하여 관리하자.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 { color: red; }
      p  { background: aqua; }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

4.3 Inline style

HTML요소의 style 프로퍼티에 CSS를 기술하는 방식이다. JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있다. 하지만 일반적인 경우 Link style을 사용하는 편이 좋다.

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: red">Hello World</h1>
    <p style="background: aqua">This is a web page.</p>
  </body>
</html>

5. Reset Css

모든 웹 브라우저는 디폴트 스타일을 가지고 있어 CSS가 없어도 작동한다. 그러나 웹브라우저에 따라 디폴트 스타일이 다르기 때문에 지원하는 tag나 style도 제각각이어서 주의가 필요하다.

Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용한다. 즉, 브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜 주는 역할을 한다.

자주 사용되는 Reset Css :

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

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

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

Normalize.css: Make browsers render all elements more consistently.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

necolas.github.io

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

폰트와 텍스트 (0)	2021.07.22
Display, Visibility, Opacity (0)	2021.07.22
박스 모델 (0)	2021.07.22
프로퍼티 값 (0)	2021.07.22
Selector (0)	2021.07.21

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

티스토리툴바