Efficient, Rapid, Accurate

💻 Programming/CSS

[CSS] 2. Syntax ( 문법, 사용법 )

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 헤더 태그죠. 그 태그의 색깔 속성을 지정해주는 예제가 밑에 있군요.

h1 { 
   color: #36CFFF; 
}

The Universal Selectors ( 유니버설 셀렉터 )

하나의 특정한 셀렉터를 선택하는 것이 아니라 모든 셀렉터에 대해서 속성을 지정해주고 싶을때 사용하는 유니버설 셀렉터입니다. * 기호는 "모든"이라는 의미를 갖고있죠.

* { 
  color: #000000; 
}

모든 셀렉터(태그)에 대해서 색까 속성값을 검정으로 설정한 예제죠? 아닌가요?

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

저작자표시 비영리 변경금지

'💻 Programming > CSS' 카테고리의 다른 글

[CSS] 6. Background ( 배경 설정 ) (0)	2016.06.12
[CSS] 5. Colors ( 색깔 ) (0)	2016.06.12
[CSS] 4. Units ( 단위 ) (0)	2016.06.12
[CSS] 3. HTML에 CSS링크 - Associating Styles with HTML (0)	2016.06.12
[CSS] 1. CSS란 ? (0)	2016.06.11