728x90
반응형
ID 선택자
HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
HTML 요소에 "id"로 이름을 붙을 때는 유일한 이름을 부여 해야 하며, 다른 요소에 같은 id명을 주어서는 안된다.
See the Pen Untitled by jhwangwoo (@jhwangwoo) on CodePen.
예제를 보면 p태그 중 id 가 'ctxt'인 요소만 색을 파란색으로 표시 하도록 하였습니다. 그리고 id가 'txt'인 p요소는 id만 주어졌을뿐 스타일에 따로 지정된 색이 없어 p요소에 처음 지정된 빨간색으로 표시가 되었습니다.
ID 선택자
HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다.
HTML요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다.
여러 개의 요소에 같은 class명을 부여할수 있고, 하나의 요소에 여러 개의 class명을 부여할 수도 있습니다.
CSS에서는 class 선택자 앞에 '.'을 붙여야 합니다. class명도 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다.
See the Pen Untitled by jhwangwoo (@jhwangwoo) on CodePen.
예제를 보면 class가 btxt인 모든 요소는 빨간색으로, class가 ctxt인 모든 요소는 파란색으로 표시 하도록 하였습니다.
여기서 또 세번째 p요소에만 글자를 굵게 표시하는 font-weight: bold;를 넣었다.