CSS 를 사용하려면 문법에 따라야겠죠?? 이번 포스팅에서는 그 문법에 대해서 알아보도록 하겠습니다.
CSS는 스타일 규칙을 따르는데 이 스타일 규칙에는 세가지 요소가 있습니다.
-
셀렉터 : 셀렉터는 HTML 태그의 이름을 말합니다. 예를들면 <h1> 태그의 h1이나 <table> 태그의 table이 셀렉터인거죠.
-
속성 : 속성은 html태그 내에서 사용되는 그런 속성들을 말합니다. color나 border같은 것들을 말하는거죠.
-
값 : 이 값은 속성에 할당되는 값을 말합니다. color속성이 red값을 갖는다 뭐 이런거죠.
이 세가지 요소를 합하면 그게바로 아래와 같은 스타일 규칙입니다.
예제 : 테이블 셀렉터의 속성 지정하기
table{ border :1px solid #C00; }
|
위 예제가 뭐하는건지 이해가 되나요? table태그의 속성 중에 border 속성 값을 1px solid #C00 로 설정을 한겁니다.
자, 이제 어느정도 감이 오나요???
그럼 이제 셀렉터들이 어떤 것들이 있는지도 한번 봐볼까요?
The Type Selectors ( 타입 셀렉터 )
h1태그가 뭔지는 이미 아시겠죠? 레벨1 헤더 태그죠. 그 태그의 색깔 속성을 지정해주는 예제가 밑에 있군요.
The Universal Selectors ( 유니버설 셀렉터 )
하나의 특정한 셀렉터를 선택하는 것이 아니라 모든 셀렉터에 대해서 속성을 지정해주고 싶을때 사용하는 유니버설 셀렉터입니다. * 기호는 "모든"이라는 의미를 갖고있죠.
모든 셀렉터(태그)에 대해서 색까 속성값을 검정으로 설정한 예제죠? 아닌가요?
The Descendant Selectors ( 후손 셀렉터 )
태그안에 또 다른 태그가 들어갈 수가 있습니다. 그럴때 후손 셀렉터에 대해서만 적용을 하고 싶은 속성값이 있을텐데 그럴때는 아래와 같이 사용하시면 됩니다. 아래 예제는 ul태그 안에 사용된 em태그의 속성을 지정해주는 예제입니다.
ul em {
color: #000000;
}
|
The Class Selectors ( 클래스 셀렉터 )
만약 클래스 단위로 속성값을 지정해주고 싶다면 클래스 셀렉터를 사용하시면 됩니다.
사용법은 아래와 같습니다. 점(.)을 찍고 붙여서 클래스명을 써주시면 됩니다.
.black {
color: #000000;
}
|
위 예제는 black클래스에 속한 모든 태그의 색을 검정색(#000000)으로 지정해주는 예제네요 . 좀 더 범위를 좁혀서 아래처럼 사용하실 수도 있습니다.
h1.black {
color: #000000;
}
|
<h1> 태그이면서 black클래스에 속한 태그들의 색깔을 모두 #000000으로 지정해주는 예제군요.
# 참고로 아래처럼 하나의 태그에 여러개의 클래스를 부여할 수 있다는 점도 알고계시면 좋겠네요:
<p class="center bold">
This para will be styled by the classes center and bold.
</p>
|
The ID Selectors ( 아이디 셀렉터 )
이번에는 아이디 셀렉터에 대해서 보도록 하겠습니다. 모든 태그에는 아이디를 부여할 수 있습니다. 그리고 그렇게 부여된 아이디를 셀렉트하기위해서는 # 기호를 사용합니다.
#black {
color: #000000;
}
|
위 예제는 id가 black인 요소의 색깔을 검정으로 지정하는 예제입니다.
h1#black {
color: #000000;
}
|
위 예제는 <h1> 요소내의 모든 요소들 중에서 id가 black인 녀석에게만 검정색 속성을 주었네요
이 id셀렉터가 가장 유용하게 쓰이는 경우는 아래처럼 후손 셀렉터들에게 속성을 부여할 때입니다.
#black h2 {
color: #000000;
}
|
위 예제는 태그id가 black인 태그내의 h2태그의 색깔 속성값을 지정해주는 예제죠? 아닌가요? 맞습니다.
The Child Selectors ( 자식 셀렉터 )
위에서 말한 후손 셀렉터는 descendant 라고하여 모든 후손들에 대해 적용이 됩니다. 하지만 이 자식 셀렉터는 직계 자식만 해당이 됩니다. 예제를 한번 보실까요.
body > p {
color: #000000;
}
|
<body> 태그 바로 밑에 있는 <p> 에 대해서만 적용되는 스타일을 정의했군요. body안의 div안에서 사용된 p태그는 위 스타일의 적용을 받지 않습니다.
The Attribute Selectors ( 속성 셀렉터 )
아래 예제는 input태그의 type속성이 text인 녀석들의 색을 지정해주는 예제입니다.
input[type="text"]{
color: #000000;
}
|
위에 정의된 스타일은 <input type="submit" /> 요소에는 적용이 되지 않는다는 것이죠.
아래는 속성 셀렉터의 사용법입니다.
-
p[lang] - lang 속성을 갖는 모든 문단요소를 선택.
-
p[lang="fr"] - lang attribute이 "fr"인 모든 문단 요소를 선택.
-
p[lang~="fr"] - lang 속성이 "fr"을 포함하는 모든 문단 요소를 선택.
-
p[lang|="en"] - lang 속성이 "en"이거나 또는 "en"으로 시작하는 문단 요소를 선택.
Multiple Style Rules ( 다중 스타일 규칙 )
지금까지는 하나의 요소에 하나의 스타일만 적용을 했습니다. 하지만 요소마다 여러개의 속성을 가질 수 있으니 여러개의 스타일을 지정할 수도 있어야겠죠?
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
|
위 예제처럼 세미콜론 (;) 으로 스타일을 구분하여 정의해주면 됩니다. 간단하죠?
각 속성에 지정된 속성값들에 대해서는 이게 뭔가 하실 수도 있는데 신경쓰지마시고 일단 넘어가세요. 차근차근 배우면 됩니다 ^___^
Grouping Selectors ( 셀렉터 그룹화 )
내가 지정한 스타일을 여러개의 요소에 한꺼번에!!!! 적용하고 싶으시다면!!!!
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
|
위 예제는 h1, h2 and h3 요소에 한꺼번에 스타일을 적용시키는 예제입니다. 순서는 전혀 상관이 없구요 콤마를 이용해서 셀렉터들을 구분지어주시면 되겠습니다. 아래처럼 아이디 셀렉터를 이용할 수도 있습니다.
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
|
클래스 셀렉터나 다른 셀렉터들을 함께 사용해보는 연습도 해보세요 ^____^
Reference : http://www.tutorialspoint.com/css/css_syntax.htm
