CSS 검색 결과

해당 글 86건

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 2016. 12. 6. 17:13

position-1

position좀 더 복잡한 레이아웃을 만들기 위해서는 position 프로퍼티에 관해 살펴볼 필요가 있습니다. position 프로퍼티에는 다양한 값을 설정할 수 있으며, 각 값의 이름은 제대로 지어지지 않아서 기억하기가 불가능합니다. 그럼 지금부터 하나씩 살펴보기로 하고, 이 페이지를 즐겨찾기에 추가해 둬야 할 수도 있습니다.static.static { position: static; }static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다.relative.relative..
WEB/CSS 2016. 12. 6. 17:11

box-sizing

box-sizing오랜 시간에 걸쳐 사람들은 너비값을 조절하는 해법이 그다지 만족스럽지 않다는 사실을 깨닫고 box-sizing이라고 하는 새로운 CSS 프로퍼티를 만들어냈습니다. 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다. 다음은 이전 페이지와 동일한 예제이지만 두 엘리먼트에 모두 box-sizing: border-box;를 지정했습니다..simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; pa..
WEB/CSS 2016. 12. 6. 17:08