CSS 기본 서식

CSS 기본 규칙

css는 기본적으로 다음과 같은 규칙을 따릅니다.

위의 css 코드는 다음과 같이 읽을 수 있습니다.

h1요소의 폰트 크기를 2em으로 하고, 폰트 색상을 검정색으로 지정합니다.

다음은 해당하는 부분에 대한 설명입니다.

선택자(selector)는 스타일을 적용하는 대상을 말하며, html 태그, class명, id명등이 이에 해당합니다. 또한 이들을 조합하여 선택자의 적용대상 범위를 좀 더 세밀하게 설정할 수 있습니다.
속성(property)은 선택자에 어떤 스타일을 부여할 것인지를 지정하며, 속성별로 지정할 수 있는 값(value)들이 존재합니다.
키워드를 인용부호로 묶으면 텍스트로 인식합니다.
css의 주석은 "/*"와 "*/"로 둘러 쌉니다.
세미콜론으로 구분지어 여러 속성을 하나의 선택자에 사용할 수 있습니다.
```
body {
    color: #000; 
    font-size: 0.75em;
    line-height: 1.2em;
}
```
콤마로 복수의 선택자를 사용할 수 있습니다.
```
h1, h2, h3 {
    font-weight: bold;
}
```

CSS의 길이 단위

CSS의 길이 단위로는 절대단위와 상대단위가 있습니다
절대 단위 : pt(포인트, 1/72인치), cm(센티미터), pc(파이카, 12pt), mm, in(인치, 2.54cm)
상대 단위 : px(픽셀), em(부모요소의 폰트사이즈 속성값을 1로하는 단위), ex(부모요소의 소문자 'x'의 높이를 1로하는 단위)

길이가 0일때는 단위를 생략하고, 1미만일때는 0을 생략할 수 있습니다. 즉 0em은 0으로 표기하고, 0.2em을 .2em으로 표기가 가능합니다.

p { height: 1.2em;}
div { height: 0;}

CSS의 색상값

RGB 또는 키워드로 지정합니다.

RGB지정방법 (다음 네가지 방법으로 지정 가능)

16진수 6자리 : #ff0000
16진수 3자리 : #f00
10진수 : rgb(255, 0, 0)
퍼센테이지값 : rgb (100%, 0, 0)

키워드 (고유색상명)

black : #000000
red : #ff0000
yellow : #ffff00
blue : #0000ff
green : #008000
white : # ffffff
그외 색상을 나타내는 키워드 보기

p { color: #f00;}
p { color: red;}

URI (Uniform Resource Identifier)

URI를 지정할때 'url( )'함수를 이용합니다. css자체의 디렉토리가 기준 디렉토리가 됩니다.
다음과 같이 사용할 수 있습니다.

div {
    background-image: url("images/bg.gif");
}

함수안에 인용부호는 생략가능합니다.

상속(inherit)

상속이란 부모 엘리먼트에 적용한 스타일이 자식 엘리먼트에 적용되는것을 말합니다.
아래의 경우 폰트 사이즈 1.2em에 빨간색의 텍스트가 출력됩니다.

p {
    color: red;
}
span {
    font-size: 1.2em;
}

<p>
    <span>CSS Dictionary</span>
</p>

길이 단위인 경우 부모요소에 길이가 자식요소에 영향을 줍니다. 이를테면 다음과 같습니다.

body {
    font-size: 0.8em;
}
p {
    font-size: 0.9em;
}

위의 경우 실제 p엘리먼트 안의 텍스트 사이즈는 0.72em(0.8em * 0.9em)이 됩니다

CSS 기본 규칙

CSS의 길이 단위

CSS의 색상값

URI (Uniform Resource Identifier)

상속(inherit)

댓글