동영상 강좌보기

CSS구문

CSS 구문 형태는 선택기(Selector)와 선언블록(Declaration)으로 구성됩니다.

선택기는 스타일을 지정할 HTML요소를 지정합니다.

선언블록은 세미콜론(;)으로 구분된 하나 이상의 선언을 포함합니다.

각 선언은 CSS속성명과 값이 포함됩니다.

CSS선언은 항상 세미콜론(;)으로 끝나며 선언 블록은 중괄호({})로 묶습니다.

다음 예제는 <p>요소를 선택하여 가운데 정렬, 빨간색 텍스트 색상으로 만들어줍니다.

p {
    color: red;
    text-align: center;
}

CSS선택기

CSS선택기는 HTML요소를 요소이름, ID, class, 속성 등에 따라 '찾거나' 선택하는데 사용됩니다.

요소 선택기

요소 선택기는 요소 이름을 기반으로 요소를 선택합니다.

다음 예제는 페이지의 모든 <p>요소를 선택할 수 있습니다.(이 경우 모든 <p>요소는 가운데 정렬되며 빨간색 텍스트 색상으로 표시됩니다.)

p {
    color: red;
    text-align: center;
}

id선택기

id selector는 HTML요소의 id속성을 사용하여 특정 요소를 선택합니다.

요소의 id는 페이지내에서 고유해야 하므로 id selector는 하나의 고유한 요소를 선택하는데 사용됩니다.

특정 id가 있는 요소를 선택하려면 해시(#)문자 다음에 요소의 ID를 씁니다.

다음 css구문은 id="para1"인 HTML요소에 적용됩니다.

#para1 {
    text-align: center;
    color: red;
}

** ID이름은 숫자로 시작할 수 없습니다.

class 선택기

class선택기는 특정 class 속성이 있는 요소를 선택합니다.

특정 class가 있는 요소를 선택하려면 마침표(.)문자 다음에 class 이름을 씁니다.

다음 예제는 class="center"인 모든 HTML요소는 빨간색으로 중앙 정렬됩니다.

.center {
    text-align: center;
    color: red;
}

특정 HTML요소만 class의 영향을 받도록 지정할 수도 있습니다.

다음 예제는 class="center"인 <p>요소만 가운데 정렬됩니다.

p.center {
    text-align: center;
    color: red;
}

HTML요소는 둘 이상의 class를 참조할 수도 있습니다.

다음 예제는 <p>요소는 class="center" 및 class="large"에 따라 스타일이 지정됩니다.

<p class="center large">이 문단은 2개의 class를 참조합니다.</p>

** class명은 숫자로 시작할 수 없습니다.

그룹 선택기

다음과 같이 같은 스타일 정의가 있는 요소가 있는 경우

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

코드를 최소화하기 위해 선택기를 그룹화하는 것이 좋습니다.

선택기를 그룹화하려면 각 선택기를 쉼표로 구분하십시오.

다음 예제는 위 코드의 선택기를 그룹화했습니다.

h1, h2, p {
    text-align: center;
    color: red;
}

CSS 주석

주석은 코드를 설명하는데 사용되며 나중에 소스코드를 편집할 때 도움이 될 수 있습니다.

주석은 브라우저에서 무시되어 화면에 나오지 않습니다.

CSS주석은 /*로 시작하고 */로 끝납니다. 주석은 여러 줄에 걸쳐있을 수도 있습니다.

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */