[css] 개념, Selector(선택자)

CSS란?

css는 cascading style sheet라는 뜻이다. cascading은 계단식, 폭포, 단계라는 의미를 가지고 있다. 

css는 마크업 언어인 html을 꾸며줌으로서 다양한 디자인의 웹사이트를 제작할 수 있도록 돕는 아주 중요한 요소이다.

같은 html파일은 css를 달리함으로서 수백, 수천개의  다른 웹사이트를 만들 수 있다. 

css는 생각해야 하는 부분이 많으므로 복잡한 경향이 있다.

 

Selector (선택자)

1. 요소 선택자 (태그 선택자)

html 태그를 이용하는 선택자다. html문서 내의 해당 태그에 스타일을 적용한다.

여러 개를 쉼표로 구분하여 그룹화를 할 수도 있다.

*{
	margin: 0 auto;
}

h1, h2, h3{
	color: blue;
}

div{
	background-color: yellow;
}

---

2. class 선택자

html 태그의 글로벌 속성인 class를 사용하는 선택자이다.

html 태그에 class 속성에 값을 넣고 그 값을 사용해서 스타일을 넣을 수 있다. 

참고로 class 속성은 여러 개의 값을 가질 수 있다. 

css에서 클래스는 . (마침표)를 사용한다. class는 여러 요소가 같은 값을 가질 수 있다. (약속, 규약같은 것이다.)

.container{
	width: 100%;
}

.menu{
	line-height: 30px;
}

---

3.  id 선택자

html 태그의 글로벌 속성인 id를 사용하는 선택자이다.

html 태그에 id 속성에 값을 넣고 그 값을 사용해서 스타일을 넣을 수 있다.

id 속성은 class 속성과는 다르게 문서 내의 유일한 요소에만 사용한다.

(여러 요소가 id로 같은 값을 가질 수 없는 것은 아니지만, 이렇게 하지 않는다. )

css에서 클래스는 # (해시)를 사용한다. 

#logo{
	width: 100px;
    height: 150px;
}

---

4.  속성 선택자

• 단순 속성

단순하게 속성을 사용해서 선택하는 것입니다.

속성 선택자는 대괄호를 이용해서 선언합니다.

대괄호 안에 속성 이름이 들어갑니다. ex) class, id 등

요소에 해당 이름의 속성이 있다면 해당 사항이 적용됩니다.

ex) 대괄호 안에 class 적을 시 요소에 class 속성이 있다면 적용

span[class]{
	color: pink;
}

div[class][id]{
	color: gray;
}

 

• 정확한 속성

 

 

정확하게 속성과 그 값을 통해서 선택하는 것입니다.대괄호 안에 속성 이름과 속성값을 적으면 적용됩니다.

span[class="text"]{
	color: pink;
}

div[class="text"][id="info"]{
	color: gray;
}

 

• 부분 속성

속성명과 그 값 사이에 기호가 포함됩니다.

기호에 따라서 동작이 다릅니다. 

~ : 값이 공백으로 구분된 "text" 단어가 포함되는 요소 선택

^ : 값이 "text"로 시작하는 요소 선택

$ : 값이 "text"로 끝나는 요소 선택

* : 값이 "text" 문자가 포함되는 요소 선택 (포함만 되면 가능)

span[class~="text"] { 
	font-style: italic; 
}
span[class^="text"] { 
	font-style: italic; 
}
span[class$="text"] { 
	font-style: italic; 
}
span[class*="text"] { 
	font-style: italic; 
}

---

5. 선택자 조합

선택자는 다양하게 조합할 수 있습니다. 

/* 요소, class : p요소이고 class가 text인 것 */
p.text { 
	... 
}

/* class 여러 개 : class에 text, menu 둘 다 있는 것 */
.text.menu { 
	... 
}

/* id, class : id가 info이고, class가 text인 것 */
#info.text것{ 
	... 
}