beepbeep

선택자에도 우선순위가 있다! 만약 한 요소가 여러 선택자에 의해 선택되었고, 그래서 동일한 종류의 css 속성을 여러 개 적용받게 되었다면 선택자의 우선순위에 따라서 우선순위가 높은 선택자의 css 속성을 적용받는다 1. !important; 속성을 가진 css 효과 2. inline-style 직접 3. id 선택자 4. class 선택자 5. 태그 선택자 같은 우선순위 안에서는 가장 아래쪽에 위치한 효과가 적용된다. css 연습을 할 때 선택자의 우선순위를 신경쓰지 않아 css 효과가 원하는대로 적용되지 않는 경우가 있었다... 항상 우선순위에 주의해서 작성해야겠다.

가상 클래스 선택자 가상 클래스(Pseudo-class)는 요소의 특별한 상태를 가리키는 키워드입니다. 가상 클래스를 선택자와 함께 사용하면, 요소가 특별한 상태일 때 CSS가 적용되게 할 수 있습니다. 1. 일반 구조 선택자 2. 형태 구조 선택자 3. 부정 선택자 4. 반응 선택자 5. 상태 선택자 1. 일반 구조 선택자 선택자:first-child 해당 요소의 형제 요소 중 첫 번째 요소가 지정한 '선택자'와 같은 경우 선택합니다. 선택자:last-child 해당 요소의 형제 요소 중 마지막 요소가 지정한 '선택자'와 같으면 선택합니다. 선택자:nth-of-child(n) 해당 요소의 형제 요소 중 n번째 요소가 지정한 '선택자'와 같으면 선택합니다. 선택자:nth-of-last-child(n) n..

자식 선택자 후손 선택자 동위 선택자 1. 자식(자손) 선택자 부모 요소 > 자식 요소 자식 선택자는 특정 요소의 바로 아래 요소인 자식 요소를 선택하는 선택자입니다. ' > ' 기호를 사용해 양쪽 요소의 부모 자식 관계를 표현합니다. 자식 요소를 선택할 때는 태그, class, id, 속성 선택자 등을 사용할 수 있습니다. 강아지 강아지는 개과 동물입니다. 고양이 고양이는 고양이과 동물입니다. 판다 판다는 곰과 동물입니다. 위의 예시에서, 은 의 자식 요소입니다. 따라서 자식 선택자를 이용해 요소를 선택하고 싶다면 다음과 같이 작성할 수 있습니다. fieldset > ul{ font-weight: bold; } 그런데 자식 선택자는 부모 요소 바로 아래에 위치한 요소만을 선택할 수 있습니다. field..

CSS 선택자란? HTML 문서에 작성한 요소에 CSS효과를 적용하려면 효과를 적용할 특정한 요소를 선택해야 합니다. 이 때, 특정 요소를 선택하기 위해 사용하는 것을 CSS 선택자라고 합니다. 태그 선택자 id 선택자 class 선택자 속성 선택자 전체 선택자 안녕하세요. CSS를 공부하고 있습니다. 감사합니다. 2022년 10월 9일 드림 1. 태그 선택자 선택자의 종류에는 여러가지가 있는데, 기본적으로 태그 이름을 선택자로 사용할 수 있습니다. 예를 들어, 위에 보여드린 에서 태그로 묶인 문단의 글자 색을 바꾸고 싶다면 p{ color: red; } 태그 이름인 p를 적고 중괄호를 연 후 CSS코드를 작성하면 p태그의 글자 색이 빨간색으로 바뀌게 됩니다. 이 때 CSS 효과는 문서 내에 있는, 동일..