CSS3 - basic syntax

이소라·2021년 6월 14일

CSS

Cascading Style Sheets의 약어
HTML의 각 요소의 style을 정의하여 화면 등에 어떻게 렌더링할 것인지 브라우저에게 설명하기 위한 용어
HTML와 CSS는 별개의 언어임
HTML는 CSS 포함 가능하나, HTML 없이 CSS 단독 존재 X
rule set : selector에 의해 선택된 HTML 요소를 어떻게 렌더링할 것인지 브라우저에게 지시하는 구문
style sheet : rule set의 집합

1. Selector

스타일을 적용하고자 하는 HTML 요소를 선택하는 수단

2. property

selector의 {} 안에서 property와 value을 지정하는 것으로 다양한 style을 정의 가능
표준스펙으로 이미 지정되어 있는 것을 사용해야함 (사용자가 임의로 지정 X)
여러 개의 property 지정 가능 (;으로 구분)

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

3. value

해당 property에 사용할 수 있는 value를 "키워드"나 "크기 단위" 또는 "색상 표현 단위"등의 특정 단위로 지정해야함

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

4. HTML과 CSS의 연동

HTML은 CSS를 포함 가능함
CSS를 가지고 있지 않는 HTML은 브라우저에서 기본으로 적용하는 CSS(user agent stylesheet)에 의해 렌더링됨
HTML과 CSS를 연동하는 방법 : link, embadded, inline style

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 web page</p>
  </body>
</html>

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

4.2 Embedded style

HTML 내부에 CSS를 포함시키는 방식
매우 간단한 웹페이지의 경우는 문제될 것이 없지만, link style을 사용하는 편이 좋음

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

4.3 Inline style

HTML 요소의 property에 CSS를 기술하는 방식
JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있음
일반적으로는 link style을 사용하는 편이 좋음

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

5. Reset CSS

기본적인 HTML 요소의 CSS를 초기화하는데 사용
브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜 주는 역할
자주 사용되는 Reset CSS : Eric Meyer's reset, normalize.css
Eric Meyer's reset css

/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}