max-width:1199px 강의 앞부분이 궁금합니다.

7 asked

3

앗 정말이네요! 누락된게 맞습니다. 찾아주셔서 감사해요!
강의 영상을 다시 작업할 수 가 없어 아래에 설명으로 남겨 놓겠습니다.

@media screen and (max-width:1199px){}
가로폭 1199에서 분기점을 만듭니다.
html,body{ font-size:56.3%}
html,body의 글꼴 사이즈를 변경해주면, rem 단위를 사용하기 때문에 root에서 딱 한번만 변경이 됩니다.
그래서 전체 html요소의 사이즈를 한꺼번에 변경할 수 있습니다.

header{height: 83px;}

header의 높이 값을 조정합니다.

header .inner{
align-items: center;
padding:0 20px ;
}

flex 교차축을 재정렬 합니다. 양쪽 여백을 띄어서 약간의 공간을 만들어 줍니다.

.visual{ height: 548px; }
.visu_txt{
position:static;
top:auto;
left:auto;
align-items: center;
margin:auto;
text-align: center;
}

.visual의 높이값을 재 조정하고 .txt의 position을 static으로 바꿔 기본값으로 나오게 합니다.
이때 top,left 값을 auto로 변경해 줍니다.

.dep03 .inner{
flex-direction: column;
align-items: center;
}

.dep03의 .inner에 flex 방향값을 변경하고 교차축 즉 direction이 column인 상태에서는 수평 정렬을 가운데로 잡아줍니다.

.dep03 .txt_wrap {
text-align: center;
margin-bottom:140px;
}
.dep03{ padding:130px 0; }
.dep03의 .txt_wrap 여백값과 문단 정렬을 정의 해줍니다.
.dep03 요소의 안쪽 여백도 조정합니다.

.depth { padding:100px 20px; }

전체 .depth의 여백을 조정합니다.
.dep1_list li{ width:calc(100% / 4 - 19.5px) }
.dep1_list li .img_wrap{ height: 220px; }

.dep1의 li의 너비를 조정해 25%에서 여백값을 제외하고 나눠 갖을 수 있게 합니다.
.img_wrap의 높이를 조정합니다.

.dep02 .img_wrap, .dep04 .img_wrap{
width:430px;
height: 430px;
}
2,4 섹션의 .img_wrap의 가로 세로 폭을 조정합니다.
이상 1199px에서의 mediaquery였습니다.
누락된 부분인데 말씀해 주셔서 감사드립니다!
완강하시고 하시고자 하는거 다 이루시길 기원합니다!