CSS 규칙과 선언 방법

CSS는 구조적으로 짜여진 문서(HTML, XML)에 스타일(글자, 여백, 레이아웃 등)을 적용하기 위해서 사용하는 기술입니다. CSS는 문서의 구조와 디자인을 분리할 수 있게 해 줌으로써 웹 제작이나 유지관리를 효과적으로 할 수 있게 해 줍니다. 또한 스타일을 미디어(화면, 프린트, 보이스머신 등) 별로 적용 할 수 있게 하기 때문에 다양한 기기별로 서로 다른 스타일을 적용할 수 있습니다(CSS2 표준에서 발췌).

  • Cascading style sheets의 약자이며 우선순위가 있는 스타일 시트를 말한다.
  • 마크업 언어가 실제 화면에 표시되는 방법(레이아웃과 스타일을 정의)을 기술하는 언어이다.
  • W3C에서 표준안을 만들어 내고 있으며 1996년 CSS Level 1 이후, 현재 CSS Level 2.1에서 CSS Level 3까지 보급되고 있다.

CSS 젠 가든(css zen garden) : http://www.csszengarden.com/

1. CSS 기본 규칙

레이아웃 실습(3)

  • 선택자(selector) : 스타일을 적용하는 대상을 말하며, html 태그, class명, id명등이 이에 해당한다. 또한 이들을 조합하여 선택자의 적용대상 범위를 좀 더 세밀하게 설정할 수 있다.
  • 속성(property) : 선택자에 어떤 스타일을 부여할 것인지를 지정하며, 속성별로 지정할 수 있는 값(value)들이 존재한다.
  • css의 주석은 /*와 */로 둘러싼다.
  • 세미콜론;으로 구분지어 여러 속성을 하나의 선택자에 사용할 수 있다.
  • 콤마,로 복수의 선택자를 사용할 수 있다.

2. CSS 선언 방법

2.1 외부 CSS(external css)

외부에 별도의 CSS가 정의된 파일을 불러오는 방식입니다.
여러 파일이 하나의 CSS 파일을 공유할 수 있어서 일관성이 있으며, 반복되는 작업을 줄일 수 있습니다. 

<head>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>

2.1.2 @import로 외부 CSS 불러오기

<head>
    <style type="text/css">
        @import url("/css/style.css");
    </style>
</head>

2.2 문서안에 포함된 CSS(embeded css)

head 요소 안에서 style 요소를 사용하여 문서 내에서 CSS를 정의 할 수 있습니다.
head 요소에 넣는 것이 정석이지만, 상황에 따라 body 요소 안에도 선언이 가능합니다.

<head>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

2.3 요소에 직접 선언(inline css)

요소에 직접 스타일 속성값을 지정하는 방식입니다. 

<div style="padding: 10px; border: 1px solid #eee;">
    <p>내용</p>
</div>

CSS를 읽어 들이는 순서는 다음과 같습니다.

  • 2.1.1 link 요소로 외부 CSS 불러오기
  • 2.1.2 @import로 외부 CSS 불러오기
  • 2.2 문서안에 포함된 CSS(embeded css)
  • 2.3 요소에 직접 선언(inline css)

외부 CSS를 참조하는 방법을 사용함으로써 문서 구조와 표현 분리가 철저히 지켜지는 것을 권장.

results matching ""

    No results matching ""