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