가변형 웹
max-width : 원래 크기를 기준으로 가장 큰 사이즈로 만듬. 화면이 작아지면 컨텐츠도 작아짐.
em : 폰트 상태 사이즈. 원하는 수치를 16으로 나눈 값
%값 : 절대값 대신 상대적 수치인 %값을 입력하면 역시 가변성 -> 본이 컨텐츠 / 부모 컨텐츠 * 100
line-height 값 적용시 height 값도 같이 적용해주는게 좋다(IE 하위버전)
뷰포트 : 디바이스 해상도에 크기값이 각각 대응되는 메타태그
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
반응형 웹
미디어쿼리 :디바이스 크기에 따라 CSS 적용 여부를 정하는 것
@media screen and (max-width:480px) {
#left_side{float:none; width:100%; margin-bottom:10px;}
#right_side{float:none; width:100%;}
}
웹페이지 제작 순서 PC버전 -> 태블릿 -> 모바일
내용이 너무 많아질 때 absolute를 남용하지 마, 되도록이면 float로 맞추고, 맞추기 애매할 때 position 사용
static 위에 absolute
이전에 작성 위에 나중에z 작성
z-index 값이 큰 거
position:absolute일 경우 float 같이 쓰는건 의미없음(float 적용 안됨)
float 상위 요소에 absolute 적용하면 float 자동 해제됨
cc:ie6 - ie6 조건 주석문 젠코딩
<!--[if lte IE 7]>
<![endif]-->