[Css][반응형 웹] flex 이용하여 div 박스를 원하는 위치로 내리기

기본 스펙 : react

 

사건의 전말

 

이 포스팅은 원하는 마크업을 위해 좌충우돌 css를 만졌던 과정을 담은 작업기이다.

이전 상태

도시별 현재 날씨 정보 앱페이지를 만드는 과정 중에 div 박스를 적절한 위치로 내리고 싶었다.

 

 

원했던 위치1

원했던 위치2

CSS position

[css] position 요소의 위치 설정

위 포스팅을 참고하여, div를 원하는 위치에 옮겨보았다. 

 

.container{
  position:relative;
  
  /*원래 있어야 할 위치에서 위에서부터 100px 떨어진다*/
  top:100px; 
}

 

현재 웹 크기에 맞게 div가 내려가기는 하였지만, 웹페이지를 줄였다 늘렸다(가로로, 세로로도) 했을 때

한 화면 안에 있던 요소들의 비율이 이상하게 변경됨 + 파란 버튼들이 화면 아래로 밀려나감 + 배경 사진이 full 이 아니라 아래 흰색 공백이 생김 ; 이슈가 발생하였다.

아마 아래와 같이 날씨 info 박스의 클래스에   top:100px;  속성을 주어서 애먼 블루 버튼 그룹이 밀려내려간 것 같았다. 

원했던 위치1

 

반응형 배경이미지

 

일단 웹의 사이즈를 줄였을 때 배경사진이

반응형 웹과 같이 완전히 변화하지 않는다면 점을 알게 되어 서치를 돌려보게 되었다.

 

 

반응형으로 종횡비 유지하여 이미지 표시하기

 

---

background-image

<div> 태그 등으로 크기가 있는 컨테이너에 대해서 background-image 속성을 주어서 컨테이너를 화면 사이즈에 따라 크기를 변경시키며 반응형으로 구현할 수도 있습니다.

1️⃣  이미지를 브라우저의 크기에 따라 꽉 채울 경우

.card{
    width: 100%;
    height: 100vh;
    background-image: url("image-url");
    background-repeat: no-repeat // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
    background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
    background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다. 
}

---

배경이미지는 위의 정보를 이용하여 한결 반응형스러워졌다.

 

 

텍스트 중앙정렬

 

그 다음 날씨 정보 텍스트 들을 전부 중앙정렬 시켜 주었다.

참고 : https://biyanbiyan.tistory.com/367

[css] button 한 줄로 가운데 정렬

 

그 외에는 flex를 돌려막으며...

원하는 반응형 스타일을 구축할 수 있었다.

 

최종

제법(?) 근사한 반응형 웹이 완성되었다. 

 

코드 공개 (react 기반)

* 참고로 파란 버튼들은 부트스트랩 썼습니다.

 

App.js

 

마크업 참고에 필요하다 싶은 코드들만 긁어서 올렸습니다.

전체 코드 궁금하신분들 대상으로 깃허브 링크 공유하겠습니다.

import './App.css';
import { useEffect, useState } from 'react';
import WeatherBox from "./component/WaetherBox";
import WeatherButton from "./component/WeatherButton";
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
	return (
		<div>
			<div className='main'>

				<WeatherBox />

				<div className='cityButtonGroup'>
					<WeatherButton title="Seoul" />
					<WeatherButton title="NewYork" />
					<WeatherButton title="Toronto" />
					<WeatherButton title="Paris" />
					<WeatherButton title="Rondon" />
				</div>
			</div>
			<div>
			</div>
		</div >
	);
}

export default App;

 

WeatherBox.js

import React from 'react'

const WaetherBox = () => {
	return (
		<div className='weather-info-parents'>
			<div className='weather-info'>
				<div className='weather-info-text'>Your Weather</div>
				<h2 className='weather-info-text'>30도 / 230 화씨</h2>
				<h2 className='weather-info-text'>맑은 하늘</h2>
			</div>
		</div>
	)
}

export default WaetherBox

 

WeatherButton.js

import React from 'react'
import { Button } from 'react-bootstrap';

const WeatherButton = (props) => {
	return (
		<div>
			<Button variant="primary">{props.title}</Button>
		</div>
	)
}

export default WeatherButton

 

App.css

body{
	background-image : url(https://wallpaperaccess.com/full/5466320.jpg);
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.main{
	display: flex;
	flex-direction: column;
	margin: auto;
	justify-content: center;
	justify-content: space-evenly;
	height: 100vh;
}

.weather-info-parents{
	display: flex;
	justify-content: center;
}

.weather-info{
	width: 500px;
	border: 3px solid #aec6fe;
	color: white;
	padding: 50px;
}

.weather-info-text {
	width: 100%;
	text-align: center;
}

.cityButtonGroup{
	display: flex;
	justify-content: center;
	justify-content: space-evenly;
	align-items: center;
	position:relative;
	width: 100%;
	overflow: hidden;
}

 

- Happy Ending -

 

+ .weather-info를 아래와 같이 조금 더 다듬었다.

background-color:rgba(0, 0, 0, 0.2);/*까만색(0,0,0) 20% 불투명도*/

.weather-info{
	width: 800px;
	border: 3px solid #aec6fe;
	border-radius: 10px;
	color: white;
	background-color:rgba(108, 144, 202, 0.4);
	padding: 100px;
}

제법 마음에 든다 :}