Position 화면 정 중앙에 위치시키기
로빈아빠
본문
박스가 화면에서 어떻게 나타나고 그 위치를 지정하는 방법을 정하는 속성
static
텍스트나 주변 박스에 따라서 움직이는 보통의 박스. 기본값
relative
처음 박스가 화면에 나오는 위치에서 지정된 오프셋(offset)만큼 위치가 변경됨. 화면에서 공간을 차지함.
absolute
상위 엘리먼트의 좌측상단을 기준점으로 하여 지정된 오프셋 만큼 위치가 변경됨.지정. 화면에서 공간을 차지 하지 않음. 보통 레이어라고 말하는 것은 이 절대위치 속성을 이용한 박스를 말함.
fixed
브라우저 화면을 기준으로 스크롤에 따라 움직이지 않는 위치를 지정. 인터넷 익스플로러에서는 지원되지 않음
인터넷 익스플로러의 Fixed Position 구현
인터넷 익스플로러는 position: fiexd 를 지원하지 않는다. 이것을 javascript 로 해결하는 방법이다.
관련 링크
Fixed positioning
화면 정 중앙에 위치시키기
화면의 중앙에 블록을 위치 시키기 위해서는 약간의 제약사항이 있다. 일단, 중앙에 위치하게 되는 block의 크기가 유동적이면 안된다. 그리고 브라우져 화면의 크기가 block의 크기보다 작아지게 되면 일부 영역이 화면 밖으로 넘어가 되어서 보이지 않는 부분도 생기게 된다. 화면의 중앙에 정렬하겠다는 것은 사용자 환경을 고려하지 못한 포지셔닝이기 때문에 특별히 스펙에서 정의하지 않은 것으로 생각 된다. 좀 불편하기는 하다. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>박스를 화면 중앙에 정렬하기</title>
<style type="text/css">
html,
body {
height: 100%; /* body와 html의 높이를 100% 로 지정 */
margin: 0;
padding: 0;
}
#center {
width: 200px; /* 폭이나 높이가 일정해야 합니다. */
height: 200px; /* 폭이나 높이가 일정해야 합니다. */
position: absolute;
top: 50%; /* 화면의 중앙에 위치 */
left: 50%; /* 화면의 중앙에 위치 */
margin: -100px 0 0 -100px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */
border: 1px inset #ddd;
}
</style>
</head>
<body>
<h1>박스를 화면 중앙에 정렬하기</h1>
<div id="center">
센터정렬 박스
</div>
</body>
</html> 참조: http://hyeonseok.com/pmwiki/index.php/Css/Position
static
텍스트나 주변 박스에 따라서 움직이는 보통의 박스. 기본값
relative
처음 박스가 화면에 나오는 위치에서 지정된 오프셋(offset)만큼 위치가 변경됨. 화면에서 공간을 차지함.
absolute
상위 엘리먼트의 좌측상단을 기준점으로 하여 지정된 오프셋 만큼 위치가 변경됨.지정. 화면에서 공간을 차지 하지 않음. 보통 레이어라고 말하는 것은 이 절대위치 속성을 이용한 박스를 말함.
fixed
브라우저 화면을 기준으로 스크롤에 따라 움직이지 않는 위치를 지정. 인터넷 익스플로러에서는 지원되지 않음
인터넷 익스플로러의 Fixed Position 구현
인터넷 익스플로러는 position: fiexd 를 지원하지 않는다. 이것을 javascript 로 해결하는 방법이다.
관련 링크
Fixed positioning
화면 정 중앙에 위치시키기
화면의 중앙에 블록을 위치 시키기 위해서는 약간의 제약사항이 있다. 일단, 중앙에 위치하게 되는 block의 크기가 유동적이면 안된다. 그리고 브라우져 화면의 크기가 block의 크기보다 작아지게 되면 일부 영역이 화면 밖으로 넘어가 되어서 보이지 않는 부분도 생기게 된다. 화면의 중앙에 정렬하겠다는 것은 사용자 환경을 고려하지 못한 포지셔닝이기 때문에 특별히 스펙에서 정의하지 않은 것으로 생각 된다. 좀 불편하기는 하다. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>박스를 화면 중앙에 정렬하기</title>
<style type="text/css">
html,
body {
height: 100%; /* body와 html의 높이를 100% 로 지정 */
margin: 0;
padding: 0;
}
#center {
width: 200px; /* 폭이나 높이가 일정해야 합니다. */
height: 200px; /* 폭이나 높이가 일정해야 합니다. */
position: absolute;
top: 50%; /* 화면의 중앙에 위치 */
left: 50%; /* 화면의 중앙에 위치 */
margin: -100px 0 0 -100px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */
border: 1px inset #ddd;
}
</style>
</head>
<body>
<h1>박스를 화면 중앙에 정렬하기</h1>
<div id="center">
센터정렬 박스
</div>
</body>
</html> 참조: http://hyeonseok.com/pmwiki/index.php/Css/Position
관련링크
댓글목록
등록된 댓글이 없습니다.