프로그래밍/HTML5

css 선택자 개념과 종류

콘파냐 2017. 5. 13. 19:30
반응형

오늘은 css3를 처음으로 맛보는 날이므로 가볍게 css3가 어떻게 적용되고 css에서 선택자라는 녀석이 뭔지 살펴보겠다. 사실 본인은 웹 언어에 대해서는 적당히 알고는 있긴하지만 특별히 공부할 생각이 없었는데 c, java와 같은 범용적인 프로그래밍 언어보다 쉽고, 그 동안 부분적으로만 알아오다 보니 뭔가 답답하기도 해서 한번 쭉 정리하는 것이다. 


CSS는 HTML과 쌍을 이룬다. 최근 웹 페이지는 html문서와 css문서가 같이 사용되는데 html이 건축물이라면 css는 건축물을 꾸미는 인테리어라고 볼 수 있다. HTML 문서만 있더라도 웹페이지가 굴러가는데는 충분하다. 하지만 건축을 해놓고 인테리어를 안해 놓으면 누가 그 건물에 입주를 하겠나? 따라서 이 둘은 항상 같이  다닌다고 생각하면 된다.


HTML 문서에 CSS 적용 방법 3가지

CSS3를 HTML 문서에 적용하는 방법은 3가지가 있다. 


HTML 문서 내부에서 처리하는 경우

① html 태그에 style 속성을 주어 직접 적용하는 방법



② <head> 태그 내에서 <style> 태그로 사용하는 방법


HTML 문서 외부에서 처리하는 경우

③ .css 확장자를 가진 파일을 html 문서에서 link태그로 불러들여서 css를 적용할 수 있다.

href 속성에 css 파일명만 적어줬다.  html파일과 css파일이 있는 곳의 위치가 같기 때문이다.  css파일의 내용은 ②의 <style> 태그의 내용을 그대로 옮겨온 것이다. 웹 브라우저 실행 결과는 동일하므로 생략한다.


①은 이해가 가더라도 아직 ②, ③의 css 문법은 어색할 것이다. div나 nth-child와 같은 것 때문일텐데 이것은 선택자라는 것이다. 말 그대로 스타일을 적용할 타겟을 선택한다는 것이다. 좀 구체적으로 알아보도록 하자.


선택자란?

css는 html문서에 인테리어를 한다. 


건축물이라면 침실을 이렇게 꾸미고, 화장실은 저렇게 꾸미고, 좀 더 세부적으로 침실의 전등은 Led 등으로 화장대는 어디 제품으로 등등.. 꾸미고자 하는 타겟이 있어야 한다.


선택자는 타겟이 어떤 것인지를 알려주는 역할을 한다. 앞서 div라든지 nth-child는 선택될 대상을 알려주는 선택자다. div는 html 태그이름이다. 이렇게 태그를 선택할 수 있는데 이를 태그선택자라고 한다. div 태그선택자가 쓰이면 div 태그에 스타일을 적용하라는 뜻이다. 


div 선택자 뒤에 :nth-child 역시 선택자인데 좀 더 세부적인 선택자이다. 이 선택자는 해당 태그(여기서는 div)의 순서를 말한다. 


div: nth-child(1)  div 태그 중에 첫 번째에 적용

div: nth-child(2)  div 태그 중에 두 번째에 적용

div: nth-child(3)  div 태그 중에 세 번째에 적용


※ 사실 nth-child 선택자를 div태그 선택자와 같이 쓰지는 않는데 우선 설명의 편의상 이렇게 사용했다. nth-child 선택자는 리스트 태그의 li태그와 같이 일련의 목록 태그와 같이 쓰인다.



선택자를 사용하여 스타일을 주는 방법은 다음과 같다.

선택자 {

       속성 : 속성값;

}

이제는 앞 예제의 css 문법이 눈에 들어올 것이다.



선택자의 종류

선택자는 태그 선택자 말고도 다양하다. 속성선택자라는 것도 있고 속성값 선택자도 있다. 링크선택자, 부정선택자, 문자선택자 등등 다양하다. 이런 

다음은 대표적인 선택자들이다. (구체적인 속성과 속성값은 생략한다.)


전체 선택자

* { 속성: 속성값; }

html 문서 전체에 적용할 때 사용한다.



태그 선택자 

p {color:#ff0000;}

선택된 태그에만 스타일을 적용할 때 사용한다.


id 선택자

#idname { 속성: 속성값; }

id 속성이 idname인 태그에 스타일을 적용한다.



class 선택자

.classname { 속성: 속성값; }

class 속성 값이 classname인 태그에 스타일을 적용한다.



자손(하위, 후손) 선택자

div p { 속성: 속성값; }

태그와 태그 사이에 띄어 쓰기가 되어 있다. 먼저 쓰인 태그는 뒤에 쓰인 태그의 상위 태그다. div 태그 내부에 있는 p 태그에 적용한다. 띄어쓰기 대신 다음과 같이 사용해도 된다.

div > p { 속성: 속성값;} 


심심하니까 예를들어 보자.

두 개의 테이블을 만들었는데 각각의 테이블에 class 속성을 주었다. 첫 번째 테이블은 class="mytable1", 두 번째 테이블은 class="mytable2"이다.

두 테이블의 첫 번째 행은 class="row1"의 속성을 갖는다.

이제 css파일을 보자. 

.mytable1 .row1 td:nth-child(1)

해석하면 .mytable1 클래스 속성을 가진 곳에서 row1클래스 속성이 있는 곳을 찾는다. 그 다음 하위 선택자로 태그 td를 찾는데 :nth-child(1) 선택자가 붙어있으므로 첫 번째 td 태그의 내용에 빨간색 배경 속성을 적용한다.



동위 선택자

p~div { 속성: 속성값;}

p태그와 동일한 레벨에 있는 div 태그에 속성을 적용한다. 이 때 p 태그에는 스타일이 적용되지 않음.

p+div라고 하면 p태그와 동일 레벨의 첫 번째 div 태그.


이 외에도 다음과 같은 선택자들이 있다.


속성 선택자

a[href] { 속성; 속성값; }

a태그의 href 속성이 있는 경우 스타일 적용


속성값 선택자

a[href="http://thrllfighter.tistory.com"] { 속성: 속성값;}

속성값이 일치하는 경우 스타일 적용


문자 선택자

#idname:first-letter { font-size : 30px; }

id속성이 idname인 태그의 내용의 첫 번째 문자에 스타일 적용


라인 선택자

.classname:first-line { color : red; }

class 속성의 값이 classname인 태그의 첫 줄 글씨 색을 빨간색으로 한다.


반응 선택자

.mytable1 .row1 td:nth-child(1):hover {

background: #0000ff;

}

:hover 선택자는 마우스 포인터가 올라가 있을 때만 반응하는 스타일을 적용한다.


상태선택자

focus, checked 선택자. 자세한 내용은 생략

반응형