CSS Reference

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)

키워드 (고유색상명)

 

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)이 됩니다

 

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기