★ 인접(동등한)한 블록레벨 엘리먼트의 margin-bottom과 margin-top 간의 일어나는 현상.
1.큰값 쪽으로 접혀들어간다.
2. 값이 동일한 경우: bottom(위의 엘리먼트의)쪽의 값에 접혀 들어가서 통합된다.
3. P 엘리먼트 간의 간격을 유지하는 원리를 생각하면 좀 더 쉽게 이해할 수 있다.
※ 마진값은 음수값을 가질 수 있다. (cf. 패딩값은 최소값이 0이고, 음수값을 가질 수 없다.)
- 부모 자식관계의 엘리먼트의 경우에도 collapsing margin이 발생한다.
1. 마진통합현상에서 벗어나려면: border, padding 값을 적용하거나, 부모엘리먼트에 컨텐츠를 넣으면 된다.
- 자식이 인라인엘리먼트인 경우 : collapsing margin은 일어나지 않는다.
이유: css boxmodel의 padding-top, padding-bottom, margin-top, margin-bottom 값이 구현되지 않기 때문에
selectors (선택자)
- ID selectors (id선택자) : css 선언부 : #(파운드) 적용 : di=""
- Class selectors (클래스 선택자) : css 선언부 : . 적용: class= ""
- Universal selector : *(asterisk)
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:
*[lang=fr]and[lang=fr]are equivalent.*.warningand.warningare equivalent.*#myidand#myidare equivalent.
Type selectors (태그선택자):body, p
A type selector matches the name of a document language element type. A type selector matches every instance of the element
type in the document tree.
Example(s):
The following rule matches all H1 elements in the document tree:
h1 { font-family: sans-serif }
- Descendant selectors (하위선택자) : h1 em { color: blue }
At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by whitespace. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.
Example(s):
For example, consider the following rules: h1 { color: red }
em { color: red }
- Child selectors (자식선택자) : body > p { line-height: 1.3 }
- Adjacent sibling selectors (인접선택자)
- Grouping : h1, h2, h3 { font-family: sans-serif } ★ CSS 작성순서
- 1. 웹을 만들 때 항상 적용하게 되는 속성과 값을 미리 정의한다.(초기화한다)
- 2. /* Layout */
- 3. body 안에 마크업된 순서대로 차근차근 작성한다.
HTML마크업은 중요한 컨텐츠가 먼저 마크업되어야 한다.
------------------------------------------------------------------------------------------------------------------
