본문 바로가기
웹/HTML|CSS|JAVASCRIPT

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

by 프룹 2016. 12. 28.
반응형

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

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

놓칠 수 있는데 이때 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속성을 부여해주면 다음과 같이 화면이 가운데로 정렬됨을 알 수 있습니다.






반응형
저작자표시

'웹 > HTML|CSS|JAVASCRIPT' 카테고리의 다른 글

[JS] Input 숫자에 단위(콤마 ,) 넣는 방법  (2) 2023.02.03
[HTML5] 다른 하드 드라이브의 파일을 읽어오는 경로 설정 방법 (Feat. 동영상 재생)  (0) 2021.12.23

관련글

댓글

티스토리툴바