position 속성
position 속성 static: 순서대로 배치 relative: 자신이 원래 위치할 위치를 기준으로 상대적인 위치를 설정할 수 있다. absolute: 기준점에 따라 특별한 위치에 위치시킬 수 있다. 기준점은 상위 엘리먼트들 중에 static이 아닌 position이 기준점이 된다. 현재는 wrap이 position:relative 이기 때문에 기준점이 된다. fixed: 고정된 위치에 위치시킬 수 있다. 예) 따라다니는 광고 소스 HTML static(default) relative(left:10px) absolute(left:130px,top:30px) fixed(top:250px) CSS .wrap { position: relative; } .wrap > div { width: 150px; he..
display 속성
display 주요 속성 block : 블록 처럼 쌓는다. inline : 한 줄로 나란히 배치된다. inline-block : 크기를 유지하면서 나란히 배치된다. 소스 HTML div1 div2 div3 div1 div2 div3 div1 div2 div3 CSS .exam1 { border: 1px solid gray; width: 100px; height: 100px; display: block; } .exam2 { border: 1px solid gray; width: 100px; height: 100px; display: inline; } .exam3 { border: 1px solid gray; width: 100px; height: 100px; display: inline-block; }결과
