스타일 우선 적용 구체성 / 상속
구체성 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대한 규정이 존재하는데 이를 '구체성'이라 한다. 동일한 선택자에 동일한 속성이라고 해도 보다 구체적으로 선택자를 선언한 태그에 우선권을 부여한다. 구체성의 값이 클수록 우선을 적용된다. 구체성은 4개의 숫자 값으로 구성된다. 0,0,0,0 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소 전체 선택자는 0, 0, 0, 0을 가진다. 조합자는 구체성에 영향을 주지 않는다. (>, + 등) 선택자의 구체성 값을 잘 알아야 많은 스타일 규칙들을 정의할 때 의도하지 않은 일이 생기지 않습니다. h1 ..
2019. 7. 23.
부모,자식,형제 / 자손 선택자, 자식선택자, 인접 형제 선택자
부모와 자식 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐 자식 요소는 부모 요소와 반대. 되며 자식 요소는 여러 개 html > body > p, div > h1 > span 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 조상과 자손 조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개 자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소 html > body > p, div > h1 > span 의 조상 요소: ↔ 의 자손 요소: , , , , 의 조상 요소: , ↔ 의 자손..
2019. 7. 23.
블록 레벨 / 인라인 레벨
블록 레벨 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소. 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함 " div, h1~h6, p, ul, li, table ..." 인라인 레벨 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리 가능 블록 레벨 요소의 자식으로 분류되기 때문에 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없음 단, 는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있음 " span, i, img, em, strong, a ..."
2019. 7. 23.
