CSS 기본 문법

2023. 1. 28. 18:39

CSS란?

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어

CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어

HTML5에서는 HTML는 정보와 구조화, CSS는 styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어짐

HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있음

그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없다

CSS3의 용어

셀렉터 (Selector, 선택자)

CSS는 HTML 요소의 style(design, layout etc)을 정의하는데 사용

이를 위해서 선행되어야하는 것은 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 함

프로퍼티 (Property / 속성)

셀렉터로 HTML 요소를 선택하고 {} 내에 프로퍼티(속성)와 값을 지정하는 것으로 다양한 style을 정의할 수 있음

프로퍼티는 표준 스펙으로 이미 지정되어 있는 것을 사용하여야하며 사용자가 임의로 정의할 수 없음

여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분

값 (Value / 속성값)

셀렉터로 지정한 HTML 요소에 style을 적용하기 위해 프로퍼티를 사용했다.

프로퍼티의 값은 해당 프로퍼티에 사용할 수 있는 값을 “키워드”나 “크기 단위” 또는 “색상 표현 단위” 등의 특정 단위로 지정하여야 한다.

HTML과 CSS의 연동

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

연동하는 방법

Link style

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

html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

css


h1 { color: red; }
p  { color: white; background: black; }

Embedding style

HTML 내부에 CSS를 포함시키는 방식

매우 간단한 웹페이지의 경우는 문제될 것이 없겠지만 Link style을 사용하는 편이 좋음

HTML과 CSS는 서로 역할이 다르므로 다른 파일로 구분되어 작성하고 관리되는 것이 바람직

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

Inline style

HTML요소의 style 프로퍼티에 CSS를 기술하는 방식

JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있음

하지만 일반적인 경우 Link style을 사용하는 편이 좋음

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

Reset CSS 사용하기

모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어 CSS가 없어도 작동함

그런데 웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이어서 주의가 필요

Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용

즉, 브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜 주는 역할을 한다.

자주 사용되는 Reset CSS

Eric Meyer’s reset

normalize.css

Eric Meyer’s reset

reset.css파일 생성

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;
}

여기서 해당 코드를 html에 link로 추가해도 되지만, 코드가 복잡해지기 때문에

작업 중이던 style.css파일에 import로 추가해 사용

저작자표시

CO_JUN 개발일지