Developer Gonie

선택자 간의 우선순위 상속을 받으면 여러개의 영향을 동시에 받을 때가 있는데, 선택자들 간에는 우선순위가 존재하여 우선순위가 가장 높은 하나만 실제 적용된다. 이들 간의 우선순위는 다음과 같다. !important > 인라인 스타일 방식(style="") > id 선택자 > 클래스=속성=가상 선택자 > 태그 선택자 > 전체 선택자 대체로 지정 범위가 넓은 것의 우선순위가 낮은 것을 알 수 있다. 단, 조상의 것을 상속받은 상태에서 선택자로 다시한 번 지정해주면 이게 덮어쓰기가 되나봄(아래에서 p 태그가 그 예시) !important 를 사용하면 아무리 우선순위가 낮은 인라인 스타일 방식이더라도 최우선순위로 지정 된다. 실제 예시

상속 부모 요소에서 지정한 속성이 그대로 자손 요소들에게 적용되는 것을 상속이라고 한다. 상속을 받으면 여러개의 영향을 동시에 받을 때가 있는데, 선택자들 간에는 우선순위가 존재하여 우선순위가 가장 높은 하나만 실제 적용된다. 선택자들 간의 우선순위에 대한 글을 아래 게시물을 참고 https://ldgeao99-developer.tistory.com/367 예시 css 코드에서 id가 cookingSrc 인 요소 즉, div 요소에만 지정하여 글씨를 빨간색으로 적용시켰는데 div 하위에 있는 자손들 h2, p, span 모두에게도 같은 효과가 적용된 것을 볼 수 있는데 이것은 상속이 이뤄졌기 때문에 그런것이다.

하이퍼링크 관련, 가상 클래스 선택자 하이퍼링크 걸려있는 부분에 대해, 마우스 포인터의 접근 상태에 따라 서로 다른 디자인을 주고자 할때 사용된다. class 속성을 설정한 것 처럼 동작하여 붙여진 이름이다. /* 아직 방문하지 않는 것에 대해서 마우스를 올려두면 연두색으로 형광펜이 쳐짐 */ a:link{ background-color: #cf3; } /* 한 번 방문한 것에 대해서 마우스를 올려두면 핑크색으로 형광펜이 쳐짐 */ a:visited{ background-color: pink; } 사용예시

자손 결합자 부모의 한다리 건너를 포함, 두다리, 세다리 쭈욱 모든 자손을 지정하는 선택자이다. ' ' 스페이스를 자손 결합자라고 하며 인자는 2개 이상이 될 수 있으며, 그 인자는 요소(태그) 이거나 다른 선택자일 수 있다. /* dl요소의 한다리, 두다리, 세다리 쭈욱 모든 자손중에 span인 요소를 모두 지정하는 선택자이다. */ dl span{ } /* 자손결합자의 인자로 id선택자와 요소를 같이 사용한 예시*/ #mylove li span{ } ... 재료 쇠고기 200g, 다진 파 1큰술, ..., 튀김기름 감자 1개 두부 1/2모 사용예시

자식 결합자 부모의 바로 아래, 즉, 한다리 건너에 위치한 자식요소만을 지정하는 선택자이다. 부모의 바로 아래 위치한 자식이 아니라 두 다리 건너에 위치한 자식 요소는 선택이 불가능 하다.(동작안함) '>' 를 자손 결합자라고 하며 인자는 2개 이상이 될 수 있으며, 그 인자는 요소(태그) 이거나 다른 선택자일 수 있다. /* h2요소의 바로아래 자식 span만을 지정 */ h2 > span{ } /* dl요소의 바로아래 자식 dt만을 지정 */ dl > dt{ } /* dl요소의 바로아래 자식 dd만을 지정(단, dd 안쪽의 span은 dd의 영향을 상속받아 같이 적용됨) */ dl > dd{ } /* dl요소 바로 아래 속한 자식이 아니라 작동 안됨 */ dl > span{ } /* span을 지정하..

그룹 선택자 태그(요소) 혹은 선택자들을 ',' 를 사용하여 나열하여 이들 모두에 공통으로 해당하는 CSS 코드를 작성할 수 있는 방식이다. 사용예시

전체 선택자 html 파일내에 존재하는 모든 태그(요소)를 한 번에 지정한다. 사용예시

속성 선택자 * Jquery의 filter, not의 인자로 사용되기도 함 1) 특정 태그가 특정 속성을 가지는 것들을 모두선택 2) 특정 태그가 특정 속성을 가지며, 그 속성에 지정한 값이 완전히 일치하는 것들을 모두선택 3) 특정 태그가 특정 속성을 가지며, 그 속성에 지정한 값이 내가 적어준 값으로 시작하는 것들을 모두선택 4) 특정 태그가 특정 속성을 가지며, 그 속성에 지정한 값이 내가 적어준 값으로 끝나는 것들을 모두선택 5) 특정 태그가 특정 속성을 가지며, 그 속성에 지정한 값이 내가 적어준 값을 포함하는 것들을 모두선택 /* 1번 케이스: 특정 태그가 특정 속성을 가지는 것들을 모두선택 */ a[target] { } /* 2번 케이스 : 특정 태그가 특정 속성을 가지며, 그 속성에 지정한..

id 선택자 특정 태그에 id 속성값으로 id를 붙여주고, 이 id로 지정할 범위를 선택하는 것을 id 선택자라고 한다. 클래스 선택자와 구분되는 점으로 중복되는 id를 지정할 수 없으며, 이 이유로 단 1개의 요소에만 적용할 때 사용된다. 중복이 존재한다고 오류는 나지 않지만 사용해야 하는 방식을 따르자. #box1 { } ... 재료-4인분 기준 id 선택자의 잘못된 사용(class 선택자와 id 선택자의 차이) 아래와 같이 같은 요소들이 존재할 때, 그중 하나의 요소에 대해서만 단 하나의 id를 부여해야 한다. abcdefg abcdefg abcdefg 사용예시

클래스 선택자 특정 태그에 class 속성값으로 이름을 붙여주고, 이 이름으로 지정할 범위를 선택하는 것을 클래스 선택자라고 한다. id 선택자와 달리 중복으로 여러곳에 지정하고 싶을 때 사용된다. (java에서 말하는 class와는 전혀 상관이 없고, class 속성은 이름을 붙여주기 위한 속성이라고 생각하면 됨) .cook1 { } ... 밀가루 3컵 사용예시

태그 선택자 '태그 선택자' 혹은 '요소 선택자' 라고도 하며, 태그 1개를 이용해서 작성한다. 1개의 태그를 명시하며, 이에 해당하는 모든 태그를 선택함. h3 { } 사용예시

CSS 선택자 CSS선택자는 CSS 규칙을 적용할 요소를 정의합니다. 기본선택자(인자로 요소만 가능) 1. 태그 선택자 : 1개의 태그를 명시하며, 이에 해당하는 모든 태그를 선택 2. 클래스 선택자 : 중복으로 여러곳을 선택 가능 3. id 선택자 : 단 한 곳만을 선택 가능 4. 속성 선택자 : 속성의 이름 및 그의 값을 이용한 선택 방법 5. 전체 선택자 : * 을 사용하며, 전체 요소를 지정한다. 그룹선택자(태그 뿐 아니라 다른 선택자들도 나열 가능) 6. 그룹 선택자 : 태그(요소) 혹은 선택자들을 ',' 를 사용하여 나열하여 이들 모두에 공통으로 해당하는 CSS 코드를 작성 결합자(태그 뿐 아니라 다른 선택자들도 인자로 사용가능) 7. 자식 결합자 : 부모의 바로 아래, 즉, 한다리 건너에 위..