Html div 가운데 정렬, 반응형 웹

가운데 정렬하기

body{
margin:0;
padding:0;

1. 부모한테 속성을 설정, 자식을 중앙으로 정렬
   #parent{
   text-align: center;

#child{
display: inline-block;

2.자식 자기 자신을 중앙으로 정렬
margin:0 auto;

#parent {
background: skyblue;
border: 1px solid black;
height:500px;
}

#child{
text-align: center;
width: 50%;
background: tomato;
margin: 0 auto;
height: 300px;
line-height: 300px;
}

글상자의 높이line-height, height 가 같고 text-align 이 가운데 정렬이 되어 있으면 가운데로 나옴

부모 상자 안에 자식 상자를 가운데 위치시키기
#parent {
background: skyblue;
border: 1px solid black;
height:500px;
position: relative;
margin: 100px;

}

#child{
text-align: center;
width: 50%;
background: tomato;
margin: 0 auto;
height: 300px;
line-height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}

부모의 포지션 relative(기준), 자식의 포지션 absolute(기준에 맞게 움직임)
자식은 left왼쪽에서 50% 위쪽에서 top50% 위치
여기서 -50% -50% 만큼 다시 이동하면 가운데에 위치

반응형 웹

.photo-box{
width: 500px;
height: 500px;
background-color: greenyellow;
}

@media screen and (max-width:1000px){
.photo-box{
background: pink;
width: 400px;
}
}

@media screen and (max-width:700px){
.photo-box{
background:yellow;
width: 300px;
}
}

@media screen and (max-width:370px){
.photo-box{
background: rgb(248, 135, 135);
width: 100px;
}
}

창크기가 변하면 색과 크기가 변하도록 설정
1000픽셀 이하이면 색이 변함

body{
padding: 0;
margin:0;
}

.parent{
width: 600px;
height: 200px;
background-color: greenyellow;
text-align: center;
}

.child{
width: 200px;
height: 200px;
background-color: red;
display: inline-block;
}

@media screen and (max-width:600px){
.parent{
height: 420px;
}
.child{
width: 90%;
}

.child:nth-child(2){
    margin-top: 20px;
}

}