DIV를 웹화면 중앙에 배치하는 방법에 대하여 알아 보도록 하겠습니다.
블로그를 하거나 웹화면을 만들 때 content 배치를 center 또는 middle로 하고자 할 경우가 있습니다. 그런 경우 간단하게 CSS속성으로 중앙 배치를 할 수 있습니다.
핵심 CSS 태그
- position:absolute;→ 절대 위치를 적용하기 위해 position값을 absolute로 설정 합니다.
- top: 50%; left: 50%;
→ 절대 위치를 위에서부터 50% 되는 지점, 그리고 왼쪽에서부터 50%되는 지점으로 설정합니다.
→ 이렇게 설정하게 되면 중앙에서부터 해당 영역이 시작 됩니다.
- height:300px; width:400px;
→ DIV의 크기를 설정 합니다.
- margin:-150px 0px 0px -200px;
→ 중앙에서부터 시작되는 것을 div이 너비의 반, 높이의 반 위치만큼 왼쪽 그리고 위로 이동 해 줍니다.
※ position속성을 절대위치로 설정하고 DIV 위치를 top, left속성을 이용하여 중앙으로 설정 합니다. 그러나 DIV의 크기에 의해 정중앙 위치가 되지 않습니다. 따라서 margin 속성을 이용하여 DIV의 크기의 절반만큼 반대로 이동 시켜 주게 되면 DIV는 화면의 정중앙에 위치하게 됩니다.또한 브라우저 크기를 조절 해 보아도 중앙을 유지하게 됩니다.
예제소스
<!DOCTYPE html>
<html>
<head>
<title>DIV 화면 중앙에 배치하기</title>
<style>body { padding:0px; margin:0px; }
#divPosition {
background-color: #00D8FF;
border: 1px solid #5D5D5D;
position:absolute;
height:300px;
width:400px;
margin:-150px 0px 0px -200px;
top: 50%;
left: 50%;
padding: 5px;
}</style>
</head><body>
<div id="divPosition">
DIV 화면 중앙에 배치하기 예제1 입니다.
</div>
</body>
</html>
예제결과
이번 시간에는 DIV 가운데 배치하는 방법에 대하여 알아 보았습니다.
2018/03/22 - [프로그래밍/HTML, CSS, JavaScript] - CSS Position 속성 이해하기
2018/03/28 - [분류 전체보기] - [CSS] position:absolute 속성 예제
2018/03/24 - [프로그래밍/HTML, CSS, JavaScript] - [CSS] position:relative 속성 예제
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
HTML/CSS 이미지효과 - 마우스 오버시에 텍스트 보이기 예제소스 (6) | 2018.08.01 |
---|---|
체크박스 클릭 시 해당 테이블 줄 배경색 변경하기 (6) | 2018.07.25 |
[JavaScript] 펼쳐지는 세로 트리메뉴 쉽게 만들기 (3) | 2018.06.25 |
[자바스크립트] 일정간격으로 배경 색 변경하기- setInterval (2) | 2018.06.20 |
[자바스크립트] 현재시간 화면에 표시하기 (4) | 2018.06.20 |