10월 06, 2022

이미지를 PC에선 수평으로, 모바일에서 수직으로 정렬

위의 위의 청색 이미지는, 현재 보이는(PC기준) 것과 마찬가지로, 스마트폰에서도 가로로 나란하게 정렬되어 보인다. 넓이(width) 100%인 상위(parent) div 를 만든 다음, 그 안에, 넓이(width)가 50%인 2개의 하위(child) div를 만들어 이미지를 넣으면 된다. 구글블로그의 경우 이미지를 삽입 시 만들어지는 div 안에  id를 만들어 넣으면 된다. 이때, 상위 div의 ‘display'가 반드시 ’flex'로 설정되어야 한다는 점에 유의해야 한다.
위의 녹색 이미지는, PC에서는 가로로 정렬되어 보이지만, 스미트폰에서는 세로로 보여 진다. 그러기 위해서는 상위 div의 ‘display'가 반드시 ’block'으로 설정되어야 하는데, 해당게시글 페이지에 아래처럼 스타일시트를 만들면 된다. 또한 블로그 메인에서 모바일 설정이 되어야 하는데 방법은 아래의 링크를 참고하면 된다.
모바일 설정하기 참고

데스크탑 화면


#container {
   width:100%;
   overflow: hidden;
   display:block;
}
#container1 {
   width:100%;
   overflow: hidden;
   display:flex;
}
#left {
   width:50%;
   float:left;
}
#right {
   width:50%;
   float:right
}

스미트폰 화면


@media only screen and (max-width: 767px){
#left, #right{
   display: block;  
   float: none; 
   width: 100%;
   padding: 20px 0;
   text-align:center;
}
}