HTML.CSS. 마크업할 때, 클론코딩할 때 주의할 점

종합적 주의점

 

html 마크업 시 1200px이상 사진 x

섹션 태그 사용(title 필수) / div.container가 자식으로.

Width 지정된 박스 중앙으로 ➡️ margin: 0 auto;

화면 너비 100%가 아닌 경우 div.center 잊지말 것 (.inner라고 생각할 것)

문단 간 여백은 Margin-bottom 기본

z-index 마이너스값은 body 밑으로 들어감

 

 

FLOAT 주의점

 

Float :레이아웃의 기본, float은 자식이 아닌 형제에게.

Float 세로 정렬 불가능

width 필수 : 너비 고정해야 하는 요소에 사용

 

 

POSITION 주의점

Position 상하좌우 좌표 지정 필수

Position:relative; 단독 사용할 경우: 원래 배치 영역을 기준/ float 동시 사용 가능➡️float시킨 자식을 부모요소에서 빠져나오게 하는 기능

Position:absolute; 높이 고정할 수 없는 컨텐츠에 이용 ❎

 

 

세로정렬:

{position:absolute; top:50%; margin-top:-(요소1/2)px;} 혹은 {display:table-cell;vertical-allign:middle;}

 

 

DISPLAY 주의점

 

Display:inline; width height margin 지정 불가. 텍스트 링크의 경우에 사용(주로 푸터)

메뉴의 a 블록화 시킬것✅ : 내부 내용만 적용시킬것 (예: 폰트사이즈, 패딩,컬러, 텍스트얼라인,배경)

display:inline 은 상하 margin이 무효

 

display:block; 요소의 사이즈가 필요할때, vertical-align은 무효