...
CSS의 선택자란 ?
CSS에서 선택자란 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.
사진을 보면 h1에 대한 속성값을 적어놓았는데, 여기서 표현할 대상이 되는 'h1'이 선택자가 되는 것입니다.
'h1'은 선택자, 'color'는 속성, 'red'는 속성값으로 봅니다.
선택자의 종류로는 type 선택자, id 선택자, class 선택자가 있습니다.
type 선택자
html 문서의 태그 이름을 선택자로 사용할 수 있습니다.
사진을 보면
태그 자체를 선택자로 잡아 속성을 부여한 것을 확인 가능합니다.
id 선택자
id로 HTML 요소에 이름을 붙이게 되면 따로 선택하여 속성을 부여할 수 있습니다.
각각의 요소에 각기 다른 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 붙여주면 안됩니다.
CSS에서 id는 #을 붙여 표현합니다.
사진을 보면 두개의 상자 중 "turtle"이라는 이름을 가진 id에게만 속성값을 부여했기 때문에 한 개의 상자가 나오는 것을
볼 수 있습니다.
class 선택자
HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 때에는,
class로 이름을 붙여 지정 가능합니다.
class에는 여러 요소에 같은 이름을 여러번 붙일 수 있습니다.
또한 class 선택자는 하나의 요소에 여러 class명을 부여할 수도 있습니다.
사진을 보면 두개의 "turtle8" 이라는 class명을 가진 상자 두개가 동시에 같은 속성을 부여받아
두개의 상자가 나오는 것을 볼 수 있습니다.