[웹개발] CSS 크기설정 및 위치설정하기
안녕하세요
로로봉입니다 : )
오늘은 CSS를 이용해 크기 설정 및 위치 설정하는 방법을 알아보도록 하겠습니다.
1) 크기 제어하기
크기는 가로와 세로로 width와 height 속성으로 설정합니다.
값의 단위는 px, cm, pt, % 등을 사용할 수 있습니다.
<input type="button" value="px버튼" style="width:50px;height:50px"/><br/>
<input type="button" value="%버튼" style="width:50%;height:50%"/><br/>
<input type="button" value="cm버튼" style="width:2cm;height:1cm"/><br/>
<input type="button" value="pt버튼" style="width:50pt;height:50pt"/><br/>
2) 위치 제어하기
HTML 태그들의 위치는 position 속성으로 설정할 수 있습니다.
position 속성의 값은 static, relative, obsolute, fixed 로 설정합니다.
① static
static은 HTML 요소의 위치를 페이지 흐름대로 배치됩니다.
HTML은 위치에 대한 설정을 하지 않으면 앞 부터 순차적으로 배치되며, 이는 position의 기본 값이 static이기 때문입니다.
② relative
relative는 상대 위치를 설정합니다.
바로 앞에 있는 HTML 요소를 기준으로 설정한 위치를 이동하게 됩니다.
p {
position:relative;
top:30px;
left:30px;
}위처럼 <p> 태그를 상대위치로 설정하게 된다면 바로 앞에 어떤 태그가 오든 그 태그로부터 위쪽 30px, 왼쪽 30px의 위치에 <p>태그가 위치하게 됩니다.
③ absolute
absolute는 절대 위치를 설정합니다.
상대 위치와는 다르게 브라우저 윈도우의 가증 왼쪽 상단을 기준으로 위치가 지정됩니다.
④ fixed
fixed는 화면이 이동되어도 항상 동일한 위치에 배치됩니다.
즉 스크롤을 내려도 fixed로 설정된 요소는 스크롤 위로 올라가는 것이 아닌 그 위치에 고정됩니다.
※ z-index
z-index는 한 위치에 여러 HTML 요소가 겹칠 때 어떤 요소를 아래 쪽으로 배치할 것인지 순서를 정하는 속성입니다.
z-index 값이 클수록 위로 배치됩니다.
<head>
<style>
div.a{
position:absolute;
top:50px;
left:100px;
background-color:yellow;
width:200px;
height:100px;
z-index:2;
}
div.b{
position:absolute;
top:60px;
left:110px;
background-color:green;
width:200px;
height:100px;
z-index:1;
}
</style>
</head>
<body>
<div class="a">z-index 테스트</div>
<div class="b">뒷 배경</div>
</body>
좋아요♥ + 구독 부탁드립니다 : )