html 주의점

박스요소

-마진 병합은 y축만 된다

-한 영역의 넓이 = width + margin + padding + border

-%값은 부모 요소에 비례

-span 안에 div 안됨

-margin ,padding 등 박스요소는 상속이 안됨

 

font

-font-family 와 generic family  반드시 두개 선언

-font 속성의 맨 마지막은 generic-family

-'돋움' ,dotum 처럼 한글서체는 영어로도 표기

-자식 요소에서 font-family 재선언 시 generic-family도 다시 선언

 

정렬

-line-height 는 인라인에만 적용됨

-text-align 도 인라인에만 적용됨

 

display

-inline에서는 width 와 height 가 적용 안됨 = 부모요소에 적용 안됨

-inline 에서는 margin, padding,border 는 좌,우에만 적용됨

-inline 에서는 개행, 공백 존재시  font-size에 비례해 여백 생김  16px은 4px정도

-inline-block도 마찬가지 여백 생성됨

-inline 내에 block오면 안됨

-span 에 display:block 해도 안됨

-inline-block : 배치는 inline ,속성은 block

 

visibility

-hidden 은 margin영역까지 공간을 둠

 

float

-공간은 차지하되 z축으로 떠 있음

-글자는 뜬 공간 주변으로 붙는 특성

-대부분의 요소 block화

 

clear

-block 레벨만 사용 가능

-inline 요소는 display: block 을 해야 사용 가능

-부모 요소에 clear 하는 대신  공백 <div>에 clear 를 주는 방법도 있다

 

position 

-relative 는 기준. top bottom 값 조정은 어찌보면 기준 위치 조정

-realtive의 기준점은 relative요소의 시작점

-absolute 시 부모, 아님 그 위의 부모에 position이 없으면 body가 기준

-부모요소에 position : static이 아닌 position 속성값이 존재시 그 요소가 기준

-absolute 시작점은 기준의 padding 시작 위치

-absolute 는 block 요소가 된다. span에 absolute를 줬다면 display:block 이 된다.

-absolute는 절대위치, 때문에 형제 요소들은 붙어버린다.

-fixed 는 브라우저 기준. 부모와는 상관 없음

-fixed 역시 block 요소화 된다

 

overflow

-overflow는 독립적인 공간을 만드는 설정

-float 배경 문제 해결시 사용 가능

 

미디어 쿼리

표현식 and 는 and 앞과 뒤가 다 충족되어야 함

표현식 , 은 or의 역할

not은 가장 마지막에 해석됨