기초-레이아웃 기본셋팅값 wrapper에게 주는 기본셋팅값123456789html,body{ width:100%; height:100%}header,section,footer{ overflow:hidden; position:relative; z-index:20;}csoverflow:hidden - 브라우저 해상도에서 넘어가는 지역을 안보이게 처리poistion:relative - 영역을 잡기 위한 기준점 PS. position / float / display 3개의 속성을 정확하게 이해하면 레이아웃 잡을 수 있다. WEB/HTML 8년 전
position-2 위치 지정 예제아래의 위치 지정 예제는 실제 예제에서 쓰기에 좀 더 적절할지도 모릅니다. 다음은 다소 현실적인 페이지 레이아웃입니다..container { position: relative; } nav { position: absolute; left: 0px; width: 200px; } section { /* position is static by default */ margin-left: 200px; } footer { position: fixed; bottom: 0; left: 0; height: 70px; background-color: white; width: 100%; } body { margin-bottom: 120px; }홈타코 메뉴초안 목록시간방향연락처section에 지정한 margin-.. WEB/CSS 8년 전
position-1 position좀 더 복잡한 레이아웃을 만들기 위해서는 position 프로퍼티에 관해 살펴볼 필요가 있습니다. position 프로퍼티에는 다양한 값을 설정할 수 있으며, 각 값의 이름은 제대로 지어지지 않아서 기억하기가 불가능합니다. 그럼 지금부터 하나씩 살펴보기로 하고, 이 페이지를 즐겨찾기에 추가해 둬야 할 수도 있습니다.static.static { position: static; }static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다.relative.relative.. WEB/CSS 8년 전