✍ CSS란?

CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)란 HTML이나 XML같은 마크업 언어로 작성된 문서의 표시 방법을 기술하는 언어이다. HTML이 명사의 역할을 한다면 CSS는 형용사의 역할을 한다고 할 수 있다.

🔎 CSS rule (ruleset)

h1 {
    color: blue;
    text-align: center;
    font-size: 20px;
}

  1. 선택자(selector)
    : 꾸밀 HTML의 요소 이름

  2. 선언(declaration)
    : property: value;의 형태, 꾸밀 요소의 속성을 명시

  3. 속성(property)
    : 주어진 HTML 요소를 꾸밀 수 있는 방법

  4. 값(property value)
    : 속성을 위한 많은 결과 중 하나를 선택

🗝️ CSS를 적용하는 방법

  1. 인라인 스타일 CSS
<!DOCTYPE  html>
<html>
    <head>
        <meta  charset="utf-8"  />
        <title>Inline style CSS</title>
    </head>
    <body>
        <h1  style="color: blue; background-color: yellow; border: 1px solid black">
          Hello World!
        </h1>
        <p  style="color: red">This is my inline style CSS example</p>
    </body>
</html>

→ 우리가 CSS 코드를 작성할 때 가장 좋지 않은 방법이다.
유지 관리가 좋지 않으며 HTML과 CSS가 혼합되어 있어 코드를 이해하는데 어렵게 만든다.

  1. 내부(Internal) CSS
<!DOCTYPE  html>
<html>
    <head>
        <meta  charset="utf-8"  />
        <title>Internal CSS</title>
        <style>
            h1  {
              color:  blue;
              background-color:  yellow;
              border:  1px  solid  black;
            } 
            p  {
              color:  red;
            }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is my internal CSS example</p>
    </body>
</html>

→ HTML의 <head>안에 포함된 <style> 요소 내부에 CSS를 삽입한다.
인라인 스타일 CSS와 비교하면 style을 분리했기 때문에 훨씬 나아진 방법이지만 CSS가 모든 페이지에서 반복되고 변경이 필요한 경우 여러 위치에서 업데이트 되기 때문에 최선의 방법은 아니다.

  1. 외부(External) CSS
<!DOCTYPE  html>
<html>
    <head>
        <meta  charset="utf-8"  />
        <title>External CSS</title>
        <link  rel="stylesheet"  href="styles.css"  />
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is my external CSS example</p>
    </body>
</html>
# style.css
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}
p {
  color: red;
}

→ HTML파일의 외부에 styles.css라는 파일을 생성하고 그 안에 style을 지정하는 CSS Ruleset들을 넣어준다.
그리고 HTML의 <head>안에 <link>를 통해 HTML과 외부의 CSS파일을 연결시켜준다.

저작자표시

다른 글

다른 글 더 둘러보기

티스토리툴바