동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
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 */
등록된 댓글이 없습니다.