갠홈 메인창 div 설정

 

지인분들이 메인창 만지다가 어려움을 느끼시는 것 같아서 이 글을 올려둡니다..

별건 아니고 아래 창처럼 메인을 여러개로 나누는 방법입니다.(어느정도 css와 html을 볼 줄 안다는 전제로 적었습니다.)

(스크린 사이즈 변경 시 같이 쪼그라들음)

일단 Style을 아래처럼 적습니다.

#container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
margin: 0 auto;
}

.main_top{text-align: center;
border: 1px solid #000;
padding: 20px;}

.main_bottom{ display:flex;
height: 200px;
margin-top: 10px;}

.bottom_left{ flex: 1;
position: relative;
padding: 20px;
border: 1px solid #000;
text-align: center;
height: auto;
}

.bottom_right{ flex: 1;
position: relative;
text-align: center;
margin-left: 10px;
display: grid;
grid-template-rows: 55px auto;
height: auto;
}

.right_top{padding: 20px; border: 1px solid #000;}

.right_bottom{padding: 20px; border: 1px solid #000;margin-top: 10px;}

그리고 html은 아래처럼 적습니다.

<div id="container">
<div class="main_top">
ㅇㅕ어
</div>
 
<div class="main_bottom">

<div class="bottom_left">테스트1</div>

<div class="bottom_right">
<div class="right_top">테스트1</div>
<div class="right_bottom">테스트2</div>
</div>
</div>

</div>

그럼 아래 이미지처럼 나옵니다.

이걸 이용해서 Main을 꾸미면 됩니다.

Search Post

Label :