선택자

[CSS] CSS의 다양한 선택자(selector)

1. 단일 선택자(simple selector) 선택자(selector)가 지정하는 요소(element) 혹은 개체(node)가 단일임을 지칭한다. 단일 선택자라 할지라도 적용 받는 태그의 수는 여러개일 수 있다. 태그 선택자(element selector) HTML 요소의 이름을 직접 사용하여 선택한다. p { color: red; text-align: center; } /* 페이지의 모든 요소는 빨간색 텍스트 색상으로 가운데 정렬된다. */ id 선택자(id selector) 특정 id 속성을 가진 HTML요소를 선택한다. (중복된 id 속성은 선택자 사용에 혼란을 줄 수 있으므로 지양한다.) #para1 { text-align: center; color: red; } /* id="para1"인 모든..

[CSS] CSS란?

CSS란? CSS (Cascading Style Sheets) CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. 오로지 디자인을 위한 언어이기 때문에 HTML을 이용하여 스타일 작업을 하는 것보다 훨씬 효율적이고, 유지보수에 용이하다. CSS 문법 /* 예시 */ p { color: red; text-align: center; } 예시) 모든 요소는 빨간색 텍스트 색상으로 가운데 정렬된다. CSS 선택자 스타일 작업은 문서의 상단부터 하단 순서로 적용되기 때문에 선택자의 활용을 어떻게 하느냐에 따라 코드의 효율성이 달라진다. 스타일을 적용할 HTML 요소를 가리키는 선택자(selector)는 다음과 같다. 단일 선택자(태그 선택자, class 선택자..

[TIL] CSS 선택자

✍ Today I Learned CSS의 결합 선택자, 의사 선택자 등 선택자에 대해 자세히 알게 되었다. 매번 감으로 썼었는데..! 사용 기호 명칭 설명 , 그룹 선택자 여러 선택자 같이 사용 (공백) 자손 선택자 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택 > 자식 선택자 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택 태그.클래스 특정 class 속성을 가진 요소 중 특정 HTML 요소만 클래스의 영향을 받도록 지정 :nth-child() 의사 선택자 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택 :not(선택자) 의사 선택자 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함 [속..