1.블록요소
블록 요소는 모든 인라인 요소를 포함 할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태 가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는줄바꿈 이 이루어 집니다.
HTML5의 블록요소 종류
address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, hea
der, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video
2.인라인 요소
인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다. 그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다. 그래서 임의로 width, height로 변형을 줄 수가 없습니다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌,우측 정렬을 할 수 있습니다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 됩니다.
HTML5의 인라인 요소 종류
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var
3. CSS 우선순위
1) 명시도 (specificity)
: 같은 요소를 가리키는 여러개의 스타일(선택지)가 있을 경우 명시도에 따라 우선순위가 결정됨.
명시도가 높을 수록 우선순위가 높음
2) 여러 선택자가 같은 요소를 가리키면?
완전 똑같은 선택자가 나중에 또 나오면 이전에 나온 스타일을 덮어쓰게 됨.
>>> 같은 요소를 가리키지만 선택자가 다르다면, '명시도'에 따라 우선 순위가 결정됨.
3) 명시도가 높은 순서
1. 인라인 스타일이 가장 우선 순위가 높습니다.
2. 선택자에 id가 많을 수록 우선 순위가 높습니다.
3. 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높습니다.
4. 그 다음은 그냥 요소(또는 가상 요소)가 많은 순서입니다.