웹/HTML|CSS|JAVASCRIPT

css를 이용해 페이지 전체넓이 축소와 가운데 정렬하는 방법

프룹 2016. 12. 28. 15:47
반응형

오늘은 홈페이지의 페이지 전체 넓이와 가운데 정렬하는 방법을 알아보려고 합니다.

홈페이지를 만들었는데 화면에 너무 꽉차서 부담스러운경우 하나하나 수정하기도 힘들고 

놓칠 수 있는데 이때 body영역을 수정해주면 한번에 해결될 수 있습니다. 


이 사진을 보시면 지금 빨강과 파란색이 화면 전체를 차지하고 있음을 알 수 있습니다. 지금 소스코드는


CSS 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 body{
}
.a01 {
    width:2000px;
    max-width: 100%;
    height: 500px;
    background-color: red;
}
 
.a02 {
    width:2000px;
    max-width: 100%;
    height: 500px;
    background-color: blue;
}
cs


HTML 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
 
<html>
    <head>
        <title>css에서 화면 위치 지정 연습</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body>
    <div class="a01"> 영역 </div>
    <div class="a02"> 영역 <div>
    </body>
 
cs

네 현재소스코드는 이렇게 구성되어있습니다.


현재상황에서 화면 넓이 축소를 해보이겠습니다.






 소스코드를 보여드리겠습니다.


CSS 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
    max-width: 100%;
    width: 1400px;
}
.a01 {
    width:2000px;
    max-width: 100%;
    height: 500px;
    background-color: red;
}
 
.a02 {
    width:2000px;
    max-width: 100%;
    height: 500px;
    background-color: blue;
}
cs

현재 CSS에서 body에 제가 두개의 코드만을 추가했습니다.
그랬더니 html에서 body태그 안에 있는 모든 태그의 영역이 축소되었음을 알 수 있습니다.


이제 마지막으로 이 화면을 가운데 정렬 하는 방법을 알려드리겠습니다.


CSS 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
    max-width: 100%;
    width: 1400px;
margin-left: auto;
margin-right: auto;
}
.a01 {
    width:2000px;
    max-width: 100%;
    height: 500px;
    background-color: red;
}
 
.a02 {
    width:2000px;
    max-width: 100%;
    height: 500px;
    background-color: blue;
}

cs


네 방금의 css코드에 margin값에 auto속성을 부여해주면 다음과 같이 화면이 가운데로 정렬됨을 알 수 있습니다.






반응형
저작자표시