Web/css (9) 썸네일형 리스트형 8. 속성 선택자 ✔️ 속성 선택자속성 선택자(Attribute Selector)는 특정 HTML 요소가 특정 속성을 가지고 있는지 여부에 따라 해당 요소를 선택하는 CSS 선택자이다. 속성 선택자는 대괄호 [] 안에 속성 이름과 속성 값 또는 일치하는 부분을 지정하여 사용된다. 속성 선택자 네이버 속성명과 속성값이 모두 일치하는 요소를 선택자로 지정 👇 7. 일반 인접 형제 선택자 ✔️ 일반 인접 형제 선택자일반 형제 선택자(General Sibling Selector)는 CSS에서 특정 요소의 모든 형제 요소를 선택하는 선택자이다. 선택자를 사용하여 특정 요소의 형제 요소 중에서 특정한 형제에 스타일을 적용할 수 있다. 인접 형제 선택자(Adjacent Sibling Selector)는 CSS에서 특정 요소의 바로 뒤에 나오는 형제 요소를 선택하는 선택자이다. 선택자를 사용하여 특정 요소의 바로 뒤에 나오는 형제에 대해 스타일을 적용할 수 있다. 일반 형제 선택자 첫째 둘째 셋째 넷째 다섯째 여섯째 .. 6. 자식 자손 선택자 ✔️ 자식 자손 선택자자식 선택자(Child Selector)는 CSS에서 특정 부모 요소의 직계 자식 요소를 선택하는 선택자이다. 자식 선택자를 사용하면 부모 요소의 직계 자식에만 스타일을 적용할 수 있다. 자손 선택자(Descendant Selector)는 CSS에서 특정 조상 요소 내에 있는 모든 하위 요소를 선택하는 선택자이다. 자손 선택자를 사용하면 모든 하위 요소에 스타일을 적용할 수 있다. 자식 자손 선택자 네이버 구글 다음 네이트 👇 5. 그룹 선택자 ✔️ 그룹 선택자그룹 선택자는 동일한 스타일을 여러 선택자에 적용하기 위해 사용된다. 여러 선택자를 쉼표로 구분하여 그룹을 형성하고, 해당 그룹에 동일한 스타일을 적용할 수 있다. 이는 코드를 간결하게 유지하고 일관된 스타일을 적용하는 데 유용하다. 그룹 선택자 여러개의 요소를 나열하고 ,(콤마)로 구분하여 스타일을 적용 선택자의 종류 전체 선택자 요소 선택자 아이디 선택자 클래스 선택자 그룹 선택자 👇 4. class 선택자 ✔️ class 선택자CSS 클래스 선택자는 특정한 클래스를 가진 HTML 요소를 선택하여 해당 요소에 스타일을 적용하는 데 사용된다. 클래스는 여러 요소에 동시에 적용할 수 있으며, 동일한 클래스를 여러 요소에 사용할 수 있다. 클래스 선택자는 마침표(.)로 시작하며, 클래스 이름은 마침표 이후에 나온다. class 선택자 클래스 선택자는 특정 집단의 요소를 한번에 스타일을 적용 . 기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용 👇 3. id 선택자 ✔️ id 선택자ID 선택자는 CSS에서 특정 HTML 요소를 선택하여 해당 요소에 스타일을 적용하는 데 사용되는 선택자이다. ID는 HTML 요소에 고유한 식별자를 부여하며, 이 식별자는 CSS에서 # 기호를 사용하여 선택자로 지정된다. id 선택자 div 첫번째 영역 div 두번째 영역 👇 2. 요소 선택자 ✔️ 요소 선택자요소 선택자(Element Selector)는 CSS에서 가장 기본적인 선택자 중 하나로, 특정 HTML 요소를 선택하여 해당 요소에 스타일을 적용하는 데 사용된다. 요소 선택자는 해당 요소의 이름을 직접 사용하여 선택한다. 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용 span 요소 strong 요소 ins 요소 👇 1. 전체 선택자 ✔️ 전체 선택자전체 선택자(*)는 HTML 문서 내의 모든 요소를 선택하는 CSS 선택자이다. 이 선택자를 사용하면 모든 HTML 요소에 동일한 스타일을 적용할 수 있다. 전체 선택자 스타일을 모든 요소에 적용 * 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 👇 이전 1 2 다음
