본문 바로가기

HTML / CSS / Java Script

CSS 여백설정방법과 문단 위치조절

여백


여백설정


margin-top, margin-right, margin-bottom, margin-left 속성을 이용하면 테두리에서 부터 바깥여백을 설정할수 잇어요
여백값은 사용하는단위는 $, px, pt등이 있습니다



문단 바깥여백을 한번에 지정할때에 margin 속성을 여백값을 위쪽 오른쪽 아래쪽, 왼쪽순으로 4개를 지정하면되요
상하, 좌우를 각각 같은 값으로 지정할때는 2개만 지정하면됨


<STYLE>
<!-- 
	Selector1 {margin:위쪽 오른쪽 아래쪽 왼쪽 여백순}
	Selector2 {margin:상하여백 좌우여백}
-->
</STYLE>

{margin:100px 150px 10px 100px;}
{margin: 50px 40px;}


padding속성을 이용하면 안쪽여백을 설정할수 있어요
사용법은 margin 지정하는거랑 같아요


top와 left속성을 사용하면 웹브라우저에 문단위치를 설정할수 있다
또 wifth와 height속성을 이용하면 무단의 폭과 높이설정도 가능하다
무단위치와 크기를 지정하는 속성은 position속성과 함께 사용하고 DIV태그에 적용합니다.


 
<STYLE>
<!-- 
	Selector {position:absolute; top:50px; left:30px; width:600px; height:300px;}
-->
</STYLE>

position 속성옵션

static : 자유로운 문단 배치에 사용함, 이동성이없기때문에 top, left속성에 적용할수없다
relative : 상대적위치를 지정하며 컨텐츠가 위치해있는 곳에서 문단을 시작함 top, left속성을 사용할때 브라우저가 아닌 현자 컨텐츠가 잇는곳을 0, 0으로 하여 기준함
absolute : 절대적위치를 지정하고 top, left속성은 브라우저 왼쪽모서리를 0, 0으로 기준함